5 Reasons to Love Bootstrap

01.10.2014

Why do we love using frameworks? It’s simple: frameworks save us time. Whether you’re marking-up a design or developing a web app, Bootstrap can save you a ton of time. Here’s why:

1. The Documentation!

  • http://getbootstrap.com/getting-started/
  • http://getbootstrap.com/about/#translations

Not only is the documentation very thorough, it is built using Bootstrap and HAS WORKING EXAMPLES. As you can tell by my use of caps lock, I come across far too many how-to’s and documentations that have no—or very poor—working examples.

Bootstrap does a great job of outlining each piece of its infrastructure by providing a brief description, working example, and the source code.

It’s also available in four other languages (Chinese, Russian, Spanish, and Ukranian).

2. Mobile First

  • http://getbootstrap.com/css/#grid

In its previous version (v2), you had to add a separate stylesheet to make your site responsive. With Bootstrap 3, it’s mobile friendly out of the box.

What I especially love about Bootstrap’s mobile first approach is the ability to assign device-specific column widths to an element. In other words, you can have a four-column layout on a desktop, three-column layout on a tablet, and a two-column layout on anything smaller just by using CSS classes. No need for additional markup.

Resize your browser window to see the columns in action.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

3. Components and other goodies make it GREAT for prototyping

  • http://getbootstrap.com/css/
  • http://getbootstrap.com/javascript/
  • http://getbootstrap.com/components/

Beyond the typographic and grid CSS, Bootstrap offers several “components” that provide several useful styled elements including navigation and icons. Bootstrap 3 even includes Glyphicons which “are normally not available for free.”

Bootstrap components save us a ton of time when we’re prototyping sites. Since we often build sites using Bootstrap, wireframing a site using the same framework helps us get from prototype to production even faster.

4. It’s customizable!

  • http://getbootstrap.com/customize/

Sure, you can easily markup a design that used the default Bootstrap grid, but what happens when you get a design that uses 20px margins instead of the default 30px? Well, Bootstrap has that covered, too.

In fact, you can customize nearly EVERYTHING and end up with your very own custom version of Bootstrap.

5. It’s Open Source!

  • http://getbootstrap.com/about/

Bootstrap started as an internal project at Twitter, but now it’s open source and always looking for contributions.

Sites that we’ve built using Bootstrap:

Explore other sites that use Bootstrap here http://expo.getbootstrap.com/.

Of course, there’s always the negatives…

Sure, using frameworks can save you time, but they can also drive you crazy when you’re trying to get it to do something outside its scope. Bootstrap is no different. You can always place CSS overrides in a separate stylesheet, but this can get very cumbersome and time-consuming (but it’s supposed to be easier and faster! #sadface).

Hopefully this post will give you a reason to at least take Bootstrap out for a spin. We love it, but we know that it can't realistically fit all of our needs.

sharing link :
category : Development