boostrap grid

1<div class="row no-gutters">
2  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
3  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
4</div>

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

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>

1col-12 col-sm-4 col-md-3 col-lg-12	col-xl-12

1<div class="row">
2  <div class="col-9">.col-9</div>
3  <div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
4  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
5</div>

1<div class="row">
2  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
3  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
4
5  <!-- Force next columns to break to new line at md breakpoint and up -->
6  <div class="w-100 d-none d-md-block"></div>
7
8  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
9  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
10</div>