By definition Bootstrap is “the most popular HTML, CSS, and JS frameworks for developing responsive, mobile first projects on the web.” For us developers here at Cloud Construct it has become a standard. With every new project comes the need for the site or web application to be responsive in some way. Whether it is making sure that the navigation looks great on both your mobile phone and desktop, or making sure that each column has the perfect breakpoint; Bootstrap has your back. There have been many frameworks like Bootstrap over the past couple of years, but for one reason or another this one has stuck around. Bootstrap makes it easy to “plug-and-play”, meaning you can set it up and start using it right away with very little knowledge of it. Its vast library of classes allow you to do just about anything, from declaring contextual classes, promoting an “active” or “success” state, or even adding one of the 250+ glyphicons that come pre-defined.

However, the real reason we use Bootstrap is for the responsive grid structure, which takes into account a 12-column layout. With this layout comes 12 class names per device size and five different device sizes already defined for you in its CSS. That may seem like a lot of unique classes, but the idea is to work “mobile first”. You may have heard that phrase being thrown around here and there in the front-end development world. Its meaning is simple; design and develop for the mobile device first and focus on the desktop second. With Bootstrap and its amazing classes, the process of developing a site is simplified. By declaring a div with the “col-xs-*” class, we start from the smallest device size (extra small or mobile phones) and work our way up. To make it even easier, we wrap these sections in a larger div with the class of “row”, which helps package up a group of horizontal columns. The amount of grid layouts are practically endless.

You can even offset a column to be directly in the middle of your container by using “offsetting columns”. Adding another class called “col-md-offset-*” will offset your div by the number you specify. For example when focusing on desktop, by creating a div that’s four columns wide (col-md-4) you can center that in its container by calling “col-md-offset-4” within the class name. By doing so, the classes defined will be “col-md-4 col-md-offset-4”. This will in turn move your four column section over four columns, leaving an additional four columns (every “row” should add up to 12 columns), centering your content in its container.

There are many other features that Bootstrap offers to make your life easier when you are focusing on making your site responsive. This is just a brief overview of some of its features that we use every day at Cloud Construct. We highly recommend Bootstrap for any project you may be working on, so check it out at http://getbootstrap.com/getting-started/.