Reputation: 51
I'm trying to nest 2 columns in the second row of a container using the code snippet from the official documentation
When I try the same code, the columns appear as separate rows appearing one after another & not as 2 columns in the same row. What am I doing wrong?
Upvotes: 3
Views: 11525
Reputation: 131
try this one - I think it is suitable for your problem:
<div class="container-fluid">
<div class="col-lg-12">
<div class="row">
<div class="col-sm-6">
<div class="well">
<p>First Part</p>
</div>
</div>
<div class="col-sm-6">
<div class="well">
<p>Second Part</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="well">
<div class="row">
<div class="col-md-6">
<div class="well">
<p>Nested 1</p>
</div>
</div>
<div class="col-md-6">
<div class="well">
<p>Nested 2</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="well">
<p>Nested 3</p>
</div>
</div>
<div class="col-md-6">
<div class="well">
<p>Nested 4</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="well">
<p>Fourth Part[enter image description here][1]</p>
</div>
</div>
</div>
</div>
</div>
Upvotes: 1
Reputation: 10230
You are closing the first column then following it with two new rows when I assume you want the following rows to be nested in the column. The following changes should do what you want, if I am correctly interpreting your needs
<div class="row">
<div class="col‐sm‐12 col-xs-12" style="background-color:red">
Level 1: .col‐sm‐9 <!-- Removed </div> -->
<div class="row">
<div class="col-sm-6 col-xs-8" style="background-color:yellow">
Level 2: .col‐xs‐8 .col‐sm‐6 bs bs bs bs bs bs bs
</div>
<div class="col-sm-6 col-xs-4" style="background-color:grey">
Level 2: .col‐xs‐4 .col‐sm‐6
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-8" style="background-color:yellow">
Level 3a: .col‐xs‐8 .col‐sm‐6 bs bs bs bs bs bs bs bs bs bs bs bs bs bs
</div>
<div class="col-sm-6 col-xs-4" style="background-color:grey">
Level 3b: .col‐xs‐4 .col‐sm‐6
</div>
</div>
</div><!-- Added -->
</div>
Upvotes: 4