12

When using bootstrap's grid, what is the best way to markup a single full-width column in a row?

Do you have to use container and row to hold the column (.container > .row > .col-xs-12 > .actual-content), or can you get rid of the row and column altogether and simply use a wrapping container (.container > .actual-content)?

Let's say

<div class="container">
  <div class="row">
    <!-- multiple columns -->
  </div>

  <div class="row">
    <div class="col-xs-12">
      <p>Actual content goes here. It will span the entire width.</p>
    </div>
  </div>

  <div class="row">
    <!-- multiple columns -->
  </div>
</div>

vs

<div class="container">
  <div class="row">
    <!-- multiple columns -->
  </div>

  <p>Actual content goes here. It will span the full width.</p>

  <div class="row">
    <!-- multiple columns -->
  </div>
</div>

Is one approach considered superior over the other? Since the column spans the entire width for all media sizes, I don't need any responsive features. Rendered output should be the same, but maybe there are subtle differences which I'm not aware of. Using container, row, and column seems like overkill …

knittl
  • 246,190
  • 53
  • 318
  • 364

1 Answers1

10

The one without the row/grid according to Bootstrap's own documentation. It is the correct way -- don't wrap it with more classes, that's more markup for NO reason.

I posted about this a couple days ago: col-*-12 (col-xs / col-sm / etc) use in Bootstrap 3

Documentation:

enter image description here

No grid classes are necessary for full-width elements.

This is the correct way:

<div class="container">
  <div class="row">
    <!-- multiple columns -->
  </div><!-- closing .row -->

  <p>Actual content goes here. It will span the full width.</p>

  <div class="row">
    <!-- multiple columns -->
  </div><!-- closing .row -->
</div><!-- closing .container -->
Community
  • 1
  • 1
Christina
  • 34,296
  • 17
  • 83
  • 119
  • Thanks! I must have overlooked that in the docs. (And I still can't find it on http://getbootstrap.com/css – do you have a direct link by any chance?) – knittl Oct 04 '14 at 18:00
  • A difference that I can see when using no column class is that the `

    ` element will not really span the full width but have a gutter on the left and right (easily visible if you apply a background color to it). If you don't use a background color, you won't see any difference though and the text will line up properly.

     – knittl Oct 05 '14 at 11:13
  • 1
    Yes, that's because all col-X-X have left and right padding to make the gutter and the row has negative left and right margin to zero that out and the .container has padding on the left and right that equals the same padding on the column classes so that horizontal scroll bars don't show up. If you don't use backrounds then it's best to leave off the grid for stuff that's 100% – Christina Oct 05 '14 at 14:39