Podobnie jak w wersji 3, bootstrap 4 wymaga umieszczanie elementów wewnątrz kontenera z klasą .container. Są one szczególnie potrzebne, gdy korzysta się z siatki bootstrapa do tworzenia układu strony.

Mamy do wyboru 2 szerokości kontenera:

• kontener o ustalonej szerokości z klasą .container. Jest to responsywny kontener, którego szerokośc zmienia się w momencie przejścia przez punkty wyznaczone przez media query bootstapa – 576px, 768px, 992px i 1200px
• kontener obejmujący całą szerokość strony o klasie .container-fluid

System siatki (grid)

Siatka składa się z kontenera, w którym znajduje się całość, wierszy (row) i kolumn. Wiersze (row) grupują kolumny horyzontalnie. Kolumny powinny znajdować się w wierszach, natomiast treści umieszcza się w kolumnach. Tylko kolumny mogą być bezpośrednimi dziećmi wierszy.

Kolumny posiadają odstępy w poziomie, aby nie przylegały do siebie i aby treść się nie zlewała. Można usunąć te odstępy umieszczając w wierszu (row) klasę .no-gutter. Klasa ta usunie marginesy otaczające kolumny, ale usunie też padding wewnątrz kolumn.

Bootstrap 4 posiada 5 rodzajów kolumn przeznaczonych dla różnych urządzeń (Bootstrap 3 posiadał tylko 4)

• Extra small <576px – .col-
• Small ≥576px – .col-sm-
• Medium ≥768px – .col-md-
• Large ≥992px – .col-lg-
• Extra large ≥1200px – .col-xl-

Klasa .col odpowiada urządzeniu o najmniejszej szerokości ekranu i co za tym idzie pasuje także do szerszych urządzeń.

Liczba kolumn nie może przekraczać 12, ale może być ich mniej.  Bootstrap 3 wymagał wpisania szerokości kolumny. W bootstrap 4 wystarczy dodać kolumny z klasą .col i ułożą się one równomiernie tak że będą miały taką samą szerokość. Można tym sposobem stworzyć siatkę złożoną z nieparzystej liczby kolumn, co w bootstrapie 3 było niemożliwe.

Jeśli zachodzi potrzeba aby jedna z kolumn była szersza, można nadać jej klasę z konkretną szerokością (np. .col-5), wtedy pozostałe kolumny rozłożą się równomiernie i będą miały taką samą szerokość, bez względu po której stronie się znajdują.

Jeśli chcemy aby kolumna dostosowywała swoją szerokość do zawartości, można użyć klasy col-{breakpoint}-auto

Nowym rozwiązaniem, dostępnym dla wersji 4, jest możliwość przeniesienia kolumn do nowego wiersza w tym samym wierszu. To znaczy, że jeśli kilka kolumn umieszczonych jest w tym samym row, można dodać między nimi kontenera z klasą .w-100

<div class="w-100"></div>

Wtedy kolejne kolumny ułóżą się równomiernie w nowym wierszu.

Generalnie, jeśli nie ma potrzeby ustawiania określonej szerokości poszczególnych kolumn, wystarczy dodać do każdej kolumny klasę .col i kolumny rozłożą się równomiernie.

Wyrównanie w pionie  kolumn

Kolumny w tym samym wierszu można wyrównać w pionie przy użyciu klas dodanych do row. Wówczas wszystkie kolumny wewnątrz row będą wyrównane na tym samym poziomie.

• align-items-start– wyrównanie do góry w pionie
• align-items-center– wyrównanie do środka w pionie
• align-items-end– wyrównanie do dołu w pionie

Można również wyrównać w pionie poszczególne kolumny korzystając z klas umieszczonych wewnątrz col:

    <div class="col align-self-start">    </div>
    <div class="col align-self-center">    </div>
    <div class="col align-self-end">   </div>

Wyrównanie kolumn w poziomie

Uzyskujemy przez dodanie do elementu rodzica czyli .row klasy:

• justify-content-start- wyrównanie do lewej

• justify-content-center- wyrównanie centralnie

• justify-content-end- wyrównanie do prawej

Istnieją jeszcze dwie klasy justify-content-around i justify-content-between, które rozkładają kolumny równomiernie po obu stronach.

Dodanie tych klas do elementu rodzica powoduje wyrównanie w poziomie wszystkich kolumn tego rodzica. Ma to sens jeśli kolumn jest mniej niż 12 i mają oznaczoną szerokość tak że nie wypełniają całego wiersza.

Kolejność kolumn

Bootstrap 3  pozwalał poprzesuwać kolumny  w poziomie przez dodanie klas pull i push. Bootstrap 4 pozwala na ponumerowanie kolumn dzięki klasie .order- z numerem. Klasa ta jest responsywna czyli można ustalic inną kolejność dla różnych urządzeń. To rozwiązanie wydaje się łatwiejsze niż przesuwanie kolumn w lewo lub w prawo.

Offsetting

Offsetting oznacza przesunięcie kolumn w lewo jeśli chcemy aby od lewej została przerwa. W bootstrapie 4 zrezygnowano z tej metody. Została zastąpiona klasą .mr-auto, .ml-auto lub .col-auto.

W dokumentacji w ogóle nie zostało wyjaśnione o co chodzi.

Reasumując, system siatki został znacznie rozbudowany i ułatwiony. De fakto oznaczenia kontenerów, wierszy i kolumn pozostał taki sam. W przypadku migracji strony siatka z bootstrapa 3 będzie funkcjonować poprawnie. Wyjątek stanowią tu offsety i zmian kolejności przy pomocy push i pull. Offest czasami się używa, czyli trzeba będzie go znaleźć i poprawić.

Dodatkowym elementem układu strony są tzw. media object czyli ramka zawierająca miniaturkę i opis ustawione w poziomie.  Tego rodzaju elemet jest wielokrotnie używany na stronach www np. jako komentarze na blogach, zajawki wpisów. Zastosowań jest wiele.

Ramki te powstają przy użyciu dwu klas:

• klasa .media stanowi kontener całej ramki, w której umieszcza się zdjęcie i opis
• klasa .media-body stanowi kontener dla opisu