Good practices with bootstrap grid system

Asked

Viewed 1,020 times

1

It would be good practice to declare grids within grids using twitter bootstrap and this can affect code responsiveness?

Example:

<div class="container">
<div class="row clearfix">
    <div class="col-md-12 column">  <!-- 12 colunas -->
        <div class="row clearfix">
            <div class="col-md-6 column"> <!-- divide aqui -->
                <div class="row clearfix">
                    <div class="col-md-4 column"> <!-- divide denovo 6 -->
                    </div>
                    <div class="col-md-4 column">
                    </div>
                    <div class="col-md-4 column">
                    </div>
                </div>
            </div>
            <div class="col-md-6 column">
            </div>
        </div>
    </div>
</div>

html css twitter-bootstrap semantics
  • 1

    Problem does not have any, but of course if a column is already narrow, add 12 more inside it will not get visually interesting (on desktop).

  • There is no problem then, divide one of 6 into two of 3 (for example)?

  • 1

    No. The grid system has the size relative to the parent element. That is, it automatically fits. Also, when used in the mobile version, the columns behave like rows in the same way. So briefly, you can use without fear.

3 answers

3


I believe it is a good practice yes, I always applied grid, within grid, even before I knew the bootstrap. I used the http://960.gs as a reference.

And grid within the grid does not affect responsiveness, that is, the layout remains responsive.

  • Do you usually insert 12 columns inside each column? ?

  • 1

    @Marceloaymone Depends on the layout. But I usually use up to 12 columns. But I usually like to use 3 or 4 columns of 300px or 220px. I really like using this page as a reference. http://960.gs/demo.html

2

It is normal to use grid within grid, this is how the system works. Example:

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

but html gets bad, polluted and barely readable.

That’s another question, when I use Bootstrap, I can’t pass the Grid System that way in my opinion it gets extremely ugly. What is the solution in these cases? Use a CSS pre-compiler!

style.scss

#principal{
 @extend .col-md-12;
}

.menu{
 @extend .col-md-6;
}

html

<div id="principal">
   <div class="menu"></div> <div class="menu"></div>
</div>

Imagine without using compiler as it would look if I had a difference in css

I do not recommend:

<style>
#principal{
 background-color: black;
}

.menu{
 background-color: blue;
}
</style>
<div class="col-md-12" id="principal">
   <div class="col-md-6 menu"></div> <div class="col-md-6 menu"></div>
</div>

In this case I just applied a color rule, but as our project grows it would be horrible to maintain a Bootstrap project without using any pre-compiler. In the example I used the syntax of Sass, however, it goes of the taste of each one :)

1

Grids within Grids can even maintain responsiveness and not compromise layout, but the html gets bad, polluted and barely readable. When finishing an html I always try to cut/remove unnecessary and decorative "Divs", transferring "Ids" and classes when necessary.

Browser other questions tagged html css twitter-bootstrap semantics

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