DEV Community

Cover image for To use or not to use Bootstrap Framework?
Creative Tim
Creative Tim

Posted on • Originally published at creative-tim.com

To use or not to use Bootstrap Framework?

This article sums up the pros and cons of using Bootstrap framework. Although Bootstrap seems to be the most popular HTML, CSS and JS framework for responsive development, some love it and some hate it.

Why USE Bootstrap Framework

1 - Saves time and is easy to use

Using Bootstrap, you can save a lot of time. You don’t have to spend time writing code, you can just use the Bootstrap predefined design templates and classes and put it exactly where they fit. That’s why it’s simple to use Bootstrap. If you have the basic working knowledge of HTML and CSS, you can start development with Bootstrap.

2 - Customizable

An advantage of Bootstrap is that it offers many ways to be customized so that you can make it your own. You can pick and choose what is needed and toss what is not. Bootstrap can be adjusted exactly as you want it and as your project requires. This is simply accomplished using the Bootstrap customize page.

3 - Great grid system

Creating page layouts needs a good grid. Bootstrap has this benefit: one of the best responsive, mobile grid system. It’s really easy to use and if you need to work through columns, then you’re in the right place using Bootstrap. Very handy when you want to hide some content based on screen size. Adding a class such as .visible-desktop to an element will make it visible only for desktop users. There are similar classes for tablets and phones.

4 - Consistency

The problem that Bootstrap solved from the beginning was inconsistencies between designers and developers working on their projects. This is one of the main reasons Bootstrap came to be what it is: a central set of development code that solves the issues between the development front and the end-user front. Bootstrap’s results are uniform for every platform, it looks the same on all browser(Internet Explorer, Chrome, Firefox).
Bootstrap started out as a project developed by a few employees at Twitter. They were trying to develop a framework that will encourage consistency. Mark Otto, one of the team members an co-founder of Bootstrap later realized it had a huge potential, well beyond the usage as an internal tool. On its quest to pair designers with developers, Bootstrap had been made open-source since August 2011. The framework was a huge success at Twitter and it is a huge success outside of it too. The bottom line it that Bootstrap ensures consistency regardless of who’s working on the project.

5 - Responsiveness
The need to have a responsive website is very important. Creating mobile-ready websites is a breeze with Bootstrap thanks to the fluid grid layout that dynamically adjusts to the proper screen resolution. If you shift from a laptop to an iPad, you won’t have to worry about your work. Bootstrap adapts to the change in platforms.

6 - Compatibility
Bootstrap is compatible with all modern browsers and Internet Explorer versions. Bootstrap is equipped with elements that are being considered the future of design itself. For example, both HTML5 and CSS3 are things that are going to be big in the future. Plugins like HTML5Shiv and Respond.js come as part of Bootstrap’s default template. These help in porting HTML5 elements into older non-HTML5 browsers.

7 - Documentation
Another advantage of Bootstrap is that it gives impressive documentation, examples, and demos that will make it easier to use for someone new. In this way, you can save time because you don’t have to play with everything to learn how to use it. Everything is in the documentation.

8 - Open-source

One of the main reasons to use Bootstrap is the fact that it’s an open-source project, hosted on Github. You don’t have to deal with purchasing and licensing issues and it gives you the freedom to change it how you want it.

Why NOT USE Bootstrap framework

1 - All sites look alike

” Let’s be honest: a great many of us are tired of seeing the same old Twitter Bootstrap theme again and again. Black header, giant hero, rounded blue buttons, Helvetica Neue. Yes, you can customize the header to be a different colour, maybe re-colour some of the buttons, use a different font. Ultimately, however, that doesn’t change anything—it still looks like Bootstrap.”

Bootstrap is popular and easy to use, therefore everyone is using it. Even if it’s customizable, giving you the chance to make it your own, not everyone does that. The result will be a number of websites that look more alike than they should.

2 - It’s good for startups that can’t afford a designer

“This is one of the more bizarre issues; the fear that as frameworks like Bootstrap give presentation power to the web developers, the web designer/front-end developer role will become obsolete. Bootstrap is great and all, but it shouldn’t be confused with a theme. There are plenty of Bootstrap themes out there of course, which are no doubt built by web designers.”

3 - Sass support
Bootstrap is built with LESS and doesn’t provide native support for Compass or SASS. LESS is ok, but a lot of people are feeling uncomfortable due to their addiction to SAAS. Although it may be a big ‘NO’ for some people, others have thoughts of workarounds, creating Sass Bootstrap and a Bootstrap for Compass gem.

4 - It’s incredibly heavy
Bootstrap will help you to build an attractive, responsive website, but some mobile users could be turned away by the slow loading time and battery drain issues. Bootstrap comes with a lot of lines of CSS and JS, which is a good thing, but also a bad thing because of the bad internet connection. And there’s also the problem with the server that will take all the heat for using such a heavy framework.

5 - Limited JavaScript components
You may not be a big fan of Javascript, but when it is needed in a project, it must be used. The problem with this is that Bootstrap’s plugins are limiting a lot of possibilities. Many developers are complaining about the Javascript components, especially the Tooltip plugin, that doesn’t have an IE fallback for some features.
As we can see it happening with other modern tools, Bootstrap doesn’t provide fallbacks for non-JS users. If you want to add this, you have to do it on your own. To get a bigger picture and insights into the are of non-JS usage, you can have a look here “ How many users have JavaScript disabled?”. Roughly around 1-2% of users have JS disabled as a default. We would recommend at least adding a message for non-JS users if you don’t have the time to add CSS-fallbacks.

Are you a fan of Bootstrap framework? We’d love to know your opinion.
Also, you can download the best Bootstrap Themes and Templates developed by Creative Tim here!

Top comments (6)

Collapse
 
workingwebsites profile image
Lisa Armstrong

I like it because it's a starter kit.

It's great for backend UI, you have something that looks good that you didn't have to spend a lot of time on.

For front end the advantage is you don't need to reinvent the wheel. Responsive grids, tables etc are all there. Yes, you'll be changing it so it doesn't look like Bootstrap, but your time is spent on branding, not functionality.

Collapse
 
steelwolf180 profile image
Max Ong Zong Bao

It think using bootstrap when you have something very simple or MVP but once you move towards more customised usage. It makes much more sense to use a Vue, React, Angular.

Collapse
 
highcenburg profile image
Vicente G. Reyes

I think bootstrap is for those who are new to web development and want to simplify their development.

Collapse
 
theonlybeardedbeast profile image
TheOnlyBeardedBeast

Most of the time I face the problem that it is just useless, it usually takes the same amount of time to create a custom styled component and restyling the bootstrap one. The second issue is just it is too much so many features we don't need, so we always ended up purging the unused css... What I mostly like when the designer ignores any grid like composition, so I cant even use the grid. I mean Bootstrap was helpful in times we used floats a lot, no more manual clear fixes etc, but even that wasn't that hard.

Collapse
 
arthtyagi profile image
Arth

To use :)

Collapse
 
askeridos profile image
Adam AUTUORI

Bootstrap might be useful to create functional prototypes, MVPs, or even backends because it don't need SEO optimization.
You can even make full-Grid/Flexbox websites.