What is Bootstrap
If you haven't heard about Bootstrap and you've been building websites within the last 3 years you must be working and living in a hole. Bootstrap is a responsive, mobile first, website building frame work that allows you to quickly develop website layouts using a consistent set of internal tools. It was originally built by Twitter and called Twitter Blueprint, and it was renamed Bootstrap and open sourced in 2011. Over the last few years there have been releases of Bootstrap and at the time of this Bootstrap 4 is on its way.
Bootstrap is basically two things: A set of css stylings, and a set of Javascript components that use JQuery. Most people stumble across it because it offers a responsive grid solution allowing a site to resize gracefully independent of the screen size and device displaying the site. In short, people use it because it makes their websites look good on a phone, tablet or desktop.
Aside from its fantastic grid system it also includes many re-usable components that are common HTML elements used in webdesign. Things like drop downs, nav bars, pagination, labels and such are all included in Bootstrap. Additional functionality like carousels, dialogue boxes, alerts, Modals and such are included as well. All of these features come in the form of a css file and a js file that you just need to reference in your HTML page. In a sentence, Bootstrap is a library of commonly used web site elements all together and standardized, making it super easy to drop in and start building a website without having to start from scratch.
Why should I care
There has been a rash of Javascript libraries that have cropped up the last few years and Bootstrap was one of the first to show up. Is it possible to build websites without Bootstrap? Absolutely! So why should you care about Bootstrap? Well, it is good for a couple of reasons: it can speed up your site layout development, offers more default coverage of HTML elements, and includes stuff you probably wouldn't think about otherwise. It also offers alot of cross browser compatibility for responsiveness a other HTML elements. It is also consistent and well maintained. There are lots of reasons you should care - and maybe a few reasons you shouldn't care.
Pros of Bootstrap
Speed of Development
Once you learn Bootstrap converting a layout to code is fast and easy. Bootstrap comes with well defined classes that make it simple to use them when you need them. Say you need a navigation bar for your site - it's already in Bootstrap. You need a modal pop up window - already there. You need button and search bar styles - there. What about responsive grid system for responsive layout - of course! Isn't that why you are using Bootstrap in the first place!? All of the conveniences of Bootstrap come with the burden of initially learning them, which can be a pain (which is why it is a con listed below). But once you learn the class names, and how it works, Bootstrap can make putting together layouts fast and fun.
Full Featured
Like stated above, Bootstrap is full of well defined classes and is feature packed. If you need a widget or plug in for a site, chances are there is a Bootstrap integration. Everything from Modal windows, buttons, carousel - you name it, it's probably been created for Bootstrap. Bootstrap makes many of the default stylings of things look better by default. Inputs, buttons, alerts all look better with Bootstrap. Bootstrap just has better defaults.
Maintained Codebase
Bootstrap is popular, and as a result it is constantly being updated and extended. Also since it is maintained it is constantly being tested against new browsers and technologies which make it an even better solution when looking for a tried and tested layout system.
Relatively Small Code Footprint
In this case you get a lot for a little. There are many features coded and ready to go in Bootstrap. There are even utilities out there that allow you to configure your version of Bootstrap to leave out any classes and features you don't need. http://getbootstrap.com/customize/. Bootstrap is also very popular so if you use a cdn to push your Bootstrap files it is possible to take advantage of browser caching.
Cons of Bootstrap
Learning Curve
Learning Bootstrap is easy - but you still have to learn it to use it. Out of the box you'll need to learn the available classes in the Bootstrap CSS as well as the ways the Bootstrap components access those classes. The grid system takes some testing and time to get comfortable with. Bootstrap does have pretty great documentation and examples so if you need help getting started there are lots of resources. Once you've gotten used to it though, you should have little issue dealing with the newer versions of the code base as they are released. Bootstrap is also so popular that if you switch jobs and they use Bootstrap you should be able to dive into the project without having to figure out what is going on with their custom CSS.
Relatively Large Code Footprint
There is a lot of stuff in Bootstrap by default. If you don't take advantage of the Bootstrap defaults then you are just including a bunch of CSS that you aren't going to use. This can wreak havoc with you styles if they are being written and then re-declared elsewhere. If you use Bootstrap in its default setup you are including 250 Glyphicons, Dropdowns, Button Groups, Input Groups, Navs, Navbars, Breadcrumbs, Pagination, Labels, badges, Carousel/Jumbotron, Page headers, Thumbnails, Alerts, Progress bars, media objects, list group, panels, embeds, wells and more. If you don't plan on using many of these elements then those are just unused selectors and code loading into memory for no reason. Another issue is that IE 8 and versions before actually cap out a 4095 CSS selectors and Bootstrap has that almost by default - it is possible to run into issues where your CSS breaks on older versions because you have too many CSS selectors.
It is just CSS
Sure Bootstrap has its JS file and code for widgets and such, but at the end of the day Bootstrap is mostly a packaged CSS file with commonly used CSS selectors. If you can write CSS fast, and you prefer naming things you will recognize then it doesn't make sense to include this large library. You can build websites without Bootstrap easily and Bootstrap can add bloat to a site that just isn't needed. For newer designers it makes sense to use Bootstrap - you don't have projects to pull code from and using Bootstrap can offer many good classes and stylings that might be difficult to code if you've never come across them before (like styling inputs / tables / etc). For experience web designers, who have their own defaults and prefer a much more concise approach to site CSS then a huge framework can be a burden that isn't worth the bloat. It took me a long time to use Bootstrap because any time I needed to do something it was just easier for me to write something from scratch. It wasn't until I was forced into it by a project that I actually set down and made the commitment.
It is overused
It is everywhere. The Hamburger Menu. Everything look the same!!!!! Bootstrap is a victim of its own success. Until Bootstrap the Hamburger Menu wasn't a thing. Now it is everywhere. Once people make the investment to learn it, then it become their default for building sites because it is so fast. So will Bootstrap become the Nickelback of the online CSS Frameworks? I don't know. But this website, it reminds me, of what it really is - and its' not like it said "sorry" for looking like a different story ... okay I'm done. Bootstrap is overused, because it is good.
You still have to customize your CSS
It looks like Bootstrap by default, and unless you want it to look like every other website you will still need to add custom CSS. If you are going to have to write CSS anyways then why use Bootstrap? That is a good argument if you don't know Bootstrap since you can just style your elements and be done without having to look up and learn the names of all of the Bootstrap elements. But if you know Bootstrap then you'll be able to quickly get in there and overwrite what you need to but still have all the other stuff by default.
You Just Don't Need it
You've got one website, why do you need Bootstrap? Your CSS works, it looks good, it's responsive, you aren't building anything else - just maintaining your current site. You don't need Bootstrap and that is okay!
Who needs to Learn and Use Bootstrap
- Web Designer without a job (it is popular and needed for many web jobs)
- Web Designer who designs lots of sites (for speed and ease of use)
- Web Developer who implements lots of sites (speed / use / lot of common features)
Who doesn't Need to Learn or Use Bootstrap
- Web Designer with a job (that doesn't require it)
- Web Designer with one site that works (overkill for one site especially if it was built before 2011)
- Web Designer / Developer that doesn't need many features for their website
