Voorbeelden van Bootstrap-raster

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

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 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-6
.col-md-4

Gemengd: mobiel en desktop

Het Bootstrap 3-rastersysteem heeft vier klassen: xs (telefoons), sm (tablets), md (desktops) en lg (grotere desktops). 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-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Gemengd: mobiel, tablet en desktop

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

Kolom wissen

Duidelijke drijvers op specifieke breekpunten om onhandige verpakking met ongelijke inhoud te voorkomen.

.col-xs-6 .col-sm-3
Pas het formaat van je viewport aan of bekijk het op je telefoon voor een voorbeeld.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset-, push- en pull-resets

Reset offsets, duwen en trekken op specifieke breekpunten.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0