html - Proper bootstrap grid? -

what proper way make bootstrap grid?

here example have

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

do need make row before col, or dont need use col if creating new row

or proper make 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 proper way make 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 need use col after row this?

3.

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

why must use row , when? , why must use col , when?

this example, if can asnwer me proper way, nice?

the grid works 3 parts: container, row , column(s)...

the container has 15px of padding. row negates container padding -15px of margin. columns have 15px of padding, pull content away edges of container , create consistent 30px gutter.

the purpose adding 15px of padding negated negative row margins seems silly, essential allow nesting columns inside of other columns! note in diagram below how nested columns indicated red outline fits neatly enclosing column without getting additional padding applied.

so, answer question, assuming have .container or .container-fluid wrapper around examples, both 1 , 2 formatted. said, use example 1, because requires less markup (generally thing) , since grouping elements section, seems semantically connected, row seems superfluous.

as, @skelly suggests, recommend taking @ grid section in doc. below of key points use of rows found there:

• rows must placed within .container (fixed-width) or .container-fluid (full-width) proper alignment , padding.
• use rows create horizontal groups of columns.
• content should placed within columns, , columns may immediate children of rows.