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

Question

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.

score 2 · Accepted Answer · answered Mar 30 '15 at 02:34

2

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:

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

answered Mar 30 '15 at 02:34

xengravity

3,501
18
27

The customized generator looks great. I see that 992px is in @screen-md and it has been deprecated. May I know what replaces it? Does "md" stand for "medium"? – Old Geezer Mar 30 '15 at 02:53
You can still use the file. I think the documentation is slightly confusing. Depreciation of @ screen-x variables in favor of @ screen-x-min was done to better match the @ screen-x-max variables and provide more context to their actual uses. Additional information about this can be found here: https://github.com/twbs/bootstrap/pull/9963 – xengravity Mar 30 '15 at 03:21
To clarify, if you are not modifying LESS or SASS files you don't need worry about the depreciation of the @ screen-x variables. Simply modify the breakpoints in the generator and you can use the CSS it outputs as you regularly have. – xengravity Mar 30 '15 at 03:24

score 0 · Answer 2 · answered Mar 30 '15 at 02:40

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.

score -1 · Answer 3 · answered Mar 30 '15 at 02:40

-1

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.

answered Mar 30 '15 at 02:40

rashidkhan

462
8
24

https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css – Wade Williams Dec 28 '18 at 15:42

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

3 Answers3