doubt with the bootstrap grid system

Question

doubt with the bootstrap grid system

Asked 8 years, 10 months ago

Viewed 213 times

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 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>

follow this example: http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=grid-layout-for-all-devices

1

My dear, you have already answered the question, what would be your doubt ?

– Renan Rodrigues

2015/09/02 at 20:02
the first example is correct?

– Denali

2015/09/02 at 20:44
No, because you divide the line into 12 space, there is a site that you lower the grids to draw on top so things get clearer. http://960.gs/ so you can download, if you have doubts just call.

– Renan Rodrigues

2015/09/03 at 11:11

1 answer

Browser other questions tagged twitter-bootstrap

You are not signed in. Login or sign up in order to post.

by Nikofoxxx • **411** points · Answer 1 · 2015-09-03T12:31:20+00:00

The correct is that each Row has a grid, that the sum of its columns is equal to 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: http://getbootstrap.com/examples/grid/