The idea behind Bootstrap is to create web templates that work on any device no matter the screen size. In other words, to be Responsive :)
Playing around with it, got me to discover just how cool media queries in CSS are. Here's what one looks like:
@media only screen and (min-width : 1200px)
/* your normal CSS goes here /*
The cool thing here is that the CSS between the brackets only applies when the screen is bigger than a certain width. In this case, 1200px.
In this way, you can write specific CSS rules for your HTML for each screen size you want, which is a very handy thing indeed. Here's how to use the media queries:
You can use either min-width or max-width:
Min-width is basically everything greater than or equal to the amount given.
Max-width is basically everything less than or equal to the amount given.
So, if you want to change the size of your <h1> tag on screens less than 992px for example, you'll write it like this:
@media only screen and (max-width : 992px)
Whenever the browser window is smaller or equal to 992 pixels wide, then the styles specified in the media query will apply.
Pretty cool hey! I hope this can help you in some or other way!