Bootstrap Grid Generator
Selecteer het gewenste aantal rijen, kolommen en container type.
Maak je browser scherm zo smal mogelijk (mobile first). De huidige breedte en bootstrap breakpoint van je scherm worden boven in het scherm weergeven.
Klik op een kolom en pas de breedte bij het veld "Kolom afmetingen: xs" aan.
Herhaal deze stap voor de overige kolommen.
De volgorde van de kolommen kun je eventueel op dezelfde manier aanpassen via het veld "Kolom volgorde: xs".
Maak je browser scherm breder tot het volgende gewenste breakpoint, bv. "sm" of "md", en pas de breedtes en/of volgorden van de kolommen aan.
Kopieer en plak tot slot de html uit het veld "HTML code" in je website of applicatie.
Aantal rijen:
1
2
3
4
5
6
7
8
9
10
Aantal kolommen:
1
2
3
4
5
6
7
8
9
10
11
12
Container type:
normal
fluid
Selecteer rij:
1
2
3
4
5
6
7
8
9
10
Selecteer kolom:
1
2
3
4
5
6
7
8
9
10
11
12
Kolom afmetingen:
xs
(< 576px)
sm
(< 768px)
md
(< 992px)
lg
(< 1200px)
xl
(> 1200px)
auto
1
2
3
4
5
6
7
8
9
10
11
12
auto
1
2
3
4
5
6
7
8
9
10
11
12
auto
1
1
2
3
4
5
6
7
8
9
10
11
12
auto
1
2
3
4
5
6
7
8
9
10
11
12
auto
1
2
3
4
5
6
7
8
9
10
11
12
Kolom volgorde:
xs
(< 576px)
sm
(< 768px)
md
(< 992px)
lg
(< 1200px)
xl
(> 1200px)
auto
1
2
3
4
5
6
7
8
9
10
11
12
auto
1
2
3
4
5
6
7
8
9
10
11
12
auto
1
2
3
4
5
6
7
8
9
10
11
12
auto
1
2
3
4
5
6
7
8
9
10
11
12
auto
1
2
3
4
5
6
7
8
9
10
11
12
HTML code:
Deze website maakt gebruik van cookies voor Google Analytics. Door de website te gebruiken ga je hiermee akkoord.
verberg melding