doubt with the bootstrap grid system

2
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 1</p></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 2</p></div>
        <div class="clearfix visible-sm-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 3</p></div>
        <div class="clearfix visible-md-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 4</p></div>
        <div class="clearfix visible-sm-block"></div>
        <div class="clearfix visible-lg-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 5</p></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 6</p></div>
        <div class="clearfix visible-sm-block"></div>
        <div class="clearfix visible-md-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 7</p></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 8</p></div>
        <div class="clearfix visible-sm-block"></div>
        <div class="clearfix visible-lg-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 9</p></div>
        <div class="clearfix visible-md-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 10</p></div>
        <div class="clearfix visible-sm-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 11</p></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 12</p></div>
    </div>
</div>

Correct not in every row should you have a total of 12 columns?

<div class="container">
    <div class="row">
        <div class="col-sm-6"><p>Box 1</p></div>
        <div class="col-sm-6"><p>Box 2</p></div>
    </div>
    <div class="row">
        <div class="col-sm-6"><p>Box 3</p></div>
        <div class="col-sm-6"><p>Box 4</p></div>
    </div>
</div>

I followed this example: link

    
asked by anonymous 02.09.2015 / 21:09

1 answer

2

The correct thing is that each row has a grid, that the sum of its columns equals 12.

Example:

<div class="container">
    <div class="row">
        <div class="col-md-4">Coluna 1</div>
        <div class="col-md-6">Coluna 2</div>
        <div class="col-md-2">Coluna 3</div>
    </div>
    <div class="row">
        <div class="col-md-6">Coluna 1</div>
        <div class="col-md-6">Coluna 2</div>
    </div>
</div>

For more detailed information, please visit: link

    
03.09.2015 / 14:31