1<!- BOOTSTRAP GRID SYSTEM ------------------------>
2Extra small .col- <576px Mobile Display
3Small .col-sm- ≥576px Mobile Display
4Medium .col-md- ≥768px Tablet Display
5Large .col-lg- ≥992px Desktop Display
6Extra large .col-xl- ≥1200px Desktop Display
7
8 <div class="row">
9 <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:red; border:1px solid black;">
10 One of four columns
11 </div>
12 <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border:1px solid black;">
13 One of four columns
14 </div>
15 <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:green; border:1px solid black;">
16 One of four columns
17 </div>
18 <div class="col-lg-3 col-md-4 col-sm-6" style="border:1px solid black;">
19 One of four columns
20 </div>
21 </div>
22
1The Bootstrap grid system has four classes:
2xs (for phones - screens less than 768px wide)
3sm (for tablets - screens equal to or greater than 768px wide)
4md (for small laptops - screens equal to or greater than 992px wide)
5lg (for laptops and desktops - screens equal to or greater than 1200px wide)
1<div class="container">
2 <div class="row">
3 <div class="col align-self-start">
4 One of three columns
5 </div>
6 <div class="col align-self-center">
7 One of three columns
8 </div>
9 <div class="col align-self-end">
10 One of three columns
11 </div>
12 </div>
13</div>
1<div class="container">
2 <div class="row">
3 <div class="col">
4 1 of 3
5 </div>
6 <div class="col-6">
7 2 of 3 (wider)
8 </div>
9 <div class="col">
10 3 of 3
11 </div>
12 </div>
13 <div class="row">
14 <div class="col">
15 1 of 3
16 </div>
17 <div class="col-5">
18 2 of 3 (wider)
19 </div>
20 <div class="col">
21 3 of 3
22 </div>
23 </div>
24</div>
1
2<!----------------------- BOOTSTRAP GRID SYSTEM ------------------------>
3
4This code will create 4 boxes placed side by side, which will be
5dynamically positioned, according to the size of the screen. We define
6the following behavior:
7
8
9<!-- Desktop Display: we have 4 columns per row (each occupies 3 units out of 12) -->
10
11class = "col-lg-3" <!-- display large with 12/3 = 4 columns -->
12
13
14<!-- Tablet Display: we have 3 columns per row (each occupies 4 units out of 12) -->
15
16class = "col-md-4" <!-- display medium with 12/4 = 3 columns -->
17
18
19<!-- Mobile Display: we have 2 columns per row (each occupies the 6 units of 12) -->
20
21class = "col-sm-6" <!-- display small with 12/6 = 2 columns -->
22
23
24<!-- CODE -->
25
26 <div class="row">
27 <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:red; border:1px solid black;">
28 One of four columns
29 </div>
30 <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border:1px solid black;">
31 One of four columns
32 </div>
33 <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:green; border:1px solid black;">
34 One of four columns
35 </div>
36 <div class="col-lg-3 col-md-4 col-sm-6" style="border:1px solid black;">
37 One of four columns
38 </div>
39 </div>
40
1<div class="container">
2 <div class="row justify-content-start">
3 <div class="col-4">
4 One of two columns
5 </div>
6 <div class="col-4">
7 One of two columns
8 </div>
9 </div>
10 <div class="row justify-content-center">
11 <div class="col-4">
12 One of two columns
13 </div>
14 <div class="col-4">
15 One of two columns
16 </div>
17 </div>
18 <div class="row justify-content-end">
19 <div class="col-4">
20 One of two columns
21 </div>
22 <div class="col-4">
23 One of two columns
24 </div>
25 </div>
26 <div class="row justify-content-around">
27 <div class="col-4">
28 One of two columns
29 </div>
30 <div class="col-4">
31 One of two columns
32 </div>
33 </div>
34 <div class="row justify-content-between">
35 <div class="col-4">
36 One of two columns
37 </div>
38 <div class="col-4">
39 One of two columns
40 </div>
41 </div>
42</div>