Use Bootstrap for Responsive Mobile-First Web Design

QOT is now powered by Bootstrap, a powerful front-end framework for powerful web design, and speedier web development. Bootstrap is made by Twitter to do some cool stuff with your website. You need to try out Bootstrap to see why so many websites are switching over to it.

Just add a few lines of CSS, JavaScript code, upload few files on your server – Bootstrap lets you take your site to new levels of interactivity and design, Get the design elements for your website, which you observed in awe on some top websites till now. Bootstrap will let you get the same features for your website in minutes.


It is powered by LESS CSS, is compiled via Node, and is actively developed by a dedicated Github developer community. Don’t let the technical stuff confuse you as it is easy to implement by any webmaster quickly. Over the past few days, we also tweaked our site design to incorporate the power of Bootstrap.

Setup in Twitter Bootstrap Minutes

You just need to add 2 CSS files –  bootstrap CSS and another responsive design CSS file (which they are merging in the next version 3.0). Then you need to add jQuery scripts and Bootstrap JS. The site provides excellent tutorials to get beautiful design elements and get a superior responsive design with as many as 12 grid columns! Using a custom CSS file, you can tweak your site design further. You can also download a custom Bootstrap CSS after selecting values for key CSS selectors. The amazing flexibility and support for modern standards is great.

12 grid columns

You can use the Bootstrap Responsive test to see how the site looks on different screen sizes.

CDN support  

It’s a good idea to host jQuery from Google CDN libraries to get excellent speed. You can download and host the other bootstrap CSS/JS scripts from your CDN for faster delivery or get them hosted at BoostrapCDN for free. This makes the code just cut and paste to your website.  These are minimized javascript and CSS files for smaller size and faster loading.

Power of jQuery

It’s not only about how quickly you can add beautiful buttons, forms,  or other CSS3 effects which you can see on our site –  its also about the power of jQuery plugins like Collapsible menus (see our comments), pop out modals, dropdown menus (see our navigation), rollover navigation, carousels, affixing nav menu to top/bottom of screen and much more.

Sharp Icons

glyphicons halflings

Another amazing feature is Glyphicons – they have a tie-up to host a CSS sprite image of Glyphicon halflings (a paid icon collection, available for free in Bootstrap) – this allows you to insert 160 icons anywhere in your document, with a simple line of code, without any messy CSS codes and CSS sprite creation.

This code inserts a star wherever you want.
<i class="icon-star"></i>

Since the image loads once, you can insert one or all the 160 icons on every page if you like, without slowing the site! Why does our site have so many icons everywhere – you know why.

As Bootstrap is getting popular – there are hundreds of free Bootstrap Themes available, and many developers are combining the HTML5 designs with Bootstrap to create exceptional websites. Download Bootstrap today.

Update: You can use Font Awesome and get a more superior icon experience for your site

Update: Use Bootstrap on any site and load Bootstrap themes faster.

Share with friends

About the Author: P Chandra is editor of QOT, one of India's earliest tech bloggers since 2004. A tech enthusiast with expertise in coding, WordPress, web tools, SEO and DIY hacks.