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 two different columns...