twitter-bootstrap

twitter-bootstrapGrid Nesting

Introduction

In Bootstrap it's possible to use grid columns inside other columns. This is helpful when creating advanced responsive layouts that utilize multiple grid tiers.

Remarks

We can have as many number of columns as possible in the above mentioned way.

Nesting columns

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

The example is taken from [http://getbootstrap.com/css/#grid-nesting][1]

as the documentation of official website suggests

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

enter image description here



Previous Next
Related Tags
This modified text is an extract of the original Stack Overflow Documentation created by following contributors and released under CC BY-SA 3.0
This website is not affiliated with Stack Overflow