← Tilbake til oversikten

Design med Bootstrap

Lær å koble til Bootstrap via CDN og bygg en enkel side med ferdige design for div'ene dine.

A. Mål for oppgaven

B. Steg-for-steg guide

  1. Opprett mappe (f.eks. bootstrap-øvelse) og filen index.html.
  2. Lim inn grunnstrukturen under og koble til Bootstrap via CDN.
  3. Åpne index.html i nettleseren og sjekk at teksten ser “Bootstrap‑styled” ut.
  4. Legg til en knapp, et kort og en enkel to‑kolonne grid.
Hint: Høyreklikk → Inspiser for å se hvilke Bootstrap‑klasser som styrer utseendet.

C. Eksempelkode (kort)

<!doctype html>
<html lang="no">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Eksempel</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <!-- Navigasjonsmeny -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="#">Min Side</a>
      </div>
    </nav>

    <!-- Hero seksjon -->
    <header class="bg-primary text-white text-center py-5">
      <div class="container">
        <h1 class="fw-bold">Hei, Bootstrap!</h1>
        <p class="lead">Dette er en enkel og kul side laget med Bootstrap.</p>
        <a href="#" class="btn btn-light btn-lg">Kom i gang</a>
      </div>
    </header>

    <!-- Kortseksjon -->
    <div class="container my-5">
      <div class="row g-4">
        <div class="col-md-4">
          <div class="card h-100 shadow">
            <div class="card-body text-center">
              <h5 class="card-title">Kort 1</h5>
              <p class="card-text">Et eksempel på et Bootstrap-kort.</p>
              <a href="#" class="btn btn-primary">Les mer</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card h-100 shadow">
            <div class="card-body text-center">
              <h5 class="card-title">Kort 2</h5>
              <p class="card-text">Bootstrap gjør layout enkelt og ryddig.</p>
              <a href="#" class="btn btn-success">Klikk her</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card h-100 shadow">
            <div class="card-body text-center">
              <h5 class="card-title">Kort 3</h5>
              <p class="card-text">Alt er mobilvennlig rett ut av boksen.</p>
              <a href="#" class="btn btn-warning">Sjekk ut</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <footer class="bg-dark text-white text-center py-3">
      <p class="mb-0">© 2025 Min Bootstrap-side</p>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

D. Lenker til dokumentasjon

Hint: Denne siden er laget ved hjelp av Bootstrap og CDN-metoden. Inspiser gjerne denne siden og sjekk ut https://getbootstrap.com/
← Tilbake