CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
arshad
arshad

Reputation: 883

Nested columns in bootstrap

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>

Upvotes: 1

Views: 561

Answers (2)

arshad
arshad

Reputation: 883

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

Upvotes: 1

Frederic Le Feurmou
Frederic Le Feurmou

Reputation: 1786

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>

Upvotes: 1

Related Questions