Is it common to call media queries to restructure your elements manually when using Bootstrap?
In other words, if I have a custom element that I want to displayed or positioned in a certain way, is it ok to call the media query directly and reposition it there or the recommended way is to try to use Bootstrap's classes to make it behave the way you want to?
Something like...
// Calling the media query
@media (max-width: 768px) {
.my-element{
background: red;
}
}
FYI - When I say calling media queries I'm referring to the default media queries in Bootstrap, 750px, 970px and 1170px.
Thanks
You won't have any problem if you use media queries with predefined bootstrap breakpoints. In fact, there will be instances where you will have to use it.
Just one thing I would like to add is that don't modify bootstrap classes.
For example, suppose you have a div like this--
<div class="col-md-6">
throughout your page . by default the width for this element is 50%. Now you want it to have 25% width for a particular div and for a certain screen size. Then you should not write it like this--
@media (min-width: 768px) {
.col-md-6{
width: 25%;
}
}
the above example will override the bootstrap class through out the page and that's not desirable.
So, what is the solution--
you should assign a id/class to the element and then style it. Like this--
<div id="myelem" class="col-md-6">
and then style it with the id.
@media (min-width: 768px) {
#myelem{
width: 25%;
}
}
That's it and everything will be fine.
note
you should always include your custom css file after the bootstrap css. Otherwise bootstrap will override your custom css.
Hope this helps!
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments