Bootstrap (v 5.x) 12 kolommen 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 gifgroene padding van 12 px links van kolom 01 en rechts van kolom 12.
Een kolom is hier 8.33% breed met links en rechts een padding van 12 px.

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

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

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

De totale breedte van de 'container' is hier 720 px.
Dat is inclusief de gifgroene padding van 12 px links van kolom 01 en rechts van kolom 12.
Een kolom is hier 36 px breed met links en rechts een padding van 12 px.
12 x (36px + (2 x 12px)) 60px = 720px;

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

De totale breedte van de 'container' is hier 960 px.
Dat is inclusief de gifgroene padding van 12 px links van kolom 01 en rechts van kolom 12.
Een kolom is hier 55.984 px breed met links en rechts een padding van 12 px.
12 x (55.984px + (2 x 12px)) 95px = 960px;

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

De totale breedte van de 'container' is hier 1140 px.
Dat is inclusief de gifgroene padding van 12 px links van kolom 01 en rechts van kolom 12.
Een kolom is hier 71 px breed met links en rechts een padding van 12 px.
12 x (71px + (2 x 12px)) 95px = 1140px;

Schermbreedtes > 1400 px (col-xxl)

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

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