CODEWITHSUNDEEP
csstwitter-bootstrap
u936293
u936293

Reputation: 16224

How to override @media (min-width: 992px)?

bootstrap.css contains:

@media (min-width:992px)

I would like to change the 992px to 650px. How do I do it by overriding it from another file and prevent the 992px line in the original bootstrap.cs file from taking effect?

In other words, I want all width of >650px to adopt my style, and I would like to do it without modifying the original bootstrap.cs file.

Upvotes: 3

Views: 4252

Answers (3)

rashidkhan
rashidkhan

Reputation: 472

Create your own CSS file and put the styles there. @media (min-width: 650px) { .......}

If the styles don't take effect, use !important for the styles.

Upvotes: -1

Bala
Bala

Reputation: 706

Ideally if you include your CSS file after the default bootstrap.css file, the styles that are rendered will be from your file. You will have to note that all the styles in the bootstrap.css that you do not want to reflect will have to be overwritten in your custom CSS file.

This is a only option there is if you do not want to modify the bootstrap.css file.

Hope this helps.

Upvotes: 0

xengravity
xengravity

Reputation: 3589

I don't see a way that you can do that.

I would suggest generating your own bootstrap CSS file. You can easily modify the media query breakpoints by going here:

  1. http://getbootstrap.com/customize/#media-queries-breakpoints
  2. Change the values to your prefered dimensions.
  3. Scroll down to the bottom of the page and click "compile and download".

Upvotes: 2

Related Questions