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.
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.
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.
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.
Krijg twee kolommen , beginnend bij desktops en schalen naar grote desktops .
Er zijn geen rasterklassen nodig voor elementen over de volledige breedte.
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.
Het Bootstrap v4-rastersysteem heeft vijf klassenklassen: xs (extra klein, dit klasse-tussenvoegsel wordt niet gebruikt), 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 md, lg en xl, u alleen md hoeft op te geven.
Extra klassen toegevoegd in Bootstrap v4.4 staan containers toe die 100% breed zijn tot een bepaald breekpunt.