0

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

fs_tigre
  • 10,650
  • 13
  • 73
  • 146
  • 1
    yes, of course, bootstrap is a starting point, but you can (and probably should) create your own classes. The media queries are a CSS3 feature, not a Bootstrap's feature. – Alex Angelico Mar 19 '17 at 15:44
  • My confusion is the fact that `@media (max-width: 768px)` is one of the default Bootstrap break-points and I'm not sure if calling these break-points manually would cause some issues with the default Bootstrap grid system. – fs_tigre Mar 19 '17 at 15:54
  • 1
    will not cause any "issue", but if your style overwrites bootstrap style, your style will be applied instead of bootstrap style. I mean, if there is a "background" property for the element in bootstrap, and you set a different one, yours will be applied depending on CSS rule priority. That's the whole idea of using bootstrap as a starting point and then customize it with your own styles. I think you should search internef for "css rule priorities" documentation – Alex Angelico Mar 19 '17 at 16:06
  • @Alex Angelico - I have be researching about overriding default variables in Bootstrap to have a better understanding. Quick question, do you know if there is a better way to call Bootstrap media queries? In other words do they have a variable that we can call instead of `@media (max-width: 768px)` etc. – fs_tigre Mar 19 '17 at 16:18
  • 1
    @fs_tigre look at this question this question explains a lot about this bootstrap related media queries http://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries – neophyte Mar 19 '17 at 16:31

1 Answers1

1

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!

neophyte
  • 6,540
  • 2
  • 28
  • 43
  • Thank you for the good advice. One thing on your last note about including your css file after the Bootstrap css, I'm assuming this only apply to elements that do not have a variable assigned to it because I was under the impression that it was the opposite, to override default variables you would need to do the overrides before Bootstraps css since all variables are defined with !default`, meaning that if a value is already assigned to the variable it will not re-assign. I'm not sure if this has to do with the fact that I'm using Bootstrap `.SCSS`. Thanks – fs_tigre Mar 19 '17 at 16:31
  • 1
    Actually it's the opposite if you want to override some bootstrap variable you have to include the custom css after the bootstrap css. if you include your file before bootstrap then bootstrap will override your custom styles. css values can be reassigned by overriding. Your concept is correct for Sass but normally the overriding can be done by above mentioned way. – neophyte Mar 19 '17 at 16:35