O'Reilly logo

Bootstrap for Rails by Syed Fazle Rahman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Nesting columns

In Bootstrap, it is possible to define columns within columns. To do so, you need to declare a new row within a column markup and then proceed to create columns within it. Let's modify the previous code to test nested columns:

<div class="container" style="background: cyan">
  <div class="row">
    <div class="col-xs-12 col-sm-6" style="background: green">
      <h1>Hello</h1>
      <div class="row">
        <div class="col-xs-6" style="background: orange">
          <h2>PACKT</h2>
        </div>
        <div class="col-xs-6" style="background: grey">
          <h2>PUBLISHING</h2>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6" style="background: red">
      <h1>World</h1>
    </div>
  </div>
</div>

Let's take a look at the output:

In the preceding screenshot, you can clearly see that we have created ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required