Overriding Bootstrap 3 Media Queries

Question

How do you override a media query on Bootstrap 3?

For example, I have my custom style sheet and I want to override a media query that is min-width: 768px to a min-width: 1200px.

Every time I do that it doesn't apply the settings. However if I change that media query on Bootstrap's own css file, then it works!

For more clarification:

bootstrap.css:

@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}

My custom.css:

@media (min-width: 1200px) {
 .navbar-header {
 float: left;
 }
}

Please help me out.

Answer 1

When you use bootstrap css, they have it defined as:

@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}

So it will always apply that css rule when it is above or at that width of 768, even if you apply your rule of media 1200 after the fact. This is because you are never overriding the previous rule you are just adding a new breakpoint.

To override default bootstrap rule use something like:

@media (min-width: 768px) {
  .navbar-header {
    float: none;
  }
}

In your own custom.css file, (Of course make sure to include your custom.css file after bootstrap.css to make custom load last).