CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user5619184
user5619184

Reputation: 33

Bootstrap grid system side by side

I want to create a right container that is full in width. And the left container to be two containers.

So left containers x would be two containers, top and bottom. Y would take up whole space on the right hand side. How should I go about doing this?

X   Y
X   takes up all the space

The below is the one which has two big containers side by side that takes up whole width. 

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

Upvotes: 0

Views: 437

Answers (2)

Ash
Ash

Reputation: 11472

I think this is what you are trying to achieve.

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3">X<br>X</div>
    <div class="col-xs-9">
      <div class="row">
        <div class="col-xs-12">Y</div>
        <div class="col-xs-12">Takes up the full width</div>
      </div>
    </div>
  </div>
</div>

You were pretty close but needed to nest the extra columns. Check out the docs for Nesting columns

If you have customised the Bootstrap class names then you will need to update to your own.

Upvotes: 0

ReduxedProfessor
ReduxedProfessor

Reputation: 38

So, the easiest way I have found to do this is to go a level deeper, in your rows and columns. Here's an example:

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                 X1 here
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                 X2 here
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                 Y here
            </div>
        </div>
    </div>
</div>

Here's a bootply of it: http://www.bootply.com/q9SCaxVAKB

This should give you the desired setup.

Upvotes: 1

Related Questions