Quest: Grid vs Flex w Bootstrapie

przez
HTML CSS CMSPZAW

Porównajmy dwa warianty kodu:

Grid

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap layout – Grid</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    rel="stylesheet">
</head>
<body>

<div class="container my-4">

  <!-- HEADER -->
  <header class="mb-4 border rounded overflow-hidden">
    <img
      src="https://picsum.photos/1200/300"
      class="img-fluid w-100"
      alt="Nagłówek">
  </header>

  <!-- CONTENT -->
  <div class="row g-4">

    <!-- NAV -->
    <nav class="col-12 col-md-3">
      <ul class="list-group border rounded">
        <li class="list-group-item">Home</li>
        <li class="list-group-item">Oferta</li>
        <li class="list-group-item">O nas</li>
        <li class="list-group-item">Kontakt</li>
      </ul>
    </nav>

    <!-- MAIN -->
    <main class="col-12 col-md-9">
      <ul class="list-group border rounded">
        <li class="list-group-item">Artykuł 1</li>
        <li class="list-group-item">Artykuł 2</li>
        <li class="list-group-item">Artykuł 3</li>
        <li class="list-group-item">Artykuł 4</li>
      </ul>
    </main>
  </div>

  <!-- FOOTER -->
  <footer class="mt-4 p-3 border rounded text-center">
    © 2026 – Przykładowa stopka
  </footer>
</div>

</body>
</html>

Flex

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap layout – Flex</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    rel="stylesheet">
</head>
<body>
<div class="container my-4 d-flex flex-column gap-4">

  <!-- HEADER -->
  <header class="border rounded overflow-hidden">
    <img
      src="https://picsum.photos/1200/300"
      class="img-fluid w-100"
      alt="Nagłówek">
  </header>

  <!-- CONTENT -->
  <div class="d-flex flex-column flex-md-row gap-4">

    <!-- NAV -->
    <nav class="flex-shrink-0" style="min-width: 200px;">
      <ul class="list-group border rounded">
        <li class="list-group-item">Home</li>
        <li class="list-group-item">Oferta</li>
        <li class="list-group-item">O nas</li>
        <li class="list-group-item">Kontakt</li>
      </ul>
    </nav>

    <!-- MAIN -->
    <main class="flex-fill">
      <ul class="list-group border rounded">
        <li class="list-group-item">Element 1</li>
        <li class="list-group-item">Element 2</li>
        <li class="list-group-item">Element 3</li>
        <li class="list-group-item">Element 4</li>
      </ul>
    </main>

  </div>
  <!-- FOOTER -->
  <footer class="p-3 border rounded text-center">
    © 2026 – Przykładowa stopka
  </footer>
</div>

</body>
</html>

Wybierz bardziej zrozumiały dla Ciebie wariant i przerób:

  1. Zamień miejscami kolumny
  2. Podziel wąską kolumnę na 2 oddzielne ramki (jedna pod drugą)
  3. Zmień szerokości
  4. Dodaj trzecią kolumnę
  5. Zmień domyślną kolejność bloków podczas wyświetlania na wąskim ekranie

Pomocne prompty:

  • Przygotuj zestawienie klas Bootstrapa związanych z layoutem strony
  • Przygotuj prostą stronę z responsywnym layoutem (nagłówek=obrazek, stopka=tekst, main i nav=lista) opartą wyłącznie na klasach bootstrapa. Ma być tak prosta jak to możliwe, ale w miarę ładna (marginesy, obramowania). Stronę przygotuj na 2 sposoby.
  • Wyjaśnij breakpointy w Bootstrapie 5. Podaj wszystkie dostępne breakpointy wraz z nazwą, prefiksem i minimalną szerokością ekranu. Pokaż przykłady klas z wyjaśnieniami. Wyjaśnij zasadę mobile first. Uwzględnij najczęstsze błędy początkujących.

Twój komentarz

Zapisz moje dane, adres e-mail i witrynę w przeglądarce aby wypełnić dane podczas pisania kolejnych komentarzy.