How to use Bootstrap classes and media queries properly

We mostly use Bootstrap responsive CSS framework for our WordPress themes and I found some useful things about custom media queries. Media queries are very useful when you are designing something that is beyond Bootstrap or any other CSS framework.

To be very specific in example, let’s say you are designing a custom menu for your theme and it requires certain breakpoints. You can easily define media queries and target the desired class or ids for your design to write CSS codes. I personally try to avoid extra media queries to keep my code lightweight. But in some cases you may use. I will also discuss how to properly use bootstrap responsive classes such as “col-md-6”.

The Theory of media query

Generally a media query provides extra support for your responsive layout while you are not using default responsive classes of Bootstrap. But if we are using custom section inside a responsive div, I recommend avoiding media queries and staying with the framework that we are using. For example, we have a div with a class “col-md-6” and inside this container; we are using another div which requires a media query. In this case, you already have a responsive div and extra line of code for media query will take extra time for calculation. This is expensive. Media queries are specific to screen sizes that you are defining. It calculates and renders thing accordingly.

How to write a media query

Media query is simple to write and can be defined different screen sizes as well. Here is a sample code if you like to target a screen size like 767 pixel width –

[php]
@media (min-width: 480px) and (max-width: 767px) {

// Your CSS code here

}
[/php]

Sometimes custom media query and Bootstrap CSS can conflict and may not render things in a proper way. So make sure you are not using custom queries with Bootstrap responsive classes together in a same container.

Proper usage of Bootstrap classes

If you are a regular designer with Bootstrap, you may find some floating issues with responsive column classes. Sometimes the padding and margin of inside divs or elements may not render correctly in smaller screen sizes. I will show you the best practices here.

It is important that you plan your responsive design from the smaller screen size (mobile first) to larger sizes like desktop or laptop. Thus the floating issue will not occur. For example,

Let say you are using a “DIV” with a class of “col-md-6” and you did not defined any other classes for smaller screen size. This div will show elements correctly most of the time but certainly if you have another responsive DIV before this, it can cause unusual render and may not properly show padding, margin of inside elements.

This is only because you have not defined a responsive class for mobile!

I strongly suggest using responsive classes for all screen sizes. Bootstrap has all classes for every possible breakpoint of mobile screens.

Example:

[php]

<div class=”col-lg-12 col-md-6 col-sm-6 col-xs-12”></div>

[/php]

The above example of code will never cause an unusual render for any element inside that div. This is because you have defined everything there.

“col-lg-“ is for largest screen, “col-md-” is for medium large screens, “col-sm-” is for tabs as well as for some mobiles and “col-xs-” is for mobile only.

So I think it is now clear how you can take full control over your responsive code with Bootstrap. Using media queries are good but if you have scope to control things with default responsive classes, do it like the way it should be done.

We regularly use Bootstrap as mentioned above for our responsive WordPress themes. You may use comments for any questions. Thank you for reading this article.

P.S. – You may visit Bootstrap site to learn more about the usage.

Leave a Reply

Your email address will not be published. Required fields are marked *