Boilerplate or Bootstrap?

Ivaylo Gerchev
Tweet

Beginning a new project is always associated with some repetitive work. And this is because most of our projects, at their starting point, share one and the same minimal code base, best practices and principles. We all know that “reinventing the wheel” every single time is not only superfluous, but also a quite boring job. For that reason there are tools that can help us in resolving this problem.

Boilerplate and Bootstrap are both extremely valuable tools when we need a starting foundation for our new projects. But the question is: which one to choose and which one is better for me and my project? It seems that many people are confused and embarrassed to give an adequate answer. That’s why, in this article, I’ll try to make things clear and help you to get the right decision for you.

The most obvious answer to the above question is: use what best suits your needs. But this is quite general advice and we need something more comprehensive and explanatory. Actually, in our case, we have not only two but four possibilities: we can use Boilerplate, we can use Bootstrap, we can use both of them or neither of them. To decide which option is best for you let me give you
a more detailed explanation.

1. Using Boilerplate

Boilerplate is a front-end kickstart template that contains a series of best practices and common inclusions. It offers a generic files/folders structure, HTML5-ready template and basic server-side global configurations. It’s like blueprint for your house, but without the building blocks. You have the idea what you’re going to build and you have made all preparation steps, but you don’t have the materials needed to actually build the house. You are free to include “the missing” HTML/CSS/JavaScript components from anywhere else, including from Bootstrap.

At first glance Boilerplate may seem a quite simple template, but in fact it gives you many benefits that can’t be seen immediately. Let’s check out some of them:

  • HTML5-ready template plus basic structure for your files and folders
  • Ready-to-use, performance optimized print styles
  • Cross-browser compatibility
  • Mobile browser optimizations
  • Progressive enhancement and graceful degradation
  • Best-practice server configurations
  • Optimal caching and compression rules
  • Optimized Google Analytics snippet code
  • and more…

You get all these goodies by default, without need of writing a single line of code. And here is the content of the default download:

  • css – a directory containing normalize.css, and main.css with Boilerplate’s defaults, common helpers, media queries, and print styles.
  • doc – a directory containing all Boilerplate’s documentation. You can use it as the location for your own project’s documentation.
  • img – an empty folder for your images
  • js – a directory containing main.js for your custom code and plugins.js containing the code for all your plugins. Also there are Modernizr and jQuery libraries placed in vendor subfolder.
  • .htaccess – default web server configurations for Apache. For other servers there is Server Configs repository.
  • 404.html – a very basic error page
  • apple touch icons
  • crossdomain.xml – a template for working with cross-domain requests.
  • favicon.ico
  • humans.txt – a file to include credits for you and your project.
  • index.html – default HTML5-ready template, the base of all pages on your web site.
  • robots.txt – a file to include any pages you want to be hidden from search engines.

From this point on, you can start building your web site just by adding your own code and the components you have chosen to use in your project.

2. Using Bootstrap

Bootstrap is a front-end framework and web design kit for building modern web sites. With Bootstrap you can build an entire web site from scratch. So it gives you not only a starting point, but also all the building blocks you may need to create your site. The Bootstrap’s download contains only files for CSS and JS components, plus an icon font. Eventually you can download also a basic template to get started with. There is no files/folders structure or any server-side configurations.

Benefits/Highlights:

  • Mobile-first approach
  • Browser compatibility
  • Accessibility
  • CSS grid system
  • Ready-to-use components and utilities
  • and more…

Components and utilities are listed below:

  • Grid – a utility for laying out your design
  • Icons – resolution independent icon set
  • CSS base styling classes
  • CSS components – styled HTML components
  • JS widgets – a nice set of interactive components
  • Starting templates and examples

As you can see Bootstrap provides all the components you can start using right now to build your web site.

3. Using Boilerplate plus Bootstrap

What about using both? No problem. This is completely possible and easy to accomplish. In case you need both, the Initializr project helps you to automatically integrate Boilerplate and Bootstrap. Using Initializr you can create a custom download combining all the good things in one package. You can use this option if you want to get the best of both worlds.

4. Using Your Own Boilerplate Solution

Some people don’t like products like Boilerplate and Bootstrap. Their arguments are that such tools have too many unnecessary things inside. If you think the same way then you must know you are not restricted to use anyone’s work. You can easily collect best practices for you and put them into your own kickstart package. This way you will get only what you need and nothing more.

The Verdict

The right choice depends on two things. First, you must know your goals, needs and project’s requirements. And second, you must know what each tool can offer you, its strengths and weaknesses. Obviously I can’t help you with the first one, but for the second I can give you a quick summary. Here are the main checkpoints:

  • You can’t build web site with Boilerplate – it’s only a starting point.
  • With the Bootstrap’s components and utilities you can build an entire web site from scratch.
  • Boilerplate is more server-side oriented – a good starting template if you work with server-side technologies such as PHP.
  • Bootstrap is a client-side solution – a complete toolkit for building client-side web sites.
  • Boilerplate is only a starting code base and you can add whatever components you need later on.
  • Bootstrap on the contrary has a full set of ready-to-use components that you can use right now.
  • You can combine Boilerplate with Bootstrap to get the best benefits of both.
  • You can create and use your own personalized boilerplate template including only what you need.

As my final words I would say that Boilerplate and Bootstrap are both wonderful tools and you have plenty of options how to use them.

I hope that this short article will help you to choose the best option for you.

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.

  • Anonymous

    I think the fact that Initializr incorporates both effectively eliminates any either/or argument. There’s not really any reason not to use both when a tool like this is so readily available, and regularly maintained by a third party.

    Boilerplate is your setup tool for server settings, which include so many small things that people take for granted but are a pain to program by hand for the uninitiated (especially in the htaccess file): the favicon, touch icons, IE conditional tags for extended compatibility (though this is waning in relevance as people move away from 7 and even 8), gzip compression, file caching, the list goes on.

    With that as the underpinning, then Boilerplate becomes your front-end tool and CSS baseline. You get all the benefits of both, and none of the drawbacks from lacking one set of tools or the other. Why would you not just use Initializr?

  • Anonymous

    I think people can get a lot of mileage with Bootstrap, but honestly, after having used it pretty extensively, I found that for large, highly customized projects, its actually more like Boilerplate than you say. Coincidentally, I just blogged about it today http://hello.taggartsoftware.com/2013/10/02/bootstrapped-up-with-nowhere-to-go/

    tl;dr – Bootstrap was good for getting a nice looking functional version off the ground, but when we really needed to get the design and functionality how we wanted it, we stopped trying to do everything through overrides, and just used it as scaffolding. The widgets went out he window as well as many of the core styles.

  • P.K. Hunt

    Having tried both Bootstrap and Foundation, we went with Foundation over time. Simple, cleaner, and we needn’t override (or strip) as wildly.

    Boilerplate is actually in a slightly different place. Their HTML5 base includes are made needless by Foundation or Bootstrap, but a lot of scaffolding stuff in Boilerplate is a very good reminder of things. But Boilerplate does not compete with Foundation or Bootstrap.

  • Anonymous

    Both of these libraries have a considerable download footprint. So if you want your site to be usable by people on a mobile connection, think carefully what you need and consider doing a custom build of the libraries including only the parts you need.

    • Anonymous

      Hello Mike,

      I was wondering if you might be able to ellaborate on that a little bit. I have been more of a back end guy for quite a while, and I have just recently been delving into front end/UI design/dev.

      When you say “download footprint”, I am assuming you do not mean the download size of the actual package (what you have to ftp to the server), but the “download footprint” regarding a page load. My understanding is that images are the cause of the majority of a page load’s “download footprint”.

      With Bootstrap you don’t even need to use images, as long as you stay away from buttons and what not. So your statement leaves me to believe that there might be other factors involved in the “download footprint”.

      I’m inexperienced with UI, but is it the large amount of css and js that is causing this “download footprint”? I understand that a lot of js logic can really slow down page load, but I wasn’t aware that it could also increase the “download footprint”.

      If you could edjimicate this unknowledged programmer, I would be very grateful :-p

  • Anonymous

    …or you could use WordPress ;-)

    • P.K. Hunt

      Even with WordPress, which is a CMS, you would need a proper bootstrap template unless you’re using one of the pre-designed themes. So your comment doesn’t really make sense.

  • Kalpesh Panchal

    Ivaylo, What an awesome job of mixing the both!
    I prefer frameworks with bootstraps.
    But you are totally right that the choice of any of this depends upon the needs and goal sets of business.
    Thanks for sharing.. :-)

    Regards.
    Kalpesh Panchal
    http://www.kalpeshpanchal.co.nf

    • Ivaylo Gerchev

      Thanks, Kalpesh :)

  • Anonymous

    I think this is an “apples to oranges” comparison. Boilerplate and Bootstrap are different tools and don’t address the same problem at all.

    Bootstrap is a framework. Boilerplate is a starter kit, so to speak.

    I can see if you want to compare Bootstrap to something like Gumby, PureCSS or Skeleton. But Boilerplate is closer to csszengarden than it is to Bootstrap, or any css/js framework.

    Sorry, but this article doesn’t make much sense to me, or at least the title and intro. I think the title should be “Bootstrap and Boilerplate”, because the current title implies that they are similar and one would pick one over the other.

    • Ben

      Im with @Jesse with this. This article doesn’t make sense. Two different tools. Solving different problems.

      Both can be used independently or together. This article just adds to the existing confusion, it doesn’t solve it.

      • Ivaylo Gerchev

        “Two different tools. Solving different problems.” – What is the problem here?
        If you have problem “A” – use tool “A”, if you have problem “B” – use tool “B”.
        The difference between Boilerplate and Bootstrap is not a problem at all!

        You yourself say “Both can be used independently or together.”

        I say exactly the same in my article.

        So, where is the confusion!?

    • Ivaylo Gerchev

      This is not comparison in terms of “confrontation” where the winner must be only one and you must “pick one over the other”. If it was, the title would be “Boilerplate vs Bootstrap”.

      This is comparison in terms of “juxtaposition” where there is no winner at all. It just explain the different options we have.

      It’s a fact, that Boilerplate is a template and Bootstrap is a framework and it’s clearly stated, but this fact doesn’t have to be a reason not to compare them. They are similar in terms of “starting foundation” and I explore them in exactly that meaning. It’s just a different point of view.

      Finally, Boilerplate or Bootstrap? is the question that many people are actually asking and that’s why it is used as a title for this article.

      P.S. What is wrong with the “apples to oranges” comparison? The options are the same – you can eat the apples, you can eat the oranges, you can eat both of them or neither of them. It’s so simple :)

      • Anonymous

        :-)

        I do understand what your saying, I am just trying to look out for the folks that do not understand these things.

        The word “or” means you are choosing between one thing and another thing: http://www.merriam-webster.com/dictionary/or

        And some of the wording and logic in the article can lead unexperienced folks to have a distorted view.

        I’ve been frequenting the a popular site’s PHP Developers group. Someone asked a question regarding preference of one PHP framework over another. Someone responded “I really like Smarty because that’s the one I’m used to” (Smarty is a template engine/system, not a framework).

        It made me cringe, and actually feel sorry for the person, because this is a networking site and potential employers are going to see that, when in reality there’s a good possibility he went to a resource he trusted and was mislead, unintentionally, but it still did the same damage. And he’s going to have to double his effort and time because eventually he’s going to have to unlearn/relearn what his understanding of a PHP framework is.

        Sitepoint is a great resource, has a great community, attracts real talent, and is known for it’s quality of content and books.

        If someone that really has no idea about any of this comes here in the hopes to learn, or clarify their understanding of something, then there could be misunderstanding.

        Hey, I could be looking into this too much, maybe most folks aren’t as specific as I am as to the true definition of a word or phrase. I could just be going all OCD over here :-p

        But I care about the new folks around here. I am completely self taught, and a lot of what I know was from reading articles from trusted sources, only to find out I had to put more effort into relearning a lot, and changing my thought process away from the incorrect way to the way that was better (I won’t say “right”), than the effort I put into learning the incorrect way to begin with.

        I’m just trying to be a good doobie :-)

        Please keep up the great content Ivaylo, I don’t think you’re a bad guy at all. I really love your writing style and how you present the information in easy to understand manner.

        As a wise man once said, “That’s all I got to say ’bout that.” :-)

        • Ivaylo Gerchev

          Hi Jesse,

          We can easily continue this discussion endlessly, but this is not in our readers’ interest. So this is the last thing I’ll say and will consider this dispute as closed.

          I do understand your care for the inexperienced readers and really appreciate it. You have my thumbs up for that. But we have to bear in mind the following:

          We, as authors or teachers, can only give guidance and directions to our readers, but we can’t think instead of them. People’s mind loves ready-to-use solutions. But, unfortunately, we can’t give such solutions. In our rapidly changing world, it’s quite possible something that is actual today to be outdated tomorrow. So, readers must rely mainly on their ability to think instead of blindly following recipes and formulas. Yes, we can advise them, but we can’t make decisions instead of them.

          I think that using this or that word is not so important here. The most important thing is how we interpret the words. Because one and the same sentence can be interpreted differently by different people. And who is responsible then? The author, the reader, the words… or maybe the destiny. We shouldn’t follow the single words, but actual meaning i.e. grasping the whole picture.

          About your example with the Smarty template engine, I’m completely agreed. But I don’t think that after reading my article people will consider Boilerplate as a framework, or Bootstrap as a template.

          I believe in the intelligence of the SitePoint’s readers and in their ability to think independently. But if they feel confused after reading this article they are always free to post a comment here and I’ll give them additional explanations.

          P.S. My responds to comments are not AGAINST anyone’s thoughts or opinion. They are FOR the truth.

          “Plato is dear to me, but dearer still is truth.”
          Aristotle

          Wish you all the best!
          Ivaylo

  • Andy

    I think that’s a little harsh. I’ve been asked 5 or 6 times which I use. Yes they *are* very different, but unless you have used both, or have read an article like this then the generally available guff / hype surrounding either gives the impression that they *can* be used for the same tasks. I think for those that have used neither framework, this article will answer quite a few questions. Maybe this article simply needed to define the difference between a template and a Framework, as that’s the real difference between these two…

    • Anonymous

      I quite agree – I found it very helpful

  • Pragnesh Karia

    I am not very much familiar with Boilerplate.
    I am using Bootstrap v 3.0 and it seems very good.
    Very useful Post..!!

  • Anonymous

    My intent is not to be harsh. I have no problem with the quality of the points made about each tool. I think this is a well written article, and the facts about each tool are accurate and very helpful to those that are not familiar with them.

    My observation is that the only things these tools have in common is that they are tools to help with web design (hence use html/css), they are part of the “In” crowd at the moment, and they both start with “B”.

    @Andy1: I truly am not trying to be rude, I’m just trying to convey my opinion, but if you’ve been asked 5 or 6 times which one you use, then the person asking that question has no idea what these tools are, they are just throwing around “Buzz” words. I think it’s up to more knowledgeable people like us to help those people understand what these tools are, rather than confuse the matter even more, as @Ben has noted.

    @Ivaylo: My comments were meant to be constructive criticism, not malicious. I do think the quality of writing in the article is excellent. I’ve been doing more writing myself lately and was commenting to myself on your style and clarity, trying to take notes and learn by example. But I really do think the title and comparisons are misleading, especially to those that are trying to move away from the “Buzz” word stage to the “what do these tools really do” stage.

  • Anonymous

    **Thumbs Up!**

  • Eoin Oliver

    Good article, I read it because I was thinking “bootstrap or boilerplate” like so many other people, and this article clarified what is wrong with that thinking. I don’t know why people are arguing about the title of the article in the comments, It made me read it, and is probably good for SEO. I assume people reading it is the point of the article, and good SEO helps people to read it.

  • Lee

    Being a web designer I’ve also been wondering this question myself. Yes, I agree that both Boilerplate and Bootstrap has its many advantages, but I think it all boils down to knowing and understanding the web user experience and providing the best solution to your clients and end-users before deciding on which tools to use. This is a helpful article though…many thanks :)