Search code examples
twitter-bootstraptwitter-bootstrap-3bootstrap-4twitter-bootstrap-2

Bootstrap - when use rows


I could do

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

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

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

<div class="row">
<div class="col-md-12"><p>Some Text</p></div>
</div>

...

or

<div class="row">
<h1>Title</h1>
<div class="col-md-6">content</div>
<div class="col-md-6">content</div>
<div class="col-md-12">content</div>
<p>Some Text</p>
</div>

It would both result in the same output. When do I need to use rows? It it just "ugly" or for any reason wrong and not recommended?


Solution

  • You just need the row div around the col-6 columns. The other items (e.g the h1) will all go full width (if they are outside the row div), so no need for the col-md-12 div.

    <h1>Title</h1>
    <div class="row">
      <div class="col-md-6">content</div>
      <div class="col-md-6">content</div>
    </div>
    <div>content</div>
    <p>Some Text</p>