Tych elementów Bootstrapa będziesz używać w każdym projekcie

Bootstrap to bez wątpienia jeden z najpopularniejszych frameworków CSS na świecie. Od lat stanowi fundament tysięcy stron internetowych, aplikacji webowych i paneli administracyjnych. Dlaczego zdobył taką popularność? Odpowiedź jest prosta: oszczędza czas, zapewnia spójność wizualną i pozwala nawet mniej doświadczonym programistom tworzyć responsywne, estetyczne interfejsy. W tym artykule przejdziemy przez elementy, po które sięgasz niemal w każdym projekcie – niezależnie od tego, czy budujesz landing page, sklep internetowy czy rozbudowany system CRM.

Czym właściwie jest Bootstrap i dlaczego warto go znać?

Bootstrap to framework front-endowy stworzony pierwotnie przez programistów Twittera – Marka Otto i Jacoba Thorntona. Pierwsza wersja ujrzała światło dzienne w 2011 roku jako wewnętrzne narzędzie do ujednolicenia interfejsów w firmie. Szybko jednak zyskał ogromną popularność w społeczności developerów i dziś jest rozwijany jako projekt open-source. Jak powiedział kiedyś Mark Otto: „Bootstrap powstał, bo byliśmy zmęczeni niespójnością – chcieliśmy, żeby każdy w zespole mówił tym samym językiem wizualnym.”

Framework dostarcza gotowe komponenty CSS i JavaScript, które możesz wykorzystać od ręki. Nie musisz pisać stylów od zera ani martwić się o kompatybilność z różnymi przeglądarkami. To trochę jak klocki LEGO – masz zestaw elementów, które łączysz ze sobą, tworząc większą całość. I właśnie ta modularność sprawia, że Bootstrap sprawdza się zarówno w małych projektach, jak i w rozbudowanych aplikacjach enterprise.

System siatki – fundament każdego layoutu

Jeśli miałbym wskazać jeden element Bootstrapa, bez którego nie wyobrażam sobie pracy, byłby to zdecydowanie grid system. System siatki oparty na 12 kolumnach pozwala budować responsywne layouty w sposób intuicyjny i przewidywalny. Niezależnie od tego, czy projektujesz stronę na desktop, tablet czy smartfon, siatka automatycznie dostosowuje układ do szerokości ekranu.

Jak działa siatka Bootstrapa?

Cała filozofia opiera się na trzech głównych klasach: .container, .row i .col. Kontener opakowuje całą zawartość i nadaje jej maksymalną szerokość. Wiersz (row) grupuje kolumny i zapewnia prawidłowe odstępy między nimi. Kolumny natomiast definiują, ile miejsca zajmuje dany element.

<div class="container">
  <div class="row">
    <div class="col-md-6">Lewa kolumna</div>
    <div class="col-md-6">Prawa kolumna</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-6">Lewa kolumna</div>
    <div class="col-md-6">Prawa kolumna</div>
  </div>
</div>

W powyższym przykładzie mamy dwie kolumny, z których każda zajmuje połowę szerokości kontenera na urządzeniach średnich i większych (breakpoint md). Na mniejszych ekranach kolumny automatycznie ułożą się jedna pod drugą.

Breakpointy – responsywność pod kontrolą

Bootstrap oferuje kilka predefiniowanych breakpointów, które pozwalają precyzyjnie kontrolować zachowanie layoutu na różnych urządzeniach:

Dzięki temu możesz definiować różne układy dla różnych urządzeń w jednej linii kodu. Klasa .col-12 .col-md-6 .col-lg-4 oznacza: na telefonie pełna szerokość, na tablecie połowa, na desktopie jedna trzecia. Proste, prawda?

Przesunięcia i kolejność kolumn

Czasami potrzebujesz przesunąć kolumnę lub zmienić kolejność elementów w zależności od urządzenia. Bootstrap oferuje do tego klasy offset oraz order. Offset dodaje puste miejsce przed kolumną, a order pozwala zmieniać kolejność wyświetlania bez modyfikacji HTML-a.

<div class="row">
  <div class="col-md-4 offset-md-2">Kolumna z przesunięciem</div>
  <div class="col-md-4">Standardowa kolumna</div>
</div>

<div class="row">
  <div class="col-md-4 offset-md-2">Kolumna z przesunięciem</div>
  <div class="col-md-4">Standardowa kolumna</div>
</div>

Przyciski – małe, ale niezbędne

Co zastanawiające, przyciski to element, który wydaje się banalny, a jednak bez niego nie powstanie żadna interaktywna strona. Bootstrap dostarcza zestaw gotowych stylów przycisków, które możesz zastosować jedną klasą. Podstawowa klasa .btn to fundament, do którego dodajesz wariant kolorystyczny.

<button class="btn btn-primary">Główna akcja</button>
<button class="btn btn-secondary">Akcja drugorzędna</button>
<button class="btn btn-success">Sukces</button>
<button class="btn btn-danger">Usuń</button>
<button class="btn btn-outline-primary">Wariant outline</button>

<button class="btn btn-primary">Główna akcja</button>
<button class="btn btn-secondary">Akcja drugorzędna</button>
<button class="btn btn-success">Sukces</button>
<button class="btn btn-danger">Usuń</button>
<button class="btn btn-outline-primary">Wariant outline</button>

Przyciski możesz też skalować za pomocą klas .btn-lg i .btn-sm, a także rozciągać na całą szerokość rodzica dzięki .w-100 lub starej klasie .btn-block (w Bootstrap 4). To drobnostka, ale ile razy pisałeś własne style dla przycisków, zanim poznałeś Bootstrap? Pewnie więcej, niż chciałbyś przyznać.

Modale – eleganckie okna dialogowe

Modal, czyli wyskakujące okno dialogowe, to element, który znajdziesz praktycznie na każdej nowoczesnej stronie. Formularze logowania, potwierdzenia usunięcia, galerie zdjęć, komunikaty informacyjne – zastosowań jest mnóstwo. Bootstrap oferuje w pełni funkcjonalny komponent modala, który działa prosto z pudełka.

Podstawowa struktura modala

<!-- Przycisk otwierający modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Otwórz modal
</button>

<!-- Struktura modala -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Tytuł okna</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
      </div>
      <div class="modal-body">
        Treść okna dialogowego znajduje się tutaj.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Anuluj</button>
        <button type="button" class="btn btn-primary">Zapisz zmiany</button>
      </div>
    </div>
  </div>
</div>

<!-- Przycisk otwierający modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Otwórz modal
</button>

<!-- Struktura modala -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Tytuł okna</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
      </div>
      <div class="modal-body">
        Treść okna dialogowego znajduje się tutaj.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Anuluj</button>
        <button type="button" class="btn btn-primary">Zapisz zmiany</button>
      </div>
    </div>
  </div>
</div>

Kluczowe są atrybuty data-bs-toggle="modal" i data-bs-target="#exampleModal", które łączą przycisk z konkretnym modalem. Framework automatycznie obsługuje animację pojawiania się, przyciemnienie tła i zamykanie po kliknięciu poza obszar okna.

Rozmiary i centrowanie modala

Modale możesz dostosować do treści. Klasy .modal-sm, .modal-lg i .modal-xl zmieniają szerokość okna. Jeśli chcesz wycentrować modal pionowo, dodaj klasę .modal-dialog-centered do elementu .modal-dialog. Warto też wspomnieć o klasie .modal-dialog-scrollable, która sprawia, że przy długiej treści przewijana jest tylko zawartość modala, a nie cała strona.

Tooltipy – podpowiedzi w zasięgu kursora

Czy zdarzyło Ci się najechać kursorem na ikonkę i zobaczyć mały dymek z wyjaśnieniem? To właśnie tooltip. Ten niepozorny element znacząco poprawia użyteczność interfejsu, szczególnie gdy masz ograniczone miejsce na etykiety. Bootstrap pozwala dodać tooltip do praktycznie każdego elementu.

Inicjalizacja tooltipów

W przeciwieństwie do wielu innych komponentów Bootstrapa, tooltipy wymagają ręcznej inicjalizacji za pomocą JavaScriptu. To celowe rozwiązanie – ze względu na wydajność framework nie skanuje całego DOM-u w poszukiwaniu tooltipów.

<button type="button" class="btn btn-secondary" 
        data-bs-toggle="tooltip" 
        data-bs-placement="top" 
        title="To jest podpowiedź!">
  Najedź na mnie
</button>

<button type="button" class="btn btn-secondary" 
        data-bs-toggle="tooltip" 
        data-bs-placement="top" 
        title="To jest podpowiedź!">
  Najedź na mnie
</button>

// Inicjalizacja wszystkich tooltipów na stronie
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(el => new bootstrap.Tooltip(el));

// Inicjalizacja wszystkich tooltipów na stronie
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(el => new bootstrap.Tooltip(el));

Atrybut data-bs-placement określa pozycję dymki: top, bottom, left lub right. Tooltip automatycznie dostosuje pozycję, jeśli przy krawędzi ekranu nie będzie wystarczająco miejsca.

Karty – uniwersalne kontenery treści

Komponent Card zastąpił stare panele i thumbnails z Bootstrap 3, stając się uniwersalnym kontenerem na różnego rodzaju treści. Karty świetnie sprawdzają się do prezentacji produktów, wpisów blogowych, profili użytkowników czy statystyk.

<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="Zdjęcie">
  <div class="card-body">
    <h5 class="card-title">Tytuł karty</h5>
    <p class="card-text">Krótki opis treści, która znajduje się w karcie.</p>
    <a href="#" class="btn btn-primary">Przejdź dalej</a>
  </div>
</div>

<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="Zdjęcie">
  <div class="card-body">
    <h5 class="card-title">Tytuł karty</h5>
    <p class="card-text">Krótki opis treści, która znajduje się w karcie.</p>
    <a href="#" class="btn btn-primary">Przejdź dalej</a>
  </div>
</div>

Karty można łączyć w grupy za pomocą .card-group, układać w siatce lub używać z komponentem masonry do tworzenia dynamicznych układów. Elastyczność tego komponentu sprawia, że sięgam po niego naprawdę często.

Nawigacja – menu, które działa wszędzie

Responsywne menu nawigacyjne to wyzwanie, które Bootstrap rozwiązuje za pomocą komponentu Navbar. Otrzymujesz w pełni funkcjonalną nawigację z hamburger menu na urządzeniach mobilnych, rozwijalnymi dropdownami i możliwością umieszczenia formularza wyszukiwania.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Strona główna</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Usługi</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Kontakt</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Strona główna</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Usługi</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Kontakt</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Klasa .navbar-expand-lg określa breakpoint, przy którym menu przechodzi z wersji mobilnej do pełnej. Możesz też użyć wariantów kolorystycznych: .navbar-dark z .bg-dark dla ciemnego motywu lub .navbar-light z .bg-light dla jasnego.

W przypadku, gdy budujecie stronę opartą o WordPress, bardzo dobrą alternatywą jest Max Mega Menu. Jest bardzo łatwe w użyciu. Wystarczy standardowy kod dla menu w WordPressie, wtyczką zrobi resztę po odpowiedniej konfiguracji, ewentualnie lekkich dostosowaniach CSS.

Formularze – zbieranie danych po bożemu

Formularze HTML bez stylowania wyglądają, delikatnie mówiąc, archaicznie. Bootstrap oferuje klasy, które nadają polom formularza spójny, nowoczesny wygląd. Co więcej, dostarcza też komponenty do walidacji i wyświetlania komunikatów o błędach.

<form>
  <div class="mb-3">
    <label for="email" class="form-label">Adres e-mail</label>
    <input type="email" class="form-control" id="email" placeholder="nazwa@example.com">
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Hasło</label>
    <input type="password" class="form-control" id="password">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="remember">
    <label class="form-check-label" for="remember">Zapamiętaj mnie</label>
  </div>
  <button type="submit" class="btn btn-primary">Zaloguj się</button>
</form>

<form>
  <div class="mb-3">
    <label for="email" class="form-label">Adres e-mail</label>
    <input type="email" class="form-control" id="email" placeholder="nazwa@example.com">
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Hasło</label>
    <input type="password" class="form-control" id="password">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="remember">
    <label class="form-check-label" for="remember">Zapamiętaj mnie</label>
  </div>
  <button type="submit" class="btn btn-primary">Zaloguj się</button>
</form>

Klasa .form-control to podstawa – nadaje polom tekstowym odpowiednią wysokość, padding, border-radius i efekt focus. Dla checkboxów i radio buttonów używamy .form-check, a dla selectów .form-select.

Klasy pomocnicze – spacing, display i flex

Bootstrap to nie tylko gotowe komponenty, ale również ogromna biblioteka klas utility, które przyspieszają pracę. Zamiast pisać własne style CSS do marginesów, paddingów czy ukrywania elementów, używasz predefiniowanych klas.

Spacing – marginesy i paddingi

Klasy spacing budowane są według wzoru: {właściwość}{strona}-{rozmiar}. Właściwość to m (margin) lub p (padding). Strona to t (top), b (bottom), s (start/left), e (end/right), x (horizontal) lub y (vertical). Rozmiar to liczba od 0 do 5.

Display i widoczność

Klasy .d-none, .d-block, .d-flex kontrolują właściwość display. Możesz też używać wariantów responsywnych: .d-none .d-md-block ukryje element na małych ekranach, a wyświetli od breakpointu medium wzwyż.

Flexbox utilities

Bootstrap dostarcza klasy do szybkiego ustawiania flexboxa: .d-flex, .justify-content-center, .align-items-center, .flex-column i wiele innych. Dzięki nim centrujesz elementy, rozkładasz je równomiernie czy zmieniasz kierunek osi bez pisania ani jednej linii CSS.

<div class="d-flex justify-content-between align-items-center">
  <span>Element lewy</span>
  <span>Element prawy</span>
</div>

<div class="d-flex justify-content-between align-items-center">
  <span>Element lewy</span>
  <span>Element prawy</span>
</div>

Alerty i komunikaty

Komunikaty informacyjne, ostrzeżenia, błędy – każda aplikacja musi je wyświetlać. Bootstrap oferuje komponent Alert w kilku wariantach kolorystycznych, z możliwością zamknięcia przez użytkownika.

<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Sukces!</strong> Twoje dane zostały zapisane.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Zamknij"></button>
</div>

<div class="alert alert-danger" role="alert">
  Wystąpił błąd podczas przetwarzania żądania.
</div>

<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Sukces!</strong> Twoje dane zostały zapisane.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Zamknij"></button>
</div>

<div class="alert alert-danger" role="alert">
  Wystąpił błąd podczas przetwarzania żądania.
</div>

Warianty .alert-primary, .alert-secondary, .alert-success, .alert-danger, .alert-warning, .alert-info, .alert-light i .alert-dark pokrywają praktycznie każdy scenariusz komunikacji z użytkownikiem.

Accordion – zwijane sekcje treści

Accordion to komponent idealny do FAQ, specyfikacji produktów czy długich formularzy podzielonych na sekcje. Użytkownik widzi nagłówki i rozwija tylko te części, które go interesują. To znacząco poprawia czytelność strony, szczególnie na urządzeniach mobilnych.

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        Pytanie pierwsze
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Odpowiedź na pytanie pierwsze znajduje się tutaj.
      </div>
    </div>
  </div>
  <!-- Kolejne accordion-item -->
</div>

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        Pytanie pierwsze
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Odpowiedź na pytanie pierwsze znajduje się tutaj.
      </div>
    </div>
  </div>
  <!-- Kolejne accordion-item -->
</div>

Atrybut data-bs-parent sprawia, że w danym momencie tylko jedna sekcja może być rozwinięta. Usunięcie tego atrybutu pozwala na otwarcie wielu sekcji jednocześnie.

Kilka słów na zakończenie

Bootstrap to narzędzie, które – jak dobrze naoliwiona maszyna – po prostu działa. Nie rozwiązuje wszystkich problemów front-endu, ale zdecydowanie ułatwia codzienną pracę. Komponenty omówione w tym artykule to absolutna podstawa, którą wykorzystasz w niemal każdym projekcie. Grid system zapewni responsywny layout, modale posłużą do interakcji z użytkownikiem, a klasy utility pozwolą szybko dopracować detale bez pisania dodatkowego CSS-a.

Pamiętaj jednak, że Bootstrap to tylko narzędzie. Jak mawiał Abraham Maslow: „Jeśli jedynym narzędziem, jakie masz, jest młotek, wszystko zaczyna wyglądać jak gwóźdź.” Warto znać framework, ale warto też wiedzieć, kiedy lepiej sięgnąć po inne rozwiązania lub napisać własne style. Kluczem jest umiejętność doboru narzędzi do projektu, a nie odwrotnie.

Mam nadzieję, że ten przewodnik pomoże Ci sprawniej pracować z Bootstrapem. Jeśli masz pytania lub chciałbyś, żebyśmy pomogli Ci wdrożyć projekt oparty na tym frameworku – odezwij się do nas. W Clivio z Bootstrapem jesteśmy za pan brat.