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).

Answer 2

If I understand you correctly you want the header to float at 1200px and not at 768px, right? So you use this:

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

to render the setting for 768px ineffective and then just define it for 1200px

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

I hope I understood your question right!

Answer 3

I would recommend overriding the following variables.less in Bootstrap source to something like this:

@grid-float-breakpoint: @screen-lg;

If you are writing your styles in LESS already, include your own custom.less file after the vanilla bootstrap.less then when you compile, the variables defined later will take precedence.

Or, copy the @import statements from bootstrap.less directly into your own custom.less, update the paths for your environment, (ie. @import: "../node_modules/bootstrap/less/normalize.less";) comment out the modules you don't need, then compile your own... For even leaner CSS output!

I use Node, Grunt grunt-contrib-less to automate these tasks.