Nested columns in bootstrap

Question

How do i achieve this in bootstrap. Bootstrap 3 nested columns

I was able to create everything except the last col-md-8 using the following code:

    <div class="aaa">
        <div class="col-md-8">
            <div class="col-md-12" style="background:yellow;height:100px;padding:20px;">

            </div>
            <div class="col-md-6" style="background:red;height:200px;padding:20px;">

            </div>
            <div class="col-md-6" style="background:blue;height:100px;padding:20px;">

            </div>
        </div>
        <div class="col-md-4">
            <div class="col-md-12" style="background:orange;height:200px;padding:20px;">

            </div>
        </div>
    </div>

Frederic Le Feurmou · Accepted Answer · 2014-11-28 02:13:16Z

1

I figured out a solution. You have to float one of your blocks.

Here is my solution:

http://jsfiddle.net/8tvvrecw/2/

<div class="row" style="position:relative">
    <div class="col-xs-8" style="background:red; height:100px"></div>
    <div class="col-xs-4" style="position:absolute; right:0; background:purple; height:200px"></div>
</div>


<div class="row">
    <div class="col-xs-4" style="background:black; height:200px"></div>

    <div class="col-xs-8">
        <div class="row">
            <div class="col-xs-6" style="background:blue; height:100px"></div>
        </div>

        <div class="row">
            <div class="col-xs-12" style="background:green; height:100px"></div>
        </div>
    </div>
</div>

edited Nov 28, 2014 at 2:13

answered Nov 27, 2014 at 18:09

Frederic Le Feurmou

1,7761 gold badge18 silver badges22 bronze badges

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

5 Comments

arshad Over a year ago

Saw fiddle.. works great..but when i added it in my code the purple went up(somewhere above the page)..

Matt Lambert Over a year ago

@ArshadMuhammed that's because of the absolute position value on the div.

Frederic Le Feurmou Over a year ago

@ArshadMuhammed I added a relative positionning to the row parent so the absolute positionning should be relative to it. Does it work for you?

arshad Over a year ago

@FredericLeFeurmou : Sorry cannot check right now.. i will check later and comment here whether it is working or not.

arshad Over a year ago

@FredericLeFeurmou : Please see my answer and tell me if anything is wrong.

arshad · Accepted Answer · 2014-11-28 05:08:57Z

1

This is my solution. Please see Frederic Le Feurmou's answer too.
1. Removed nesting
2. Added float:right!important @media (min-width: 992px) to the second div.

<div class="col-md-8" style="background:yellow;height:100px;"></div>
<div class="col-md-4 float" style="background:red;height:200px;"></div>
<div class="col-md-4" style="background:green;height:200px;"></div>
<div class="col-md-4" style="background:blue;height:100px;"></div>
<div class="col-md-8" style="background:purple;height:100px;"></div>

CSS:

@media (min-width: 992px) 
  { 
    .float
    {
      float:right!important;
    } 
  }

Link to bootply: http://www.bootply.com/Pgt6WdBhtt

edited Nov 28, 2014 at 5:08

answered Nov 28, 2014 at 4:46

arshad

8937 silver badges35 bronze badges

Collectives™ on Stack Overflow

Nested columns in bootstrap

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related