mod geek mod geek - 7 months ago 23
HTML Question

How To Use Bootstrap Nested Column Grid

I have tried to achieve bootstrap nested column div but this is not responsive I want to achieve the fully responsive grid system In BootStrap

this is what i want to achieve in bootstrap grid systemBootStrap Grid System

This is my html markup

<div class="col-md-12 topSpace">
<div class="col-md-3 text-center"></div>
<div class="col-md-6 text-center">

</div>

<div class="col-md-3 text-center">


</div>
</div>

<div class="md-col-6 col-centered"></div>


this is the css markup

.col-centered{
margin:0 auto;
}

.topSpace{
top:100px;
}

Answer

This below html markup should work.

<div class="col-md-12">

  <div class="row">
    <div class="col-md-3">
      1
    </div>    
    <div class="col-md-6">
      2
    </div>    
    <div class="col-md-3">
      3
    </div>
  </div>

  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      4
    </div>
  </div>

</div>

Demo: http://bootply.com/SJ3EYuxOQM