Why I Love Bootstrap, and Why You Should Too

Syed Fazle Rahman
Tweet

Bootstrap stands as one of the most popular open source front-end frameworks on the Web. Since its official release in 2011, it has undergone several changes, and it’s now one of the most stable and responsive frameworks available. It’s loved by web developers of all levels, as it gives them the capability to build a functional, attractive website design within minutes. A novice developer with just some basic knowledge of HTML and little CSS can get started with Bootstrap.

Bootstrap provides a solid foundation for any website, irrespective of project size. It contains Normalize.css, which helps level out browser differences for various page elements. Bootstrap also provides great typography. Even basic HTML form elements like checkboxes, radio buttons, select options, etc., have been restyled to give them a modern look. I use Bootstrap because it saves me a considerable amount of effort.

Today’s websites should be modern, sleek, responsive, and mobile first. Bootstrap helps us to achieve these goals with minimum fuss. Here are the top five reasons why I love Bootstrap:

Reason 1: The Powerful Grid System

Bootstrap has one of the best responsive, mobile first grid systems available. It’s easy to use and flexible. It helps in scaling a single website design from the smallest mobile device to high definition displays, logically dividing the screen into 12 columns, so that you can decide just how much screen real estate each element of your design should take up.

Reason 2: Rapid Development

Bootstrap comes complete with many reusable CSS and JavaScript components that can help to achieve the functionality needed in almost any kind of website. You just have to use some HTML to plug them into your template, with no need to spend huge amounts of time writing complex CSS and JavaScript. Plus, all these components are responsive, too!

Reason 3: Browser Compatibility

Bootstrap is compatible with all modern browsers and Internet Explorer versions 8 and up. If Bootstrap’s instructions are followed properly, you can create a website design that works in all these browsers. Plugins like HTML5Shiv and Respond.js come as part of Bootstrap’s default template. These help in porting HTML5 elements into older non-HTML5 browsers.

Of course, if your employer wants to make a website compatible with IE7, then it might be time to think about switching jobs!

Reason 4: Customization!

Bootstrap offers many ways to customize its default design. You can override all of its CSS and default JavaScript behaviour. Bootstrap is even more interesting if you are a Less or Sass developer, as it includes Less and Sass customization options. These options let you smoothly create a new template using Bootstrap.

Reason 5: Open Source

Bootstrap is an open source project, hosted on Github. It is released under the MIT license. This is one of the biggest reasons that I use Bootstrap. My clients won’t have to deal with purchasing and licensing issues, and Bootstrap’s license gives me the freedom to completely change and experiment with it.

Want to Learn Bootstrap?

SitePoint has published my book on Bootstrap called “Jump Start Bootstrap”. It teaches you how to get started with Bootstrap. Apart from teaching you how to use Bootstrap’s components and plugins, it also covers how to customize them through options like Less and Sass. A major section has been dedicated to Bootstrap’s grid system, which is the most important aspect of creating a responsive website design. You will also learn to create many demo website designs throughout the book.

If you start a free trial on Learnable today, you can get a copy of this book for free!

Jump Start Bootstrap

Hopefully, you found this article interesting, and it has convinced you to try Bootstrap in your future projects.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • jokeyrhyme

    It’s also worth checking out Bootstrap’s siblings: http://foundation.zurb.com/ and http://www.getskeleton.com/
    Apparently, these 3 all share common ancestry.

  • http://jiffdesign.de/ sascha fuchs

    Sorry but anytime i hear “I use bootstrap because is love….” i think it talks a hardcore developer with no frontend skills.

    Powerfull Grid System? You want to see a powerfull Grid System get Susy.
    Reuseable Elements – yes the most pages that builded with Bootstrap have the same look.
    Browsercompatibilty – is not very difficult. And binding some JS Files like Modernizr, HTML5 Shim is not a hard part.
    Customization – other Frameworks do the same, and plays longer with Sass.
    Open Source. When this is your biggest point for the recommendation, do you think other Frameworks (and we have hundreds) are closed source?

    • http://dada.theblogbowl.in/ Shaumik Daityari

      Bootstrap themes are way too common these days- the black header and the blue buttons!

      • thefairystamp

        I agree with both of you, completely. I have started to use my own framework, which is more kind of a boilerplate, then a framework. Bootstrap is great for projects that do not have a dedicated front end designer, but need a visually appealing front end to work, for example with their app, or to market a digital product. But I haven’t had any real world usage when working for clients.

        Im starting to think, that bootstrap might be a good foundation for a prototype maybe. But I wouldn’t use it for more. Im not the biggest fan of endless configuration and overwriting.

    • LouisLazaris

      One thing you have to remember:

      If there is a website that is built with bootstrap but doesn’t look like Bootstrap, then you’ll never know! Who views source on every website they visit? The good designers/devs will make it look custom but will utilize a tool to ease their workflow.

      So you’re right, there are tons of sites that all look the same because they use Bootstrap, but that’s only because the Bootstrap-based ones that don’t look the same don’t get any attention. :)

      • http://dada.theblogbowl.in/ Shaumik Daityari

        The ones that are showcased on the Bootstrap website look really nice. But, projects with no designers using Bootstrap (with class=”well” or “btn-primary”)- that makes it look the same!

      • http://www.cliftwalker.co.uk/ Jonathan Clift

        I kind of agree with both arguments here. There is no doubt that Bootstrap has sped up the process of developing websites and web applications. It takes care of so many common elements that could previously take a long time to develop. It’s also well tested so if you’re sticking to a lot of the defaults you spend far less time testing and fixing like we used to in the past. The downside however, is that the web is saturated with web applications and websites that look exactly the same. More worryingly though, too many developers are using the Bootstrap framework on simple sites/apps, that do not require this type of framework. They end up using it just so they can utilise a specific feature such as it’s responsiveness. This is bad practice.

        The other point is that whilst you can customise Bootstrap you have to find the right balance. If you’re going to spend a huge amount of time completely rebranding/customising bootstrap is it the right job for the tool in the first place?

        Don’t get me wrong, I think Bootstrap is great and I use it for lots of projects but it’s all about picking the right tool for the job. There are lot’s of great frameworks out there to use and they all have different benefits. It’s down to the developer to decide on what will work best for their project and if they even need a framework at all.

  • Ralph Echter

    I agree with @sascha fuchs:disqus. People tend to use a framework like Bootstrap or Foundation way too quick, even for small to medium sized websites, while slapping a layout together yourself is not that much work either. But… its way more efficient and over the years you’ll have build a ‘framework’ or boilerplate yourself gathered with common scripts and code snippets/pattern library ready for use. If I see all these one page websites build with Bootstrap, I sigh…

  • http://dada.theblogbowl.in/ Shaumik Daityari

    In fact, Bootstrap is the most popular repository in GitHub.

    • mvchx

      In fact, IE7 was the most popular browser in its time, and it sucked ass at respecting standards. Your argument is puny, at best.

  • http://jiffdesign.de/ sascha fuchs

    I didn’t say that Bootstrap Sites/Designs looks bad, it can have a nice look. Its not the Framework that build nice Looks, good and creative Designs, better Codequality and a read and useable Documentation, its the Team behind. At last its also the question how many time is available, less time == less quality/creativity.

    A Framework is only a part off a bigger Toolset, and Bootstrap is not better than Foundation, Grumby, a Metaframework like Compass, a PreCompiler or Hardcore Native CSS Typed Code.

    In my Experience the most people that exited from Bootstrap, are no specialist in the Frontend Part. There like to copy&past some code from the Documentation “Tadaaa here i can build Frontends…”, than i look in the Code and ask “Why you use FONT Tags in your HTML Code???!” :)
    My ex-boss is a perfect candidate for it. He loves Bootstrap, because he can copy&paste Codesnippets from the Documentation to build Frontends. And he make the same Errors.

    I developed and still developing its own framework, which is based on the existing workflow (rather than dictate this). I started with prefabricated elements, this limit a designer too. Today there are only methods by which I can react much more flexible to the demands of the design.

  • LouisLazaris

    I agree. And I think what would be great is if more experienced developers wrote about how they ensure their Bootstrap-based sites do not fall into that ‘cookie cutter’ syndrome.

  • mvchx

    I’m gonna be blunt, with no apologies. I have seen/read too many times why I’m supposed to love Bootstrap and it makes me puke because of Bootstrap’s core approach to multi-device design.

    Until Bootstrap removes px measurements from its framework, it is not truly liquid. It is still dependent upon a very static unit that doesn’t aid in responsiveness across devices. You have to literally customize it from the very beginning in order to make it usable in environments where it needs to be robust and willing to flex.

    Furthermore, aside from using px as their main unit on the framework itself, they continue to use that same static measurement across components and typographic styles.

    In other words, it’s still growing up, and has another version to go before it seems like they’ll finally realize why sticking pixels as a unit of measure is not a great way to go. Kinda like how there’s four countries left in the world that use Fahrenheit for weather temperature.

    There are other boilerplate and frameworks out there that adhere to using rem and em as their base unit of measure, which aids greatly in setting typographic stylings that break less in varied device scenarios.

  • Anne-Mie Vanhulle

    In the topics about bootstrap, foundation or other css frameworks, I never see any discussions about speed. Bootstrap, zurb, … always talk about mobile first. responsive frameworks.
    When using a phone not everyone has wifi or 4G available. It is important to have a lightweigt framework to load fast. I nearly find any information about this.

  • HenriHelvetica

    If you want to really worry about page weight, I would look @ the amount of imgs 1st, 2nd and 3rd. By far – and I do mean that – the greatest source of page weight is, and shall remain images.

    See: http://httparchive.org/interesting.php#bytesperpage .

    That is where you’re bound to find the most significant amount of savings if that’s a massive concern. Image optimizing is becoming a black art. But, I will also add that many front enders seem to constantly load the entire framework instead of customizing the build. And most ppl are guilty of if. Ppl like to load the entire Modernizr library, though all the want to do is test for 1-2 features.

    So don’t blame Bootstrap for offering the features, blame the dev for wasting them.

  • HenriHelvetica

    After reading the headline, I was reluctant to even click on this, for fear of seeing a raging fire from all the flaming i’m certain was going to take place. I find it so odd that ppl have such a clamorous distaste of Bootstrap.

    The only issue is that devs are too lazy to customize it. And in their defence, they prob got caught in BS’ clean look – which is du jour.

    The page weight issue is a non issue in my books as well. Ppl are uploading the entire framework w/o customizing it when they only need a few features. The biggest weight issue isn’t BS, it’s by far images.

  • http://www.simonbutcher.net/ Simon Butcher

    “Who cares?” Well, I care. Bootstrap turns web development into a monotonous factory process. It’s like everyone buying the same t-shirt. “Oh, another super-creative bootstrap site. Brilliant.” I agree that Bootstrap provides the priceless option for delivering a quick site for a client, which is great if you’re on a tight schedule or backlogged with work, but then if you’re getting THAT much work through the door, then surely hire another designer to do bespoke sites? Bootstrap is just lazy. As a front-end developer, I love CSS3 and tinkering with mobile/tablet layouts to make them my own. If someone sees web design as purely a manufacturing process, however, with no emotional attachment whatsoever, then by all means churn out the same tasteless design for all your clients, as long as they’re happy, right? Bootstrap is truly only for back-end developers with poor CSS3 skills, period. (No offense intended, by the way).

    • Evan

      Kind of like how we all hate when applications use the same UI styles, buttons, menus etc… We all wish every application looked and worked entirely different, huh? (/sarcasm)

      Who says every site needs to be creative and unique? Some projects serve a purpose where creativity is the least of concern, and uniformity/familiarity is more important. A pre-made framework for the front-end is not necessarily lazy, if the time/resources are spent elsewhere where it matters the most. (Shouldn’t you know all this as part of your work btw?)

      And who says you can’t be entirely creative and unique in all aspects, with bootstrap even?

    • harishchouhan

      All Apple laptops look same. People buy them. So that means Apple engineers are lazy selling the same design over and over again and instead should like Samsung sell 100 different designs? Bootstrap allows making working prototypes so much easier. And besides users can customize bootstrap to their own requirements.

      I love custom work irrespective of the project budget, as it allows me to control and know about every bit of the code I write. Saying with bootstrap one can only create a tasteless design where as a good design is only possible only with 100% custom code is being too extreme.

      Not all websites I see online that do not use bootstrap feel that unique. Now a days all have the same crappy layout of boxes of content stacked below each other throwing few effects here and there.

      Using bootstrap and being creative are 2 very different things.

  • CTN

    It is the bomb