how to use grid in bootstrap

<!- BOOTSTRAP GRID SYSTEM ------------------------> Extra small .col- <576px Mobile Display Small .col-sm- ≥576px Mobile Display Medium .col-md- ≥768px Tablet Display Large .col-lg- ≥992px Desktop Display Extra large .col-xl- ≥1200px Desktop Display <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>

The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide)

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>

Posted by: Guest on August-10-2020

Code answers related to "how to use grid in bootstrap"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "how to use grid in bootstrap"

Code answers related to "how to use grid in bootstrap"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us