Example 1: col-md bootstrap 4
<div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
Example 2: bootstrap 3 offset
col-sm-offset-2
Example 3: .col-6 bootstrap
.col-6{ flex: 0 0 50%; max-width: 50%; }
Example 4: col-md-6 bootstrap
<div class="col-lg-2 col-md-4 col-sm-3 "> Your Stuffs </div>
Example 5: .col-12 bootstrap
.col-12{ flex: 0 0 100%; max-width: 100%; }
Example 6: bootstrap grid
<!----------------------- BOOTSTRAP GRID SYSTEM ------------------------> This code will create 4 boxes placed side by side, which will be dynamically positioned, according to the size of the screen. We define the following behavior: <!-- Desktop Display: we have 4 columns per row (each occupies 3 units out of 12) --> class = "col-lg-3" <!-- display large with 12/3 = 4 columns --> <!-- Tablet Display: we have 3 columns per row (each occupies 4 units out of 12) --> class = "col-md-4" <!-- display medium with 12/4 = 3 columns --> <!-- Mobile Display: we have 2 columns per row (each occupies the 6 units of 12) --> class = "col-sm-6" <!-- display small with 12/6 = 2 columns --> <!-- CODE --> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:red; border:1px solid black;"> One of four columns </div> <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border:1px solid black;"> One of four columns </div> <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:green; border:1px solid black;"> One of four columns </div> <div class="col-lg-3 col-md-4 col-sm-6" style="border:1px solid black;"> One of four columns </div> </div>
Comments
Post a Comment