Voorbeelden van Bootstrap-raster

Basisrasterlay-outs om u vertrouwd te maken met bouwen binnen het Bootstrap-rastersysteem.

In deze voorbeelden .themed-grid-colwordt de klasse toegevoegd aan de kolommen om wat thema's toe te voegen. Dit is geen klasse die standaard beschikbaar is in Bootstrap.

Vijf rasterlagen

Het Bootstrap-rastersysteem heeft vijf niveaus, één voor elke reeks apparaten die we ondersteunen. Elke laag begint met een minimale viewport-grootte en is automatisch van toepassing op de grotere apparaten, tenzij deze wordt overschreven.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Drie gelijke kolommen

Krijg drie kolommen van gelijke breedte, beginnend bij desktops en schalen naar grote desktops . Op mobiele apparaten, tablets en lager worden de kolommen automatisch gestapeld.

.col-md-4

Drie gelijke kolommen alternatief

Door de .row-cols-*klassen te gebruiken, kunt u eenvoudig een raster maken met gelijke kolommen.

.colkind van .row-cols-md-3

Drie ongelijke kolommen

Krijg drie kolommen , beginnend bij desktops en schalen naar grote desktops van verschillende breedtes. Onthoud dat rasterkolommen optellen tot twaalf voor een enkel horizontaal blok. Meer dan dat, en kolommen beginnen te stapelen, ongeacht de viewport.

.col-md-3

.col-md-6

.col-md-3

Twee kolommen

Krijg twee kolommen , beginnend bij desktops en schalen naar grote desktops .

.col-md-8

.col-md-4

Volledige breedte, enkele kolom

Er zijn geen rasterklassen nodig voor elementen over de volledige breedte.

Twee kolommen met twee geneste kolommen

Volgens de documentatie is nesten eenvoudig: plaats gewoon een rij kolommen in een bestaande kolom. Dit geeft je twee kolommen , beginnend bij desktops en schalend naar grote desktops , met nog eens twee (gelijke breedtes) binnen de grotere kolom.

Op mobiele apparaten, tablets en lager, worden deze kolommen en hun geneste kolommen gestapeld.

.col-md-8

.col-md-6

.col-md-4

Gemengd: mobiel en desktop

Het Bootstrap v5-rastersysteem heeft zes klassenklassen: xs (extra klein, dit klasse-invoegsel wordt niet gebruikt), sm (klein), md (gemiddeld), lg (groot), xl (x-groot) en xxl (xx -groot). U kunt bijna elke combinatie van deze klassen gebruiken om meer dynamische en flexibele lay-outs te maken.

Elk niveau van klassen wordt opgeschaald, wat betekent dat als u van plan bent dezelfde breedtes in te stellen voor md, lg, xl en xxl, u alleen md hoeft op te geven.

.col-md-8

.col-6 .col-md-4

.col-6

Gemengd: mobiel, tablet en desktop

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

dakgoten

Bij .gx-*klassen kunnen de horizontale goten worden aangepast.

.colmet .gx-4goten

Gebruik de .gy-*klassen om de verticale goten te besturen.

.colmet .gy-4goten

Bij .g-*klassen kunnen de goten in beide richtingen worden aangepast.

.colmet .g-3goten

containers

Extra klassen toegevoegd in Bootstrap v4.4 staan containers toe die 100% breed zijn tot een bepaald breekpunt. v5 voegt een nieuw xxlbreekpunt toe.

.container

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-vloeistof