Bootstrap vs Boilerplate
WHAT IS BOOTSTRAP?
Bootstrap is a free, open-source front-end framework. It’s the most famous and powerful front-end framework for web projects today. It was born at Twitter as a responsive solution with standard elements that help developers create mobile-first, front-end interfaces quickly and intelligently.
Originally called Twitter “Blueprint,” it was in fact a library. The team at Twitter created it for internal company tasks and to standardize UI components, but after receiving positive feedback from their colleagues, Mark Otto and Jacob Thornton decided to make the project public and open-source by putting the Bootstrap code on GitHub. That was four years ago and since then, there have been over 11,777 commits to its official repository (based on its GitHub bio).
The most recent major version of Bootstrap is Bootstrap 4, and one of its most useful basic templates is called Jumbotron:
Jumbotron is a very popular starting template for Bootstrap. It includes a few basic elements: a simple navigation menu, the extra attention block, and Jumbotron’s popular 3–3–3 columns grid system with headers, texts, and buttons; and of course, a footer.
New Bootstrap templates have been added over time, including this template that’s ideal for creating a blog:
To describe the full list of Bootstrap features would take too long — learn more in this site. For the sake of comparison, we’ll stick to its main purpose and a few defining features.
Here’s the main file structure of Bootstrap:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
├── img/
│ ├── glyphicons-halflings.png
│ ├── glyphicons-halflings-white.png
└── README.md
You can easily delete some files if you use Bootstrap “as is.” There’s no reason to include a non-minified version of CSS and JavaScript; using a full version is only necessary for a deep rebuild of code. So, bootstrap.css, bootstrap.js and readme.md may be excluded or deleted. Also, Bootstrap is very popular and a lot of public CDNs share it for free, like MaxCDN or CDNJS.
WHAT IS HTML5 BOILERPLATE?
HTML5 Boilerplate (sometimes called H5BP) is a front-end template based on HTML5. This is the biggest differentiator from Bootstrap — it’s a template, not a framework. Boilerplate is, according to its author, “a package of useful contraptions, hacks, and cross-browser libraries.” While Bootstrap contains strong rules for each element of an interface, Boilerplate is more geared to help you with a fast and smart launch of your new project. H5BP is not about rules; it’s about a quick start.
With jQuery, no-js, CSS classes, project folder structure, and web server configurations for Apache and Nginx allow gzip compressingand 404 page functionality. The most recent major version is HTML5 Boilerplate 5.
Like Bootstrap, HTML5 Boilerplate is shared by MIT’s open-source license. The project was launched by a team of developers and is now supported and developed by a large community on GitHub.
Some other basic features of H5BP:
- It’s totally HTML5 ready. Use all of HTML5’s new elements with confidence
- It’s designed with progressive enhancement in mind
- It includes:
- Normalize.css for CSS normalizations and common bug fixes
- jQuery via CDN, with a local fallback
- A custom build of Modernizr for feature detection that enables better compliance with HTML5
- Apache Server Configs that, among other things, improve a website’s performance and security
- Placeholder CSS Media Queries
- Useful CSS helper classes
- Default print styles
- Performance optimized
- An optimized version of the Google Universal Analytics snippet
- Protection against any stray console statements causing JavaScript errors in older browsers
- “Delete-key friendly” — it’s easy to strip out parts you don’t need
- Extensive inline and accompanying documentation
WHY BOOTSTRAP?
If you’re developing a mid-sized project, Bootstrap’s speed and united design of all elements will be a great plus. Also, Bootstrap provides you with a powerful and mobile-first grid system. You can specify a visibility or size for each block on every kind of device: desktop, tablet, or mobile.
<div class=”container”><div class=”row”><div class=”col-xs-12 col-md-6 hidden-xs”>I love Upwork!</div></div></div>
Bootstrap is especially great for internal interfaces like admin panels of websites or intranets for companies. But without themes, Bootstrap doesn’t look very modern — you’ll need to use a service like Bootswatch, which offers 16 free themes that allow you change the design of main Bootstrap elements like a buttons, input fields, or colors.
WHY HTML5 BOILERPLATE?
If you need a quick start for a smaller project, that’s the main advantage of H5BP. In five minutes, you’ll have a template up and running for future development. Your eventual project may evolve a great deal down the line, with very little original H5BP left, but it’s a great jumping off point. To get started, clone H5BP from GitHub to a local machine and you’re ready to go!
Why NOT Bootstrap?
After years of working with Bootstrap, I saw code like this many times:
<div><a href="#" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-delete">Cancel</a><h1>My App</h1><button class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check">Save</button></div>
This is code for just two buttons, but with a lot of CSS classes. The excessive number of classes can make code unreadable and very hard to work on.
Why NOT HTML5 Boilerplate?
H5BP is just a template with some tools built in. While it’s good for small or intermediate-sized projects, more serious development projects shouldn’t rely on prepackaged configurations for web servers or CSS rules. All things must be coded and configured from scratch.
IS IT POSSIBLE TO USE BOILERPLATE AND BOOTSTRAP TOGETHER?
So, we’ve established that Bootstrap and HTML5 Boilerplate are not the same products. Did you know that you you can merge them together in one package? It’s easy and fast to do using Initializr, a step-by-step wizard that allows you to tune up a new project from scratch. You can save a lot of hours with Initializr because it generates a ready-to-use customized template with modules that you choose.
What Can You Customize with Initializr?
For pre-configuration, just select which kind of Initializr package you need and click the “Download it!” button.
Classic H5BP Initializr
This version doesn’t have a template (visual parts), but includes Modernizr and jQuery, some CSS hacks for better cross-browser compatibility, and old IE fixes. Also, it has a lot of small tools like an included Google Analytics code, .htaccess code, etc.
Responsive Initializr
A step up from the Classic Initializr, Responsive Initializr includes a responsive template. It’s a good way to start making a responsive website if you’d rather not use Bootstrap, and it includes Modernizr and jQuery, too.
Bootstrap Initializr
Similar to Responsive Initializr, this version has Bootstrap classes instead of basic @media responsive classes. It’s a great option for Bootstrap lovers.
SO, WHICH IS BETTER?
My answer? Both of them together. We can’t actually compare front-end frameworks with templates since they’re not the same products, but H5BP has a lot of nice tools and Bootstrap is incredibly popular and loved by developers around the world. Use them together and you’ll get the best of both worlds for your project.
