Sprawdź najnowszą wersję siatki zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.

Twórz własną siatkę z różnymą liczbą kolumn, wyrównaniem oraz innymi ustawieniami za pomocą generatora siatki.

Siatka Bootstrapa składa się z kontenerów (.container), które opisałem w poprzednim wpisie. Rzędów (.row), które służą do grupowania kolumn. No i właśnie samych kolumn (.col-*-*), które umieszczamy wewnątrz rzędów. Jest to najpopularniejszy element całego frameworka, dzięki gridowi możemy łatwo budować cały responywny szkielet strony. Ale od początku.

Kontener jest głównym elementem wewnątrz którego będziemy budowali naszą siatkę, służy nam do wyodrębnienia jakiejś części naszej witryny, przykładowo treści wpisu.
Treść wpisu powinna mieć jakiś tytuł, tworzymy sobie zatem rząd .row. Skoro mamy już tytuł to przydała by się treść, ją umieszczamy w kolejnym rzędzie. Pod treścią chcemy wstawić obok siebie trzy zdjęcia, dla nich przygotujemy kolejny rząd. Nasz kod po tym etapie będzie wyglądał następująco:

<div class="container">
  <div class="row">
    <!-- Tytuł -->
  </div>
  <div class="row">
    <!-- Treść -->
  </div>
  <div class="row">
    <!-- Zdjęcia -->
  </div>
</div>

Mamy zatem przygotowane trzy sekcje, ale siatka wymaga od nas jeszcze kolumn. Bootstrap pozwala na stworzenie do 12 kolumn, gdy stworzymy ich więcej to automatycznie wyświetlą się one poniżej. Kolumna może mieć szerokość 1 (.col-sm-1), wtedy możemy umieścić ich 12 obok siebie. Może mieć szerokość 4 (.col-sm-4) i wtedy, jak się już pewnie domyślacie, w jednym rzędzie będziemy mieli trzy kolumny. Może mieć szerokość 6 (.col-sm-6) i wtedy kolumny będą dwie bo 6*2=12. Może mieć również szerokość 12 (.col-sm-12) co spowoduje, że otrzymamy jedną kolumnę o całej szerokości rzędu. Oczywiście możemy te wartości mieszać tworząc na przykład kolumnę o szerokości 6, trzy kolumny o szerokości 1 oraz jedną kolumnę o szerokości 3 (6+1+1+1+3=12).

Sekcja z tytułem oraz treścią mają zajmować całą szerokość rzędu, skorzystamy więc z klasy .col-sm-12. Natomiast chcemy by nasze zdjęcia były obok siebie, potrzebujemy zatem trzech kolumn o szerokości 4 . Nasz kod będzie wyglądał następująco:

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <!-- Tytuł -->
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <!-- Treść -->
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <!-- Zdjęcie -->
    </div>
    <div class="col-sm-4">
      <!-- Zdjęcie -->
    </div>
    <div class="col-sm-4">
      <!-- Zdjęcie -->
    </div>
  </div>
</div>

Przykład

Tytuł wpisu

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Mam nadzieję, że powyższy przykład pokazał o co chodzi z zastosowaniem siatki. W kolejnym wpisie dowiecie się o rodzajach kolumn oraz przedstawię przykłady ich zastosowania.