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-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-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
.col-md-4
.col-md-4

Drie ongelijke kolommen

Krijg drie kolommen , beginnend bij desktops en schalen naar grote desktops van verschillende breedtes. Onthoud dat rasterkolommen maximaal twaalf moeten zijn 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-6
.col-md-4

Gemengd: mobiel en desktop

Het Bootstrap v4-rastersysteem heeft vijf klassen: xs (extra klein), sm (klein), md (gemiddeld), lg (groot) en xl (extra 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 xs en sm, u alleen xs hoeft op te geven.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Gemengd: mobiel, tablet en desktop

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4