Bootstrap nested columns

Question

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?

Answer 1

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>