CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3media-queries
Quentin Gérard
Quentin Gérard

Reputation: 185

Overriding Bootstrap 3 Media Queries

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.

Upvotes: 16

Views: 19528

Answers (3)

javaBean007
javaBean007

Reputation: 565

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

Upvotes: 8

D. Starr
D. Starr

Reputation: 166

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.

Upvotes: 1

René Roth
René Roth

Reputation: 2096

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!

Upvotes: 1

Related Questions