Kontenery / Containers

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

Kontener jest podstawowym elementem siatki Bootstrapa i jest on wymagany gdy chcemy zbudować sobie responsywny layout bo bez niego siatka zwyczajnie nie będzie się prawidłowo skalować. Używamy go do rozdzielania a właściwie tworzenia sekcji naszej strony, przykładowo jednym kontenerem jest nasz header, jednym jest treść wpisu, kolejnym sekcja z komentarzami i na koniec jeszcze jeden na stopkę. Oczywiście możemy zamknąć całą stronę w jednym kontenerze ale lepiej jest stworzyć ich kilka, każdemu nadać identyfikator czy klasę i w ten sposób ładnie uporządkować nasz dokument. Kontenery można również zagnieżdżać, ale lepiej zaplanować swój layout tak by tego nie robić. Starajcie się budować stronę tak by jej struktura była jak najmniej skomplikowana, ułatwi to nam, czy innym osobom, które będą nad nią pracować późniejsze modyfikacje.

Do dyspozycji mamy dwa rodzaje kontenerów. Pierwszy z nich ma maksymalną szerokość 1140px i z niego będziecie najczęściej korzystać bo przykładowo teksty lepiej wyglądają i łatwiej się je czyta gdy nie są rozciągnięte na całą szerokość ekranu. Aby stworzyć taki kontener korzystamy z poniższego kodu:

<div class="container">
  <!-- Zawartość kontenera -->
</div>

Czyli zwyczajnie nadajemy divowi (lub wybranemu elementowi HTML5 jak np. main czy section) klasę .container

Drugi z nich rozciągnie się nam na całą szerokość ekranu czyli jego szerokość wynosi 100%. Wiele nowoczesnych stron korzysta z takiego rozwiązania, więc pewnie i Wy z niego skorzystacie chociażby do zrobienia headera czy slidera na całą szerokość ekranu. Kod potrzebny do stworzenia takiego kontenera wygląda następująco:

<div class="container-fluid">
  <!-- Zawartość kontenera -->
</div>

Jak widzicie, jedyną różnicą jest zastosowanie klasy .container-fluid