Many of you might have already used Bootstrap to design some of your application layouts. If so, you likely did so based on a recommendation from a peer — indeed, the community is strong with Bootstrap. If you’re new to Bootstrap, or if you’re looking to better understand Bootstrap and why it’s so popular, then read on.
What is Bootstrap?
Bootstrap is a an HTML and CSS framework, built with the primary purpose of simplifying the creation of HTML layouts using a standard set of global CSS styles. Its core intention is to help you structure your base HTML & CSS so that it is efficient, effective, and HTML5 compliant. It was first built by the development team at Twitter, to help improve and abstract the design frameworks used on their products. Later, it was released as an open source project (twitter-bootstrap), and soon after it was rebranded as the independent project we know and love today: Bootstrap.
Should I use Bootstrap?
There are many different motivations for why you should (and shouldn’t) use Bootstrap. Here are some considerations:
- It’s easy to install: Bootstrap can be installed either as a stand-alone CSS file, or if you use a web framework such as Ruby on Rails, as a gem
- It supports complex layouts: Bootstrap makes it pretty simple to setup navigation bars, sidebars, grids, and much more
- It includes standard styles: Just by importing Bootstrap, your entire site will immediately be styled up for you
- It’s fat: Bootstrap ships with a ton of CSS by default. It is a huge package, and it is likely a lot more than what you need for a simple layout
- It includes standard styles: This is a con because if you don’t add your own styles on top of Bootstrap, your site looks like a no-effort template (a.k.a. the ‘Scaffold’ look)
- It can be confusing to use: Understanding bootstrap and its layout system is no trivial task. It definitely takes some getting used to, and often things don’t work as expected at first, requiring debugging and potentially being a significant time sink.
- Its documentation isn’t great: While the docs are definitely thorough, I often find it difficult to navigate them simply because there are so many different sections. Bootstrap is huge, and so understanding it requires investment.
The major alternative to Bootstrap: Zurb’s Foundation. The intent behind Foundation is to be simpler than Bootstrap; its goal is to give you the absolute essentials that you need to get your layouts done, and none of the cruft. As such, it’s a much smaller set of documentation to peruse, the styles are much more conservative (and thus are less likely to be identified as a “Foundation” look n feel; they are too simple).
Foundation also targets responsive design (which means building for other platforms such as mobile first) by default, whereas with Bootstrap you have to go out of your way to enable it.
- Bootstrap Themes: For a quick way to get up and running with some snazzy unique Bootstrap layouts, there are a great set of themes and templates over at Start Bootstrap and PrepBootstrap, which are all built off of Bootstrap. I’m sure there are many more if you do some Googling.
- Shoelace Visual Builder: If you feel a little overwhelmed starting a new layout from scratch, you should definitely check out a tool called Shoelace. It helps you visually construct (just by clicking in the preview diagram) a layout and gives you the resulting HTML. The tool is designed for Bootstrap, so it will generate HTML for you that is compatible with Bootstrap’s layout structures.
- Bootstrap Grids Explained: If you’re looking to better understand how Bootstraps layout structures (e.g. the Grid system) works, check out this article which breaks down the subtle magic behind Bootstrap’s grid system. It’s a bit advanced reading, but it is interesting to learn how it’s actually done, in case you ever wanted to build a similar layout yourself by hand (or if you just want to appreciate the work that Bootstrap is saving you!).
I hope you found this breakdown useful, and that you now have a slightly better understanding of Bootstrap, and its place in the world of web development. Bootstrap is a great tool that helps simplify the task of building your HTML layouts, and it provides some great starter CSS. However, it should be seen as a base, and built on top of to customize your apps. In other words, you should use it as a tool to help enhance your site, but don’t let it become your site.
I leave you with this riveting performance by the man who calls himself The Unipiper. Enjoy: