CODEWITHSUNDEEP
csstwitter-bootstrap
pee2pee
pee2pee

Reputation: 3802

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

Upvotes: 2

Views: 1126

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362780

If you want to use Bootstrap's grid, yes, the columns must be the direct children of the row, and content should be placed in columns. From the Bootstrap docs...

http://getbootstrap.com/css/#grid-intro

Content should be placed within columns, and only columns may be immediate children of rows.

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128836

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>

Upvotes: 4

Related Questions