Combining Bootstrap col and row classes on one 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> 

Are both implementations the same? Can I use method 2 so that I can reduce the margin.

Answer 1

According to the Bootstrap API documentation , when nested columns any .col columns should be nested in .row . These two should not be combined into one element.

Besides the fact that this is more important in terms of semantics, the basic CSS properties that affect both classes depend on this structure.

Also note that when using col-md-12 individually, you actually create a full-width element (in any case, this is a string). In this case, using a grid layout may not be relevant if you do not have other elements that display / enter the game at different screen sizes.

Right (if other columns are used, 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 only need a full-width element, you do not need to use a grid layout and / or remove one level of nesting.

Answer 2

1. If you need several .col- per line, you can write the 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>