Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the bootstrap media queries conditions?

We have bootstrap settings for large screen as:-

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

I want to override to max-width : 1920px. How can I do this without hacking the core?

Note: I am maintaining my front end dependencies via bower, so I want the changes to be maintained on the custom CSS files. Is there any way to "override" those configurations?

like image 932
Dipendra Gurung Avatar asked Feb 16 '16 02:02

Dipendra Gurung


People also ask

How do you write a media query condition?

You can use and to chain together multiple test conditions: @media screen and (min-width: 480px) and (max-width: 960px) { ... } To specify that only one of the conditions needs to be true (similar to or), separate the conditions with commas: @media screen and (max-width: 760px), tv and (max-width: 1200px) { ... }

How do you override a media query?

To override a specific media query rule, append a new css rule after the one you want to override. For example, if the last css rule does not have a media query attached, it will override all previously declared media queries (presuming the same selectors).

Which of the following is correct about Bootstrap media query?

Q 7 - Which of the following is correct about Bootstrap Media Query? A - Media queries have two parts, a device specification and then a size rule.

How does Bootstrap include their media queries?

We use a handful of media queries for delivering different styles sheet to different devices, to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.


1 Answers

Use the customize page on the documentation to create a custom version.

http://getbootstrap.com/customize/#media-queries-breakpoints

like image 171
Schmalzy Avatar answered Jan 02 '23 13:01

Schmalzy