Bootstrap Responsive Debugging – CSS Media Queries Debugging

Easy way to debug Responsive media breakpoints when you are using Bootstrap.

If you are not using Bootstrap you can still adapt this method for Bootstrap debugging in your project, all you need to do is just write these classes to fit your grid system and breakpoints and you are good to go.

Just add these lines wherever you need to see what is the current media query, are you in XS,SM,LG,..

<div style="text-align:left; font-size: 16px; text-align:center; color:black;">
 <span class="visible-xs">SIZE XS</span><span class="visible-sm">SIZE SM</span><span class="visible-md">SIZE MD</span><span class="visible-lg">SIZE LG</span> 
</div>

These lines will spit up visibly on the web page the current size, so you will know when you are switching media query breakpoints.