pee2pee pee2pee - 1 month ago 6
CSS Question

Bootstrap - do we have to use rows and columns?

Let me explain with 2 examples:

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


vs

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


The examples are overly simplified but my question is that does everything have to be within a column or where needed, can they sit outside? Another example:

<div class="row">
<div class="col-md-6 col-sm-6">
<img src="img/Police2-600x250.jpg" class="full-width">
<div class="col-md-12 news">
<p class="date">POSTED <strong>01 APRIL</strong></p>
<h3>Heading</h3>
<p>This is a summary of what the story is about like a subheading to catch your attention. Blah blah blah b l a h blah blah.</p>
</div>
</div>
<div class="col-md-6 col-sm-6">
<img src="img/Police2-600x250.jpg" class="full-width">
<div class="col-md-12 news">
<p class="date">POSTED <strong>01 APRIL</strong></p>
<h3>Heading</h3>
<p>This is a summary of what the story is about like a subheading to catch your attention. Blah blah blah b l a h blah blah.</p>
</div>
</div>
</div>


I don't want the images to be subject to any padding but I do want the content below it to

Answer

They can sit outside of a column, but in doing this you're sacrificing padding. Bootstrap's .row style sets margin-left and margin-right to -15px; the .col-... classes make up for this with 15px padding on either side.

To make up for it, you'd have to manually add this 15px padding to your non-.col-... elements.

That said, however, there's no reason your h1 can't be a .col-... itself:

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