Combining Bootstrap col and row classes on single element

Question

one:

 <div class="row">
   <div class="col-md-12">
      <div class="row">
       . 
       .
      </div>
    </div>
 </div>

two:

 <div class="row">
   <div class="col-md-12 row">
   .
   .
  </div>
 </div>

Is both the implementations are same?can i use the 2 method so that i can reduced the mark-up.

Answer 1

According to Bootstrap's own API documentation , when nesting columns any columns .col should be nested within a .row . The two should not be combined on a single element.

Aside from the fact this makes more sense semantically- the underlying CSS properties both classes affect are reliant on this structure.

Also note, when using col-md-12 in isolation, you are effectively creating a full width element (which a row is anyway). In which case using the grid layout may not be relevant unless you have other elements showing/coming into play at different screen sizes.

Right (if using other columns as well as col-md-12 ):

 <div class="row">
   <div class="col-md-12">
      <div class="row">
       . 
       .
      </div>
    </div>
 </div>

Wrong:

 <div class="row">
   <div class="col-md-12 row">
   .
   .
  </div>
 </div>

If you just want a full width element, you dont need to use the grid layout and/or can remove one level of nesting.

Answer 2

1.If you need multiple .col- in a row then you may write as following..

<div class="row">
    <div class="col-md-6">
        .
        .
        .
    </div>
    <div class="col-md-6">
        .
        .
        .
    </div>
</div>

2. if you need to divide  `.col-` in more `.col` then

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-6">
                .
                .
                .
            </div>
            <div class="col-md-6">
                .
                .
                .
            </div>
        </div>
    </div>
    <div class="col-md-6">
     .
     .
    </div>
</div>