Responsive Web Frameworks - Bootstrap

When it comes to creating a website these days you're seriously missing a trick if you don't build a responsive design. Mobile search and interaction is at an all time high and it will only keep growing. 40% of mobile users admit that they just up and leave a site if it isn't optimized for their device. That's a staggering amount of visitors to lose but you won't lose them if you have a responsive site.

Bootstrap - an awesome front end framework

One of the main benefits of starting with a framework is because of the speed that sites can be developed with it. You're not starting from scratch, the frame has been built for you already. One of the most popular frameworks to choose from is Bootstrap. It was created by Mark Otto and Jacob Thornton at Twitter and as such you might have heard the term Twitter Bootstrap. Bootstrap is a complete website-in-a-box. It has tons of ready to use UI elements, typography settings and even some pretty awesome jQuery plugins. It's been made fully responsive through CSS media queries and it's got Glyphicons (an icon based font) included.

What makes Bootstrap responsive?

Bootstrap actually isn't responsive by default but it does come with a css file with media queries and you only need to add 2 lines of code to make include it and make the whole framework responsive.

How to make Bootstrap Responsive

Because responsive features aren't needed for all projects Bootstrap doesn't enable them by default but it is extremely easy to do it yourself. Personally I think that they should enable responsiveness by default but they made the choice to slim down the default css and reduce the includes, which is a good thing, but responsive design is a requirement these days.

Just set the device width and scale and include the bootstrap-responsive.css file and like so.

This code gets included in the head section of your html.

Bootstrap makes use of a combination of fluid widths and media queries to make it responsive. There are 4 specific breakpoints set for these.

/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }

What other features does Bootstrap have?

Bootstrap isn't just a responsive framework - it comes with literally hundreds of components too. There's a fully styled set of UI elements for you to choose from, 19 jQuery plugins, responsive grids and thumbnails. There's even labels, navbars, dropdowns, buttons, progress bars and a strong typography.

When you make use of any of these features alongside the bootstrap-responsive.css file then all of them become responsive. I feel that it's particulary important for all websites to have responsive navigation that works on every device and is touch friendly for mobiles.

Bootstraps 'Customize and Download' Feature

With Bootstrap there's so much choice available. You have all of the user interface elements, the base css, if you want the responsive css included or not, your choice of the jQuery plugins including animations, dropdowns, collapsible toggles and even a popover.

Because Bootstrap's css file is created using the LESS preprocessor it can accept variables. Those variables are where all the heights, colors, paddings and margins are stored and because of that the customizer actually allows you to change ever single one of the default values in the customization process.

Once you've customized everything to your liking you just have to click the download button and your custom version is downloaded in a nice little zip file for you to use.

Other Responsive Frameworks Available

While Bootstrap is a great responsive framework it's not the only one available. There are a number of other free frameworks available like Skeleton and 320 and up. Skeleton is your base package, it has minimal predefined styles compared to Bootstrap. 320 and up is a mobile first responsive boilerplate for you to use.

If you're a WordPress site owner, which a lot of us are, then you're in luck because both Skeleton and Bootstrap have WordPress variants, just google for them. There are also numerous other theme frameworks for WordPress that you could use. The Genesis Framework is a very popular choice and with the next update (Genesis 2.0) it will be fully responsive as well.

William is a web developer based in the UK. He's always happy when he gets to use the Bootstrap Framework to build responsive websites because it means he gets to do what he loves best - build awesome things for the web.