HTML & CSS
Article

Why I Love Bootstrap, and Why You Should Too

By Syed Fazle Rahman

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.

  • 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!

      • Bs-Lover

        No. They aint common.

      • Ivan Lopez

        Amen to that.

      • 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.

    • Bs-Lover

      Are you sure about “yes the most pages that builded with Bootstrap have the same look.”? (builded should have been built)

      Well, I don’t think so! For example, check this collection of Bootstrap based websites: http://lovebootstrap.com/showcase

      Do all these sites look the same? It depends on how you leverage the power of Bootstrap.

      IMO, Bootstrap gives you great flexibility in terms of customization and it deserves to be one of the best front end frameworks. While it’s a boon for hard core developers, it’s of equal importance to the front end guys.

    • https://www.google.com/+SyedFazleRahman Syed Fazle Rahman

      Those are really good points. I do believe that you can get all the things that Bootstrap offers as a standalone code. This article doesn’t compare Bootstrap with other frameworks here.

      The purpose of the this article is to showcase how Bootstrap covers all those features and comes as a package. Rapid development is “the need of the hour”.

      “Reuseable Elements – yes the most pages that builded with Bootstrap have the same look.” – That’s definitely going to happen. Bootstrap can be used as a code base by web designers to start the designing process. There are many websites which are built using Bootstrap and still look completely different from each other. Here’s one of such list: http://expo.getbootstrap.com/

    • Ivan Lopez

      So what’s the point of your comment again?

      I get what you are saying but I don’t get the point of you saying it.

    • 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.

  • Harish Pande

    I think Bootstrap is best suitable for developers with no or very less CSS knowledge. I am a JS expert and have always used Bootstrap in Live Conferences to jump start the development process. I guess the main motive of Bootstrap is to focus on your application rather than investing time on the design and gathering all the bits and pieces as pointed by some comments here. Do not forget that everyone does not have time to maintain their front end codebase and that these frameworks like Bootstrap have a large number of very talented people contributing to them. “Do not reinvent the wheel’ is mostly suitable here.

    I really liked the article and think we should also put some light on similar frameworks like http://semantic-ui.com and http://foundation.zurb.com/

  • Ivan Lopez

    Boostrap is a great TOOL for developing websites. But I agree with many of the comments here. Seems like front-enders these days use it to make these cookie cutter sites that all look the same. It is a TOOL, use it as such to create beautiful experiences on the web. It helps speed up the process of grid usage and it’s easy to learn. I have used it several times before and it does a great job. However, by looking at the sites I have created with it, you would have never guess it’s even in use.

    Just sayin…

  • borkie

    Title should be: “Why I love Bootstrap, and why you shouldn’t

  • Alexandre Istratov

    Funniest sentence ever : “Bootstrap provides a solid foundation for any website” foundation.zurb.com

  • Chillatnove

    I have seen a lot of free plugins are already built on bootstraps…its cool that they are responsive, i think that is going to be the standard for website development

    Greetings

    Chillatnove

  • 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.

  • coffee_ninja

    It always cracks me up when I see so much hate lobbed at a free, open source product. People choose to give back to the development community and get crapped on for their efforts…
    I use Bootstrap (first 2, now 3) for a ton of projects. The criticism that “sites that are developed with Bootstrap look like ‘sites developed with Bootstrap'” can be and often is true, but you know what? Who cares! Sometimes a cheap boilerplate site is all that’s needed or all a client is willing to pay for. On the other hand you can take Bootstrap and get a responsive grid system (among it’s many other features) and make a site that looks completely unique. It’s up to the developer to do customization. You can stick the exact same criticism to literally any other web UI framework and it’s juts as relevant: if you don’t take the time to customize it, it’s going to look cookie-cutter.

  • bernard

    Personnaly i don’t want to load a huge bootstrap css file OR make a custom build OR grunt uncss… So for a little website i use Bourbon with Neat (bourbon.io) it’s a mixin library so it loads only what you need. For great grid system check out Susy or Singularity or Jeet. Cheers

  • 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.

    • Evert Albers

      With proper use of SASS, you can make Foundation extremely lightweight and fast. I use it together with BOLT http://bolt.cm , a CMS that gives you total control over your code, and the results are… speedy.

      I have not worked much with Bootstrap lately, but I’ve been told that the SASS version of Bootstrap can give similar results.

  • BurtonBlaine

    One other aspect that no one has mentioned is weight. Bootstrap (without modification or addition) weighs in at about 30k compressed and 150k uncompressed. In light of all the articles published earlier this year about reducing the weight of pages, some of the alternative frameworks or rolling your own may prove more lightweight while still accomplishing the same task.

  • http://www.virtuosoft.eu/ István Ujj-Mészáros

    I made an online tool for customizing Bootstrap, I hope you find it useful:
    http://bootstrap-live-customizer.com/

  • 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.

    • rey alejandro

      ios app look the same. android app look the same. but you can still make it unique and make it your brand new. check out their http://expo.getbootstrap.com/ for example. it all looks modern but other than that it is all unique and brand new.

    • Jeff

      Don’t blame the framework, it’s popular because it’s extremely useful. Blame the designer / or developer who is too strapped for time, too lazy, or not a skilled enough to make their site look unique. You could also blame the project manager who doesn’t budget for someone with that skill set. It’s often just not high enough priority.

  • seangore

    I have found Bootstrap good for 1 thing, and 1 thing only: learning. But learning from their mistakes, moreover. As many have already pointed out, Bootstrap has many, many problems: unsemantic grid system (what does col-6 mean?), lack of proper ARIA roles, CSS no-nos (!important), and px littered everywhere to prevent scale to name a few.

    I have to give the “framework” credit: it’s even hard to imagine it, but yet it was much worse 3 years ago, when I was learning from their mistakes. Bootstrap has actually come a long way, and their display: table hack on appended inputs is something I use now (most of the time) when I need something similar.

    The thing that bothers me most about this post is that it’s encouraging lazy practices. Aside from the fact that Bootstrap introduces an exceptional amount of bloat into any project, the statement “learn Bootstrap” unnerves me. Maybe Syed Fazle Rahman meant to say “learn from Bootsrap’s mistakes”, and in that case, I agree 100%. Go ahead, bring in the technical debt. I guarantee, you’ll have to make it up at some point or another if you want flexibility.

    I actually did a presentation on this exact topic a year back at YYCJs: http://yycjs.com/not-bootstrap/

    And while some might say, “why don’t you fix it; it’s open source”, it turns out to be very difficult. The repo maintainers, Mark Dotto being the main person, would not accept my pull requests when I tried. So I gave up. That’s when I created my SASS Boilerplate. It gives you nothing to start, and all your CSS is optimized using extends directives: https://github.com/srsgores/sass-boilerplate – Some of the things I do in this still blow my mind away and remind me of why I never use Bootstrap. For example, I create a placeholder called %two-thirds (much more semantic than only a mixin, and called “col-4”), and I can extend that anywhere in my app’s styles, and it falls through to the central media query. As you can imagine, this reduces bloat in HTML like “col-9” everywhere, and you get the straight-up goodness of HTML5.

    So ultimately, I don’t mean to “hate” on Bootstrap; I’m merely commenting on how it has a long way to go. Learn from their mistakes, and try to avoid making them. If you get confused, and you are learning, then check out my guide on GitHub: https://github.com/srsgores/css-style-guide – which uncovers the principles used in my SASS Boilerplate.

  • CTN

    It is the bomb

  • http://miguel.co.nz Miguel

    I’ve read your comment very carefully and then I went to your Facebook profile and Mojo Active. Personally your websites don’t look any good and I understand why you are using Bootstrap, this framework suits your needs.

    Often Web developers have a very poor eye for design which is OK, we are all different. I agree that it’s wonderful to have a free open source tool. But there are many other developers using custom frameworks and doing far better front-end.

    Bootstrap is not good because it’s limited and make people confused with concepts that area real basic. It’s good if you don’t know much about HTML and CSS or if you don’t care about the web culture or basis of web development.

    Cheers!

    Miguel.

    • coffee_ninja

      When I wrote the comment I didn’t work here. But in your sleuthing if you had dug a little deeper and looked at any of my agency’s site’s source code, you’d see none of their projects (before me or after me) use Bootstrap.

      So whether they’re goor or bad, they aren’t so due to Bootstrap. A good carpenter doesn’t blame his tools.

  • Shailesh Vishnu Mankar

    Many developers are using bootstrap tool because it is fast and efficient . Though it makes website little bit slow but many follow it.
    I think in professional work we need to study bootstrap tool and how much CSS is required that much we can use and it will make website faster and code within it will be clean.

  • LectricLarry

    Horrible colors… HORRIBLE colors. Big blocks of horrible Colors. NO curves. No gradients. No creativity. No unique identity. Inane Kindergarten icons. No realization that we can create CREATE an aesthetically pleasing, Identifying web site without ^*^* Design. Whatever it’s called this day! It is insulting! Icchhhh.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.