Kontener

container

Klasa ustawia maksymalną szerokość treści w danym breakpoincie. Zawartość jest wyśrodkowana względem strony.

width: var(--container-width);
max-width: 100vw;
margin-left: 1rem;
margin-right: 1rem;

max-width: var(--container-width);
width: 100%;
margin-left: auto;
margin-right: auto;

System ustawia również dodatkowe ustawienia dla kontenera, który znajduje się w kontenerze (na dowolnym poziomie zagnieżdżenia)

.container .container {
    width: 100%;
    margin-left:0;
    margin-right:0;
}

Kontener nie rośnie płynnie wraz z zwiększaniem szerokości od breakpointa sm. Przyjmuje określoną szerokość i trzyma ją do momentu rozszerzenia ekranu powyżej kolejnego breakpoint'a. Dzięki temu przwidywalne są szerokości jakie może przyjąć treść strony, a co za tym idzie można przygotować grafiki lub inne materiały pod określone punkty responsywności.

<div class="container py-4">
    <div class="w-full">...</div>
</div>

Prefix breakpoint dla kontenera

Możliwe jest poprzedzenie klasy container prefixem breakpointa. W takim wypadku ustawienia kontenera zostaną zastosowane od wskazanego breakpointa.

<div class="w-full md:container py-4">
    <div class="w-full">...</div>
</div>

Zmienna CSS z szerokością kontenera

Ustawienie kontenera na stronie automatycznie dodaje zmienną --container-width do :root. Zmienna jest ustawiana automatycznie zgodnie z aktualnym breakpointem.