A taste of Bootstrap 3 and Responsive Design
The bootstrap grid layout system has come a long way since my last bootstrap blog many moons ago.
An important note with the new edition is previously boostrap required a separate responsive design script and css file but this time around responsive design is enabled by default, which means the responsive design behaviour is included in the standard css and javascript file includes. i.e. bootstrap.min.css and bootstrap.min.js (which relies on at least jquery 1.9.0).
One of the more foundational improvements to come out with bootstrap 3 is the new grid system classes where span<colspan> has been ugraded with a much more precise structure of classes, capable of targeting different device screen sizes within the class definitions see below:
col-lg-xx: >= 1200px
col-md-xx: >= 992px
col-sm-xx: >= 768px
col-xs-xx: < 768px
(offsets are similar structure eg col-lg-offset-xx)
Similarly to the old span class the xx’s represent the colspan of your element but in addition the class will only be applicable when the screen width matches the above specifications. For example, class col-xs-xx will only be applicable on mobiles where you might want to configure your elements to stack so then you specify col-xs-12(assuming you are using a 12span grid) on each element. Now let’s see a very basic example of bootstraps default 12 grid responsive system in action with just spaning text.
screen >= 992px (tablet,desktop)
screen < 768px (mobile)
As you can see the larger screen reads the col-md-xx class and the mobile screen reads col-xs-xx. The last number just like previous bootstrap version specifies the number of colspans for the corresponding device, so in the case of mobile it stacks all the content because the width is specified to the page width span of 12 columns, pretty cool right?!
Now suppose you were to add a largish image (640px by 360px) to the last span tag as so:
Notice the use of bootstraps “img-thumbnail” class. This will now resize the image client side to fit in its container while adding appropriate padding. See below:
screen >= 992px (tablet,desktop)
screen 526px (much smaller than the image which in turn gets resizes smaller to fit!)
And there you have it!
