A lot of people consider Bootstrap to be a good framework, so good in fact that most businesses will use it as a foundation for any new project they start. But here’s something you might not hear every day: It’s not always a good foundation, and most people don’t realise this. I’ll show you where I’ve found Bootstrap to be useful and, using practical code samples, where it might fall short.
At my first job, after studying to be a graphic designer, I was responsible for a lot of little odds and ends. This included everything from designing banner ads to coding up landing pages in WordPress. I had to figure out how to do pretty much anything I was given in the best possible way, and in the shortest amount of time. So, naturally, if there was a tool that was able to make my job faster and simpler, I wanted to know about it.
It was at this time that there was a lot of talk about Bootstrap and how great this popular front-end component library was. I started tinkering with it but, because it was quite technically challenging, considering the skills I had at that point, I didn't get very far.
Fast forward a few years and I’m now working at a company that has built one of the biggest property portals in Russia: A product with its foundations firmly set in Bootstrap. I have levelled up on using the technology significantly and, since working on this product, I have come to realise that while Bootstrap has some really good features, especially for beginners, it also has a few flaws that can make using the library quite disruptive to the user’s workflow.
Now, I don’t mean to put you off using Bootstrap by mentioning this. Instead, I’m going to put down a very comfortable chair, smack in the middle, and use my experience to objectively explain what this technology is good for and when you should maybe consider another option. Why? Because the web development industry is a bit of black on this side, a bit of white on the other and a whole lot of grey in-between. I've found that having a holistic understanding of what you’re dealing with is the best way to make the right choice.
Bootstrap is incredibly easy to get to grips with and offers a lot of support
Let me start by acknowledging this: Bootstrap is a great springboard from which you can dive into understanding and working with more complex platforms and technologies. It helps you level up your skills fast and provides you with loads of tools to experiment with while you find your feet.
It provides users with clear documentation
If you have ever worked on a project built with Bootstrap you will find yourself constantly referring to the documentation on their website. I’ve had to do this so many times that my browser practically screams at me for not bookmarking the page. It’s impossible to remember everything that a front-end library, like Bootstrap can do, let alone how to do it – especially if you are working with multiple other libraries across other projects.
Bootstrap conveniently has all of their components well-documented in a_ clear and simple way that covers each component in detail. This means if a new team member with little to no Bootstrap experience joins the team, then they can feel right at home in the code. It allows them to hit the ground running and start adding new features without having to fully understand all of the site’s code.
With good documentation comes good support from the community that also uses Bootstrap. I personally love this aspect because it allows anyone who is already familiar with Bootstrap to step in and assist you with your code, without having to first understand your whole code base.
Fast prototyping makes it easy to get started
In addition to its great documentation, Bootstrap has made it incredibly simple to get going with its components.
Once, I needed to put together a proof of concept that looked good without having much time. Using Bootstrap, I was able to quickly and confidently put together a working prototype to present my ideas to others without starting everything from scratch.
All I did was follow the documentation to set up a Bootstrap project, and then it was as simple as placing the component HTML wherever I needed it and, voilà, I had a working component! Plug and play if you will. Granted, most projects will be much more complex and harder to put together, but, by using Bootstrap, the biggest time wasting tasks, like building components from scratch, have already been taken care of which allows you to focus more on the bigger picture.
The team at Bootstrap has resolved browser inconsistencies (mostly) and their open source code provides a great reference point for developers trying to do the same
The people at Bootstrap have gone through a lot of testing and bug fixing, meaning that the code that they provide is perfectly stable (and free!). This can provide a great reference point when needed.
For example, the front-end development world is full of memes about cross-browser issues, because for the largest part of history they were a very big concern. I’m looking at you Internet Explorer 6,7,8…
Now, those issues are far less frequent and far more obscure, which can make them very hard to fix. Because Bootstrap’s code is open source, and you can see exactly how they code their components, I have found that looking at their own website is a good method for seeing if their components have the same issue you are facing or not. If you find that the issue is not present on the Bootstrap website, they have most likely managed to solve it, so inspect the code and see how they did it.
Bootstrap is a big library, and that means it can be too slow or too bloated to use sometimes
While the factors I’ve discussed above are really useful, Bootstrap does come with a few downsides. It is not the most efficient library and using it can make tasks more complex than they need to be.
You have to use JQuery and this slows you down a lot
JQuery started off as a great JavaScript library, which simplified a lot of the more complex coding practices at the time.
As I was working with Bootstrap to make use of some of the more interactive components, I had to learn some JQuery basics. Opening a modal in Bootstrap, for example, requires you to initialise the component through JQuery. Or, if you want to make use of any of its callbacks to reposition the modal, Bootstrap documentation will point you to JQuery. It is also needed to make use of Bootstrap plugins, like modals, tooltips and popovers.
This couples JQuery pretty tightly with Bootstrap, meaning you can’t really go without it or you risk losing some of the library’s functionality.
The problem here is that JQuery is also very old, and packed with features most people either don’t know about or don’t ever use. Its popularity has also fallen tremendously throughout the years with newer frameworks, like React, Angular and Vue taking over.
Because the library has become so slow, it takes a long time to process changes. This means that using Bootstrap to do things, like the ones discussed below, is inefficient because of its inextricable link with JQuery. In these cases, figuring out how to write some simple JavaScript code makes performing these actions a lot quicker.
DOM traversing
Let’s say you have a button and you want to give it a disabled look and feel unless some user interaction occurs. In this case, you would need to dynamically add and remove a class name to change its styling. First, you would need to target that element with JavaScript. To target an element on the page by its ID or class name, you usually do something like this in JQuery:
$(‘.class-name or #id-name’).addClass(‘new-epic-class-name’);
Here’s how you do the same thing using plain JavaScript:
document.querySelectorAll(‘.class-name or #id-name’).classList.add(‘new-epic-class-name’);
Not that different, right? Instead of using the JQuery $ function name, you used document.querySelectorAll and, instead of addClass, you used classList.add. By making these simple changes, you added an epic class and avoided having to include the whole JQuery library in your project. This avoided adding more to download for your site users, which is great!
Dynamic styling
Taking it a step further, we can add styles to an element without using a predefined class. A typical JQuery example would look like this:
$(element).css(‘position’, ‘absolute’)
Here’s how you change the CSS style in plain JavaScript:
element.setAttribute("style", "position: absolute;");
Again, you didn’t need JQuery and your site became a little faster to load.
Basically, it’s always a good thing to avoid using code that the user doesn’t need to download out of a web application. Who wants something that they don’t need anyway? By opting to use Bootstrap, which automatically requires you to include JQuery, you are actually costing the users money by requiring them to use more of their data to download your site.
Trying to customise the code causes it to bloat unnecessarily
Building a proof of concept usually doesn’t have any budgets connected to it, so your first instinct is to quickly whip up something that roughly resembles the concept but that is still a working prototype. Choosing to use Bootstrap to this, however, might turn the process into a snowball.
It's completely understandable to want to use Bootstrap in this instance. Visually it looks good and has most of the basic components that you might need. It gets the job done quickly, and you go from idea to proof of concept faster. So, where’s the issue?
It’s in the fact that the final product needs to look vastly different from the quickly hacked together concept. You see, Bootstrap already has its own look and feel: It’s very basic but so iconic that you can immediately spot a Bootstrap site from a mile away.
Trying to make a Bootstrap site your own is like painting over old paint on a table that needs to be refurbished instead of sanding it down. This is not how you should refurbish furniture because it can get messy quickly and, in some cases, lead to all of your efforts being undone, like when the paint just peels off.
Let’s demonstrate this with a simple Bootstrap button, and modify it slightly by making the button bigger, tightening rounded corners, changing the hover effect and adding a bit of depth to it.
Notice anything beside the obvious visual changes? Probably not, but if you inspect the button element, you'll notice that I had to overwrite some of the previous CSS styles that set up Bootstrap’s button styles.
Essentially, all the tweaks I had made had already been defined by Bootstrap, so instead of giving the browser instruction to only use the new tweaks, it built up the button as defined by Bootstrap and then changed it to what I defined it to be. Unnecessary right?
While this is a simple example, and can be excused, more complicated components like modals or sliders are where it gets more problematic. This is because you will need to override many styles, which will leave you with double the amount of styles that you actually need, with half of them never being used. Overall, your component styles will become difficult to maintain and prone to introducing cross-browser errors.
So, why not just change the Bootstrap source code? Sure, but if you ever want to update your Bootstrap version you will probably run into issues trying to merge the old code with the new.
Since Bootstrap is open source, a better solution would be to look at the specific code you might need and simply copy and paste it into your own code. Now, you can customise it to your own liking without changing Bootstrap itself or overwriting existing code.
A lot more HTML is required
Building components in Bootstrap is done using HTML. The way Bootstrap creates some components requires more HTML than you would typically use to build the same basic functionality yourself.
Having to work with a lot more HTML isn’t inherently bad, but it does make these Bootstrap components increasingly fragile – just the slightest amount of human error could mess with them during implementation. For example, accidentally removing parts of the HTML in a component can still appear to be valid HTML but leave the component in a broken state that might have been previously coupled with some JavaScript functionality. Let's look at an example.
Dropdowns
When building anything for the web, you are almost guaranteed to need dropdowns, which is why Bootstrap has its own dropdown component. This component requires at least three HTML elements, together with some JavaScript to make it functional.
While the Bootstrap dropdown is fine to use in most cases, it has a major weakness when it comes to functioning on mobile devices. It does not translate well into a touch environment and disrupts user experience, which is not ideal for the growing mobile-first web.
Luckily there is an alternative: the native HTML dropdown. It has a beautiful way of handling these dropdown lists, with UI that users are already familiar with and it is perfectly optimised for mobile.
Here is an example of how you can create a dropdown that looks like Bootstrap’s but leverages the user experience of a native dropdown. It uses one HTML element and no JavaScript. You know what they say... less is more ;-)
The 'It Depends'
Bootstrap is definitely an incredible library that’s opened the door for a lot of developers. Through using it, it's been easier for them to empower themselves when it comes to creating products, instead of relying on the assistance of another developer. However, when you start using it for more complex work, it reveals itself as something more cumbersome that can take up more time than you're willing or able to spend. So, in closing, while it’s a liberating tool, it is not free from faults. You have to decide if it’s something that will work for you.
Lourens comes with a wide variety of skills, stretching from being a qualified graphic designer to hand-crafting code for the biggest sites in South Africa and Russia. Over the years, he has cultivated a mindset that strives to produce work of the highest quality, from concept all the way to coding hybrid apps.
