Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Designing the Hero Section | Creating a Portfolio Website with Bootstrap
Bootstrap Essentials for Modern Websites

bookDesigning the Hero Section

Create the Hero Section

Below the navigation bar, create a hero section to introduce yourself. Use Bootstrap's grid system to organize the layout.

<section id="about" class="hero-section py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-6 mx-auto">
        <!-- Add professional photo here -->
        <img
          src="your-photo.jpg"
          alt="[Your Name]"
          class="img-fluid"
          style="display: block; margin: 0 auto"
        />
      </div>
      <div class="col-md-8 mx-auto">
        <!-- Add short description about yourself here -->
        <h1 class="h1 text-center fs-2 text-primary my-3">Your Name</h1>
        <p class="fs-3">
          Welcome to my portfolio! I'm a passionate [your profession] based in
          [your location]. I specialize in [your expertise] and love creating
          [your interests].
        </p>
      </div>
    </div>
  </div>
</section>

2. Add Professional Photo and Description

Replace "your-photo.jpg" with the file path or URL of your professional photo. Update the short description with information about yourself, including your profession, location, expertise, and interests.

Result

index.html

index.html

copy
Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 4

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 3.23

bookDesigning the Hero Section

Sveip for å vise menyen

Create the Hero Section

Below the navigation bar, create a hero section to introduce yourself. Use Bootstrap's grid system to organize the layout.

<section id="about" class="hero-section py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-6 mx-auto">
        <!-- Add professional photo here -->
        <img
          src="your-photo.jpg"
          alt="[Your Name]"
          class="img-fluid"
          style="display: block; margin: 0 auto"
        />
      </div>
      <div class="col-md-8 mx-auto">
        <!-- Add short description about yourself here -->
        <h1 class="h1 text-center fs-2 text-primary my-3">Your Name</h1>
        <p class="fs-3">
          Welcome to my portfolio! I'm a passionate [your profession] based in
          [your location]. I specialize in [your expertise] and love creating
          [your interests].
        </p>
      </div>
    </div>
  </div>
</section>

2. Add Professional Photo and Description

Replace "your-photo.jpg" with the file path or URL of your professional photo. Update the short description with information about yourself, including your profession, location, expertise, and interests.

Result

index.html

index.html

copy
Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 4
some-alt