How To Use Bootstrap Nested Column Grid

Question

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 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;
}

Carol Skelly · Accepted Answer · 2016-04-18 10:30:34Z

6

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

edited Apr 18, 2016 at 10:30

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

answered Apr 18, 2016 at 10:21

Anoop John

4643 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Can Guney Aksakalli · Accepted Answer · 2016-04-18 10:28:21Z

2

Another alternative to @John's answer is

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

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

    <div class="row">       
      <div class="col-md-12">
        2
      </div>
      <div class="col-md-12">
        4
      </div>
    </div>

  </div>  
  <div class="col-md-3">
    3
  </div>

</div>

It differs how the items are listed for smaller screen width:

For my answer: 1,2,4,3
For @john's answer: 1,2,3,4

answered Apr 18, 2016 at 10:28

Can Guney Aksakalli

1,3301 gold badge11 silver badges24 bronze badges

Comments

Prabhat-VS · Accepted Answer · 2016-04-18 10:26:49Z

1

This one also work try It,

<form class="form-horizontal" role="form">
    <div class="form-group">
        <div class="col-md-3">
            DIV1
        </div>
        <div class="col-md-6">
            DIV2
        </div>
        <div class="col-md-3">
            DIV3
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-6 col-md-offset-3">
            DIV4
        </div>
    </div>
</form>

answered Apr 18, 2016 at 10:26

Prabhat-VS

1,5301 gold badge21 silver badges32 bronze badges

Collectives™ on Stack Overflow

How To Use Bootstrap Nested Column Grid

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related