Bootstrap (v 5.x) 12-6-4-3-2-1 kolom stramien

(Maak uw browserscherm smaller om de verandering van de kolommen te bekijken)

Schermbreedtes > 0px < 576px (col-)

De totale breedte van de 'container' is hier 100%.
Dat is inclusief de donkergroene padding van 12 px links van kolom 01 en rechts van kolom 12.
Een kolom is hier (100% - 24px) breed met links en rechts een padding van 12px.

Schermbreedtes > 576px < 768px (col-sm)

De totale breedte van de 'container' is hier 540px.
Dat is inclusief de donkergroene padding van 12px links van kolom 01 en rechts van kolom 12.
Een kolom is hier 246px breed met links en rechts een padding van 12px.
2 x (234px + (2 x 12px)) 270px = 516px;

Schermbreedtes > 768px < 992px (col-md)

De totale breedte van de 'container' is hier 720px.
Dat is inclusief de donkergroene padding van 12px links van kolom 01 en rechts van kolom 12.
Een kolom is hier 216px breed met links en rechts een padding van 12px.
3 x (208px + (2 x 12px)) 240px = 696px;

Schermbreedtes > 992px < 1200px (col-lg)

De totale breedte van de 'container' is hier 960px.
Dat is inclusief de donkergroene padding van 12px links van kolom 01 en rechts van kolom 12.
Een kolom is hier 216px breed met links en rechts een padding van 12px.
4 x (210px + (2 x 12px)) 234px = 936px;

Schermbreedtes > 1200px < 1400px (col-xl)

De totale breedte van de 'container' is hier 1140px.
Dat is inclusief de donkergroene padding van 12px links van kolom 01 en rechts van kolom 12.
Een kolom is hier 166px breed met links en rechts een padding van 12px.
6 x (162px + (2 x 12px)=) 190px = 1116px;

Schermbreedtes > 1400 px (col-xxl)

De totale breedte van de 'container' is hier 1320px.
Dat is inclusief de donkergroene padding van 12px links van kolom 01 en rechts van kolom 12.
Een kolom is hier 86 px breed met links en rechts een padding van 12px.
12 x (86px + (2 x 12px)=) 110px = 1320px;

Download Bootstrap stramien voor Bootstrap v5 als:
.PSD (PhotoShop)
.EPS (Illustrator)
.PDF (Illustrator / Acrobat)
.INDD (InDesign)