Basic Twitter Bootstrap grid glitch

Question

Is it me or does col-xs-12 start very early when changing the window size? https://jsfiddle.net/t0o0capo/

For example, I want my divs on mobile to have background black but it's this colour at desktop. Why is this?

/* Latest compiled and minified JavaScript included as External Resource */

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.col-lg-4 {
  background:red
}

.col-md-4 {
  background:green
}

.col-sm-4 {
  background:blue
}

.col-xs-12 {
  background:black;
}

body {
    margin: 10px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">

        <div class="row">

            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-2 thumb">
               <a class="thumbnail" href="#">
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">
                </a>
            </div>
            
            

            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 thumb">
               <a class="thumbnail" href="#">
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">
                </a>
            </div>
            
            

            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 thumb">
               <a class="thumbnail" href="#">
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">
                </a>
            </div>
            
        <hr>

        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Your Website 2014</p>
                </div>
            </div>
        </footer>

    </div>

Answer 1

Your css will always be applied as it is not wrapped in media queries.

I have updated your jsfiddle to show a working example:

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.col-xs-12 {
  background:black;
}

@media (min-width: 768px) 
{  
    .col-sm-4 {
        background:blue
    }
}

@media (min-width: 992px) 
{ 
   .col-md-4 {
       background:green
   }
}

@media (min-width: 1200px) 
{ 
    .col-lg-4 {
        background:red
    }
}

body {
    margin: 10px;
}

You can find the standard bootstrap media query sizes here

/* Extra small devices (phones, less than 768px) / / No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

Answer 2

It is happening since "col-lg-4 col-md-4 col-sm-4 col-xs-12 thumb" in your divs and using same classes in your CSS (class col-xs-12 is always applied to your div and since it is pre-last class there - color of background is black). What do you want is Bootstrap media selectors:

@media (min-width: @screen-sm-min)
@media (min-width: @screen-lg-min)
@media (min-width: @screen-xs-min)

etc. Here is documentation: http://getbootstrap.com/css/#grid-media-queries

Upd: added explanation why it is black.

Answer 3

You need to put your CSS rule in a media query. The col-xs-12 class is always present, so your div will always get the styles.