bootstrap col screen sizes code example

Example 1: breakpoint bootstrap

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Example 2: bootstrap screen sizes

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)

Example 3: 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>