To Bootstrap or not to Bootstrap?

Posted by liahwallace1 on January 18, 2017

As you may remember from my last blog post ;), I recently tried to make a personal website as my first solo web project. I feel good about my progress, but it is not done yet because I’ve been deep in OO Ruby world. While building my personal site, I first tried to building it all from scratch, but I changed my mind early on and switched to a Bootstrap framework. After doing a little more research, here are some pros and cons I’ve found about using Bootstrap that may be able to help you decide which path to take in the future. (This is not an exhaustive list - I’m sure I will find more pros and cons as I create more websites!)

PROS

1) It makes your website responsive without having to spend forever on @media queries. To me, this seems like the biggest pro by far. It means that building your website with Bootstrap will take way less time than building it from scratch.

2) Lots of templates and features if you aren’t a designer. If you are new to design like me, you may feel a little perplexed about where to start when you design your personal page. Bootstrap has a ton of easy to use CSS, Components and Javascript plugins that can help you design your site. They also have a bunch of starter templates available.

3) Bootstrap sites work in all modern browsers, so you don’t have to worry about this when making your site.

4) It is customizable! Bootstrap has a ton of features that are easy to use, but it is still your code to play with, so you can make it look however you want.

CONS

1) A lot of Bootstrap sites end up looking the same. I think this might be partially caused by trending design elements on the web, but it is true that if you are using their design elements for every site, there is a lot of overlap.

2) It is hard (likely not worth the trouble) to convert a working project to Bootstrap. If you are working in web development and start in the middle of a big project, it is going to be a nightmare to implement Bootstrap elements in an already built site. I ran into this after just building the beginning of my personal site and chose to start over!

3) It breaks with some best practices in coding. For example, many of the class names are not very descriptive, and the excessive layering of classes into your HTML elements makes the code hard to read and maintain. Someone more experienced than me put it, “Twitter Bootstrap also exacerbates progressive enhancement as presentation and interaction are no longer independent of content.” (1)

4) Twitter Bootstrap is heavy, which can negatively affect loading times in some areas. I have not run into this issue, but some others have complained that leading a bunch of CSS and Javascript that is not being used is a waste of resource loading time that could be a pain for mobile users or users in an area with a slow connection.

Just like most things in life, you have to pick the best method for your specific project! There is not a one size fits all option, and hopefully this info can help you make your choice.