Summary  
This chapter explains how to structure HTML elements and apply Bootstrap’s Navbar component—with classes for branding, toggling, collapsible content, and navigation links—to create a responsive header and navigation bar.

General domain of usage  
Portfolio website development

## 1. Opprett en navigasjonslinje
Start med å legge til en navigasjonslinje øverst på siden. Bruk Bootstraps Navbar-komponent til dette formålet.
```html
<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">My Portfolio</a>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto">
          
        </ul>
      </div>
    </div>
  </nav>
</header>
```

## 2. Legg til navigasjonslenker
Legg til navigasjonslenker for hjemmesiden, om meg, erfaring, ferdigheter og kontaktseksjoner innenfor klassen `navbar-nav`.
```html
<ul class="navbar-nav ms-auto">
  <li class="nav-item">
    <a class="nav-link" href="#about">About Me</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#experience">Experience</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#skills">Skills</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#contact">Contact</a>
  </li>
</ul>
```

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+UG9ydGZvbGlvPC90aXRsZT4KICAgIDwhLS0gQm9vdHN0cmFwIENTUyAtLT4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDwhLS0gQnVpbGQgSGVhZGVyIE5hdmlnYXRpb24gLS0+CiAgICA8aGVhZGVyPgogICAgICA8bmF2IGNsYXNzPSJuYXZiYXIgbmF2YmFyLWV4cGFuZC1sZyBuYXZiYXItbGlnaHQgYmctbGlnaHQiPgogICAgICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgICAgICA8YSBjbGFzcz0ibmF2YmFyLWJyYW5kIiBocmVmPSIjIj5NeSBQb3J0Zm9saW88L2E+CiAgICAgICAgICA8YnV0dG9uCiAgICAgICAgICAgIGNsYXNzPSJuYXZiYXItdG9nZ2xlciIKICAgICAgICAgICAgdHlwZT0iYnV0dG9uIgogICAgICAgICAgICBkYXRhLWJzLXRvZ2dsZT0iY29sbGFwc2UiCiAgICAgICAgICAgIGRhdGEtYnMtdGFyZ2V0PSIjbmF2YmFyU3VwcG9ydGVkQ29udGVudCIKICAgICAgICAgICAgYXJpYS1jb250cm9scz0ibmF2YmFyU3VwcG9ydGVkQ29udGVudCIKICAgICAgICAgICAgYXJpYS1leHBhbmRlZD0iZmFsc2UiCiAgICAgICAgICAgIGFyaWEtbGFiZWw9IlRvZ2dsZSBuYXZpZ2F0aW9uIgogICAgICAgICAgPgogICAgICAgICAgICA8c3BhbiBjbGFzcz0ibmF2YmFyLXRvZ2dsZXItaWNvbiI+PC9zcGFuPgogICAgICAgICAgPC9idXR0b24+CiAgICAgICAgICA8ZGl2IGNsYXNzPSJjb2xsYXBzZSBuYXZiYXItY29sbGFwc2UiIGlkPSJuYXZiYXJTdXBwb3J0ZWRDb250ZW50Ij4KICAgICAgICAgICAgPHVsIGNsYXNzPSJuYXZiYXItbmF2IG1zLWF1dG8iPgogICAgICAgICAgICAgIDxsaSBjbGFzcz0ibmF2LWl0ZW0iPgogICAgICAgICAgICAgICAgPGEgY2xhc3M9Im5hdi1saW5rIiBocmVmPSIjYWJvdXQiPkFib3V0IE1lPC9hPgogICAgICAgICAgICAgIDwvbGk+CiAgICAgICAgICAgICAgPGxpIGNsYXNzPSJuYXYtaXRlbSI+CiAgICAgICAgICAgICAgICA8YSBjbGFzcz0ibmF2LWxpbmsiIGhyZWY9IiNleHBlcmllbmNlIj5FeHBlcmllbmNlPC9hPgogICAgICAgICAgICAgIDwvbGk+CiAgICAgICAgICAgICAgPGxpIGNsYXNzPSJuYXYtaXRlbSI+CiAgICAgICAgICAgICAgICA8YSBjbGFzcz0ibmF2LWxpbmsiIGhyZWY9IiNza2lsbHMiPlNraWxsczwvYT4KICAgICAgICAgICAgICA8L2xpPgogICAgICAgICAgICAgIDxsaSBjbGFzcz0ibmF2LWl0ZW0iPgogICAgICAgICAgICAgICAgPGEgY2xhc3M9Im5hdi1saW5rIiBocmVmPSIjY29udGFjdCI+Q29udGFjdDwvYT4KICAgICAgICAgICAgICA8L2xpPgogICAgICAgICAgICA8L3VsPgogICAgICAgICAgPC9kaXY+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbmF2PgogICAgPC9oZWFkZXI+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4zLjIvZGlzdC9qcy9ib290c3RyYXAubWluLmpzIj48L3NjcmlwdD4KICAgIDwhLS0gQXNzaXN0YW50IHNjcmlwdCAtLT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzLzQzMzNhYjFmLTBhNzItNDMxYy1iOWQwLTczYTc1OTI3MzlkNC9hc3Npc3RhbnQtc2NyaXB0LmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

Utforsk kjerneprinsippene i Bootstrap CSS-rammeverket og oppdag hemmelighetene bak å lage responsive og visuelt imponerende nettsteder raskt og effektivt. Gjennom praktisk utforskning av sentrale verktøy og implementering av kraftige komponenter, får du uvurderlig praktisk erfaring som effektiviserer arbeidsflyten i webutvikling ved hjelp av Bootstraps allsidige verktøykasse.

Utforsk kjernen i Bootstrap og dets utvikling fra oppstart til i dag, vurder fordeler og ulemper, og forstå forutsetninger for effektiv implementering.

Naviger gjennom alternativer for installasjon av Bootstrap. Velg mellom rask integrasjon via Content Delivery Network (CDN) eller en mer tilpasset tilnærming med Node Package Manager (NPM).

Oppnå ferdigheter i sentrale Bootstrap-elementer, inkludert det allsidige rutenettsystemet, nyansert typografi, dynamisk bruk av knapper, presis håndtering av marger og polstringer, samt utforming av effektive skjemaer for sømløs brukerinteraksjon.

Hev dine Bootstrap-ferdigheter med avanserte emner som dekker dynamiske navigasjonsmenyer, responsiv bildehåndtering, allsidige kortoppsett, interaktive modaler og engasjerende karuseller for fengende brukeropplevelser.

Lag en porteføljenettside ved hjelp av Bootstrap-rammeverket med vår veiledning. Utnytt de kraftige funksjonene i Bootstrap. Denne praktiske delen hjelper deg med å vise frem dine ferdigheter, prosjekter og prestasjoner.

Bygge Topptekst og Navigasjon

1. Opprett en navigasjonslinje

2. Legg til navigasjonslenker

Resultat

Awesome!

Bygge Topptekst og Navigasjon

1. Opprett en navigasjonslinje

2. Legg til navigasjonslenker

Resultat