Adding custom media queries to Bootstrap 3 responsive utility classes

Question

Is there a way to add a custom media query (i.e. iPad Mini ver. 1-3) to Bootstrap 3 responsive utility classes?

For example, I want the .hidden-lg class to exclude iPads, 1-3/minis, and other 768x1024 devices.

Answer 1

In theory it's easy enough, you use a media query to target specific devices, then write your CSS to override the built-in Bootstrap behaviour.

You'll find sources online to help you with the media queries, to get you started you could try http://cssmediaqueries.com/target/

So for example, using the media query from the source above to target the .hidden-lg class on an iPad mini you would start with:

@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {

.hidden-lg {
        display: initial !important
    }
} 

In overriding the Bootstrap styling, the standard rules of CSS specificity are going to apply. It's possible you may need to add extra attributes to your selector so that your new rule takes priority, e.g.

#custom-content .hidden-lg {
...
}  

Good luck!