col 12 bootstrap

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.row{
2    display: flex;
3    flex-wrap: wrap;
4	margin-right: -15px;
5    margin-left: -15px;
6}

1.col-12{
2	flex: 0 0 100%;
3	max-width: 100%;
4}