bootstrap 4 grid

1<!-- Control the column width, and how they should appear on different devices -->
2<div class="row">
3  <div class="col-*-*"></div>
4  <div class="col-*-*"></div>
5</div>
6<div class="row">
7  <div class="col-*-*"></div>
8  <div class="col-*-*"></div>
9  <div class="col-*-*"></div>
10</div>
11
12<!-- Or let Bootstrap automatically handle the layout -->
13<div class="row">
14  <div class="col"></div>
15  <div class="col"></div>
16  <div class="col"></div>
17</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