Best approach to divide Bootstrap grid columns

Question

I have divided my Bootstrap grid columns following way.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">A</div>
        <div class="col-md-6">
            <div class="col-md-12">B1</div>
            <div class="col-md-12">
                <div class="col-md-8">B1.1</div>
                <div class="col-md-4">B1.2</div>
            </div>
            <div class="col-md-12">
                <div class="col-md-10">B2.1</div>
                <div class="col-md-2">B2.2</div>
            </div>
        </div>
        <div class="col-md-3">C</div>
    </div>
</div>

Please find below of visual layout of this code.

Is my approach of dividing grid columns correct or wrong?

rule of thumb: bootstrap columns should never be nested directly inside a column, you always need to create a row — Matt Wilko, Dec 15 '15 at 11:08
I would recommend studying the [foundations of the Bootstrap grid system](http://getbootstrap.com/css/#grid). — totymedli, Dec 15 '15 at 13:14

score 10 · Accepted Answer · edited Jul 15 '17 at 10:30

Always wrap your column inside a row to avoid any css break when resizing/or something like that

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">A </div>

        <div class="col-md-6">B
            <div class="row">
                <div class="col-md-12">B1</div>
            </div>
            <div class="row">
                <div class="col-md-8">B1.1</div>
                <div class="col-md-4">B1.2</div>
            </div>
            <div class="row">
                <div class="col-md-10">B2.1</div>
                <div class="col-md-2">B2.2</div>
            </div>
        </div>

        <div class="col-md-3">C </div>
    </div>
</div>

The code above seems to be missing the div container tag. Its there though wehn you edit the answer. So the code above is correct. — MarcoZen, Jul 02 '17 at 08:07

score 5 · Answer 2 · answered Dec 15 '15 at 07:11

You should add row divs for children inside B.

<div class="container-fluid">

    <div class="row">
        <div class="col-md-3">
        A
        </div>


        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">B1</div>
            </div>

            <div class="row">
                <div class="col-md-8">B1.1</div>
                <div class="col-md-4">B1.2</div>
            </div>

            <div class="row">
                <div class="col-md-10">B2.1</div>
                <div class="col-md-2">B2.2</div>
            </div>
        </div>

        <div class="col-md-3">
        C
        </div>
    </div>

</div>

deem · Answer 3 · 2015-12-15T07:11:28.103

4

Just add an row div inside B for every line of columns inside: b, b1.1, b1.2 and b2.1, b2.2. This should help.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
        A
        </div>


        <div class="col-md-6">
            <div class='row'>
                  <div class="col-md-12">B1</div>
            </div>
            <div class='row'>
                <div class="col-md-8">B1.1</div>
                <div class="col-md-4">B1.2</div>
            </div>
            <div class='row'>
                <div class="col-md-10">B2.1</div>
                <div class="col-md-2">B2.2</div>
            </div>
        </div>

        <div class="col-md-3">
        C
        </div>
    </div>

</div>

edited Dec 15 '15 at 07:11

answered Dec 15 '15 at 07:09

deem

1,252
1
19
38

B1

B1.1

B1.2

B2.1

B2.2

– CodeMan Dec 15 '15 at 07:11
I placed code for you, I thought my first version of answer was a little too less. You can check it there :) – deem Dec 15 '15 at 07:12

score 2 · Answer 4 · edited May 23 '17 at 12:15

You should always wrap your columns inside the row for better layout without spacing in the columns or clearfix for layout with spacing:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">A</div>
        <div class="col-md-6">
            <div class="clearfix">
               <div class="col-md-12">B1</div>
            </div>
            <div class="clearfix">
               <div class="col-md-12">
                   <div class="clearfix">
                       <div class="col-md-8">B1.1</div>
                       <div class="col-md-4">B1.2</div>
                   </div>
               </div>
            </div>
            <div class="clearfix">
            <div class="col-md-12">
                <div class="clearfix">
                   <div class="col-md-10">B2.1</div>
                   <div class="col-md-2">B2.2</div>
                </div>
            </div>
            </div>
        </div>
        <div class="col-md-3">C</div>
    </div>
</div>

You might be interested to see this Q/A, Remove padding from columns.

Best approach to divide Bootstrap grid columns

4 Answers4