CODEWITHSUNDEEP
htmltwitter-bootstrap-3
Miomir Dancevic
Miomir Dancevic

Reputation: 6852

Proper bootstrap grid?

What is proper way to make bootstrap grid?

Here is example what I have

<div class="row">
  <div class="col-md-12">
    <div class="page-header">
      HELLO
    </div>
  </div>
</div>

Do i need always to make row before col, or i dont need to use col if I am creating new row

Or is it proper to make it like this

1.

<section class="content row">
    <div class="col-md-12">
            <div class="page-header">
              HELLO
            </div>
          </div>

          <div class="col-md-12">
            <div class="what">
              HELLO 2
            </div>
          </div>
    </section>

Or it is proper way to make it like this

2.

<div class="row">
  <div class="col-md-12">
        <div class="page-header">
          HELLO
        </div>
   </div>
</div>

<div class="row">
  <div class="col-md-12">
        <div class="page-header">
          HELLO
        </div>
   </div>
</div>

Or does i need to use COL after row like this?

3.

<div class="row">
        <div class="page-header">
          HELLO
        </div>
</div>

<div class="row">
        <div class="page-header">
          HELLO
        </div>
</div>

Why i must use ROW and when? And why i must use COL and when?

This is just example, if someone can asnwer me what is proper way, then it will be nice?

Upvotes: 1

Views: 663

Answers (2)

jme11
jme11

Reputation: 17372

The grid works with 3 parts: a container, a row and column(s)...

The container has 15px of padding. The row negates the container padding with -15px of margin. Columns have 15px of padding, which pull the content away from the edges of the container and create a consistent 30px gutter.

The purpose for adding 15px of padding that is only negated by the negative row margins seems silly, but it is essential to allow for nesting columns inside of other columns! Note in the diagram below how the nested columns indicated by the red outline fits neatly into the enclosing column without getting additional padding applied.

TBS Grid

So, to answer your question, assuming that you have a .container or .container-fluid wrapper around your examples, both 1 and 2 are properly formatted. That said, I would use example 1, because it requires less markup (generally a good thing) and since you are grouping your elements into a section, it seems they are semantically connected, thus the extra row seems superfluous.

As, @skelly suggests, I recommend taking a look at the Grid section in the doc. Below are some of key points about the use of rows found there:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.

Upvotes: 3

Carol Skelly
Carol Skelly

Reputation: 362390

Start with the examples in the Bootstrap docs: http://getbootstrap.com/css/#grid-example-basic

From the docs..

  • Content should be placed within col-*, and only col may be immediate children of row.
  • Rows must be placed within a .container for proper alignment and padding.
  • It's fine to have columns totaling more than 12 in a single row. As the docs say..

"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line."

Therefore, I would go with something closest to your #1 but make sure it's in a container..

http://www.bootply.com/Cy2i2H0oZB

Upvotes: 2

Related Questions