15

I see something like the following in code examples on StackOverflow and in themes for sale even (never in Bootstrap's examples).

<div class="container">
  <div class="row">
    <div class="col-xs-12">
       <p>Words go here</p>
     </div>
    </div>
  </div>

OR

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
       <p>Words go here</p>
     </div>
    </div>
  </div>

It drives me nuts because both are incorrect for full width single columns as per Bootstrap's own documentation and common sense.

enter image description here

When do you actually use the grid system? When does col-*-12 come into play?

Christina
  • 34,296
  • 17
  • 83
  • 119

2 Answers2

27

Your frustration is right.. <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> is totally redundant.

Because Bootstrap 3+ is mobile first, any col-classes you declare travel up, meaning they apply to the declared device (xs, sm, md, lg) and larger. So, col-xs-12 col-sm-12 is redundant. Just use col-xs-12 for the same effect.

Also, if you don't declare an xs class, the layout will default to col-*-12 once below the smalles col-class you do declare. e.g. <div class="col-sm-6"> is half-width on sm and up, but full-width on xs. Whereas <div class="col-md-6"> is half width on md and up, but full width on sm and xs.

This being said, you should always declare at least one col-class, so it gets the relevant padding and other styling specifics.

Shawn Taylor
  • 15,590
  • 4
  • 32
  • 39
  • 2
    But it does already. If you don't declare but you are inside a .container or .container-fluid the padding will be there as the way it works is by adding the same padding on the L and R as the negative margin on the row so you don't need the row or the column classes if it's full width. Even Bootstrap's own examples say "No grid classes are necessary..." – Christina Oct 02 '14 at 18:04
  • You don't need col-xs-12 but in very select situations which I can't think of and have never used. – Christina Oct 02 '14 at 18:05
  • if you use col-sm-4 and col-sm-8 the padding will be there on smaller viewports because those are specified outside the media query, only the widths and the floats are included inside the media query. – Christina Oct 02 '14 at 18:07
  • col-xs-12 col-sm-12 is not necessary, not even row. Just see, as long as there is a .container/.container-fluid you don't need it. – Christina Oct 02 '14 at 18:07
  • 4
    I beg to differ: http://www.bootply.com/9IVZg46lsb. Unless you're using no col-classes anywhere, a non-col-class div's content won't line up with others. – Shawn Taylor Oct 02 '14 at 18:23
  • Yes, but that's not the scenario I had or the one in which Bootstrap says no grid classes are required. If you want the padding on a nested element to match others in a row, yes, but if you want to just be full width, then it's not needed. – Christina Oct 02 '14 at 18:29
  • You didn't mention a specific scenario. Although you don't HAVE to use grid classes at all, I think this is a pretty common use, since it's the heart of what makes Bootstrap responsive... – Shawn Taylor Oct 02 '14 at 18:41
  • I added the image where in Bootstrap's examples they write "No grid classes are necessary for full-width elements" This is not a situation when it's in a row. Thanks for pointing that out. – Christina Oct 02 '14 at 19:28
  • Wow I never saw that! You're right that it says that (here: http://getbootstrap.com/examples/grid), but I think they should explain it more... because when you mix it with other grid classes the design definitely falls apart. – Shawn Taylor Oct 02 '14 at 20:03
  • Yeah, they should explain it more, if the element is inside a row it must be in a column class or it won't clear and it will have other issues. Seeing on the vote down on the ?, apparently this col-X-12 is not understood well. – Christina Oct 02 '14 at 20:08
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/62368/discussion-between-shawn-taylor-and-christina). – Shawn Taylor Oct 02 '14 at 20:12
  • Thanks for this! – Donovan Keating Feb 26 '20 at 16:41
11

If something is full width, you don't need it at all.

enter image description here Learn: http://getbootstrap.com/examples/grid/

The correct html for both of the above examples is this:

<div class="container">

       <p>Words go here</p>

      </div> <!--/.container for entire grouping of elements you do not want to exceed the width(s) set in the CSS for this class -->

If you want your columns to be full width, it will be under the last column class you used. The following will be full width below where the col-sm- min-width starts (so 767px and UNDER in a default download of Bootstrap 3.x). 

<div class="row">
    <div class="col-sm-4">
     Stuff
    </div><!-- /.col-sm-4 -->
    <div class="col-sm-8">
     Stuff
    </div><!-- /.col-sm-8 -->
</div><!-- /.row -->

Don't forget the outer .container or .container-fluid (one per grouping of content that does not change width). The .container or .container-fluid zeros out the negative margin on the .row so you won't get horizontal scroll bars.

The situations when you use col-*-12 is where you want a full width AFTER the min-width of the smaller column class:

<div class="row">
    <div class="col-sm-6 col-md-12">
     Stuff
    </div><!-- /.col-sm-6 col-md-12 -->
  <div class="clearfix visible-md"></div>
    <div class="col-sm-6 col-md-4">
     Stuff
   </div><!-- /.col-sm-6 col-md-12 -->
</div><!-- /.row -->

Anyway, col-*-12 comes in handy in nesting situations, especially with forms.

Christina
  • 34,296
  • 17
  • 83
  • 119