BootStrap Grid layout - Base 12 System

<div class='row'>
    <div class='col' style='background-color:red; border: 1px solid;'>
        col
    </div>
    
    <div class='col' style='background-color:red; border: 1px solid;'>
       col
    </div>
</div>

<div class='row'>
    <div class='col-6' style='background-color:green; border: 1px solid;'>
        col-6
    </div>
    <div class='col-3' style='background-color:green; border: 1px solid;'>
        col-4
    </div>
    <div class='col-2' style='background-color:green; border: 1px solid;'>
        col-2
    </div>
    <div class='col-1' style='background-color:green; border: 1px solid;'>
        col-1
    </div>
</div>

<div class='row'>
    <div class='col-6' style='background-color:blue; border: 1px solid;'>
        col-6
    </div>
    <div class='col-6' style='background-color:blue; border: 1px solid;'>
        col-6
    </div>
</div>

<div class='row'>
    <div class='col-md-6' style='background-color:yellow; border: 1px solid;'>
        col-md-6
    </div>
    <div class='col-md-6' style='background-color:yellow; border: 1px solid;'>
        col-md-6
    </div>
    
</div>


<div class='row'>

    <div class='col-lg-3 col-md-4 col-sm-6' style='background-color:pink; border: 1px solid;'>
        col-lg-3 col-md-4 col-sm-6
    </div>

    <div class='col-lg-3 col-md-4 col-sm-6' style='background-color:pink; border: 1px solid;'>
        col-lg-3 col-md-4 col-sm-6
    </div>

    <div class='col-lg-3 col-md-4 col-sm-6' style='background-color:pink; border: 1px solid;'>
        col-lg-3 col-md-4 col-sm-6
    </div>

    <div class='col-lg-3 col-md-4 col-sm-6' style='background-color:pink; border: 1px solid;'>
        col-lg-3 col-md-4 col-sm-6
    </div>

</div>

<div class='row'>
    
 <div class='col-lg-2 col-md-3 col-sm-12' style='background-color:blue; border: 1px solid;'>
        col-lg-3 col-md-4 col-sm-6
 </div>
 <div class='col-lg-2 col-md-3 col-sm-12' style='background-color:blue; border: 1px solid;'>
        col-lg-3 col-md-4 col-sm-6
 </div>
  <div class='col-lg-2 col-md-3 col-sm-12' style='background-color:blue; border: 1px solid;'>
        col-lg-3 col-md-4 col-sm-6
 </div>
  <div class='col-lg-2 col-md-3 col-sm-12' style='background-color:blue; border: 1px solid;'>
        col-lg-3 col-md-4 col-sm-6
 </div>
  <div class='col-lg-2 col-md-3 col-sm-12' style='background-color:blue; border: 1px solid;'>
        col-lg-3 col-md-4 col-sm-6
 </div>
  <div class='col-lg-2 col-md-3 col-sm-12' style='background-color:blue; border: 1px solid;'>
        col-lg-3 col-md-4 col-sm-6
 </div>
</div>