What Are the Pros and Cons of Using Bootstrap in Web Development?

Is a CSS Framework Like Bootstrap Even Necessary?

If you are new to CSS frameworks, you are probably wondering what the benefits are of using Bootstrap in your project. Prior to using Bootstrap, I used a boilerplate I wrote myself that consisted of a reset, basic grid, typography, utilities, and media queries. Below are the benefits I have experienced from now using Bootstrap for my projects.

Pros of Using Bootstrap CSS in Your Project

Helps You Save Time

I admit I was the worst at documenting my own work. I would use my boilerplate on a project and then want to make an update to it a month later. But by then, I totally forgot my naming convention. So I would have to spend time reading my code to try to understand what I did. If I couldn’t figure it out, I would add new code and leave the old code alone to prevent breaking something. Yup, sound the code bloat alarm.

Documentation is a love letter that you write to your future self.

― Damian Conway, Perl Programmer

Bootstrap has amazing documentation on each component. So if I want to update a project I worked on a few months ago that uses Bootstrap I know where to go to find documentation if I get stuck. Also, the more I use Bootstrap the more it is burned into my brain and the less time is spent searching the docs.

Helps You Avoid Cross-browser Bugs

Prior to using Bootstrap I would get the dreaded emails from clients saying their website they just paid me for doesn’t look good on X device. And of course, it is a device I do not currently own or have access to. After hours or searching on Google you finally find a fix on Stack Overflow. You find comfort knowing it is a common problem with Android devices and not something you caused. Clients assume you know how to fix everything.

A large number of contributors helps improve the framework over time.

Being an open source project, anyone can submit browser bugs and code fixes. This is an extremely valuable asset to a developer because you gain confidence knowing your code has been improved by a community to address common browser bugs. No matter how good you are, there is no way you can be aware of every browser inconsistency and the fix necessary.

Helps You Follow Best Practices

I studied graphic design in college and self-taught myself HTML & CSS from books, YouTube, and blog posts. This mixture of knowledge worked to some degree but I know there are a lot of knowledge gaps. I hit my lack of understanding head-on when I first learned Bootstrap with all of the new terminology written for software engineers.

Bootstrap is not just a framework but a methodology of best practices for front-end design.

Gather a room full of the smartest web designers and developers in a room and let them discuss at length what they think is the best way to write CSS and to organize a project. The result being a distilled version of best practices agreed upon by a large collection of your peers.

Helps You Avoid jQuery Plugin Soup

I know some JavaScript but writing a full-fledged plugin is out of my reach. So I often collected various jQuery plugins into a project to achieve the look and functionality I was looking for.

But I often ran into the following problems:

• Plugins would not work across browsers
• Plugin CSS styles would conflict with other CSS styles
• Plugins would be dependent on different versions of jQuery

Bootstrap contains a collection of jQuery components that you know are stable on modern browsers compatible and works with your jQuery version. Also, the styling matches all of the other components in the your project.

Helps You Get a Job

Bootstrap has 73% of the design framework market share as of May 2017. This popularity correlates to the demand for people to know the framework to either update existing systems and or create new ones.

So this will make you more marketable to prospective employers. Indeed.com, a popular job search engine, shows Bootstrap has a lot of job postings compared to other CSS frameworks.

After Bootstrap 3 was released in August 2013 there was an increase in job postings thereafter. I believe we will see a similar spike when v4 is released. Source:indeed.com

Source: BuiltWith as of May, 2017

Cons of Using Bootstrap CSS in Your Project

Can Require a Lot of Style Overrides

If you are not compiling the source SASS files, you will often find yourself using Chrome’s DevTools inspect tool to find the default style properties. You will then have to override these styles in a new stylesheet. This creates some code redundancy causing your site to load slower. The best approach is to compile your own version of Bootstrap with the source files because you can eliminate the redundancy and hide or delete any code your project is not using.

Without Style Customization Your Sites Will Look the Same

Since Bootstrap is a collection of components it has a consistent visual style so things look cohesive. If you use Bootstrap in a project and do very little customization, your sites will often look too much like the default Bootstrap styles. This just means you will need to do some work on your part to push the design further into something unique.

A Slight Learning Curve to Learn the Classes and Workflow

Bootstrap is a way of doing things and could possibly be a whole mental shift for you. I know for me, working mobile first has been a challenge because you have to force yourself to design, develop, and test mobile first. In addition, there are a lot of component classes and class combinations that you have to learn the order of things. The use of a Bootstrap cheat sheet and a Bootstrap class reference help to make this task easier.

Summary

When your time is billable, every minute you shave off will greatly improve your bottom line. Plus it makes development more fun because you are not declaring redundant CSS properties.

I hope I have shown you how Bootstrap can save you time and make you a better developer in the process. In addition, you will be following industry best practices vetted by an open source community.

Now that you know the history and benefits of using Bootstrap let’s dive into what’s new in version 4.

There are many different ways you can use Bootstrap and they have different pros and cons. Below is a table to help make the selection process easier.

The Different Ways to Use Bootstrap in Your Project