A deep dive into Bootstrap
Sometimes to change your opinion, you have to force yourself to look at things differently, and research.
I’m going to be the first to admit it: I do not personally like Bootstrap. I dislike their UI elements, the aesthetic, and everything to do with working with a developer who wants it because of the above. I find the design to be incredibly outdated, and when a site uses Bootstrap, I feel like you can tell immediately. Even though I may not like it, I am but a small voice. It certainly has no impact on their progress — they’ve just released their version 5 beta, which already does seem more interesting than the previous versions.
I recognize that this is a shallow bias, but I’ve never had a good experience using it in the past, and I’ve challenged myself to see the good in the framework because biases are insidious. Come join me on my research adventure into the positives of Bootstrap.
1. If you like Material Design, Bootstrap still has you covered
I must admit, every time I see that you can use Material Design with Bootstrap, I’m surprised. I continually forget that you can, because initially, I think that it doesn’t make sense to wrap another design style on a design style. Then I remember that there’s a lot more that goes into a framework than simple UI elements — it’s how they function with each other in the code as well, and a lot more technical stuff that I don’t feel qualified to describe.
As far as I understand it, because Material Design is open-source, it means that other frameworks, developers, and companies can create templates, functionality, and other such features based on Material Design. MDB isn’t just a direct copy of Material Design with Bootstrap underneath, the design is still unique. It just follows patterns and guidelines of Material Design. Things like:
- Capitalized buttons
- Shadows and elevation
- Ripple animations
- Form field animation
- Tabs and other grouped elements
Just because the framework is well established, it doesn’t mean that you have to compromise on more modern design techniques. I like this because I have templates that I use that are based on Material Design, and with a few small tweaks, I can make it Bootstrap-friendly. In addition to that, both I and the developers can have clear expectations of what the design is supposed to look like in development.
2. Bootstrap works with vanilla JS, Angular, Vue, and React
Because Bootstrap works with a lot of different variations of JS, it isn’t limited to just one skillset. If you prefer to work in Vue or React because it’s what you feel most comfortable in, you don’t suddenly have to get used to vanilla JavaScript again. Because Bootstrap became open-source so long ago, there are a bunch of different resources where the framework was rewritten to be compatible with all of these other methodologies.
The one flaw that is unfortunately very difficult to plan for is which version the rewrites support — in the case of react-bootstrap, it supports Bootstrap 4.6, despite version 5 being released this past February. This isn’t the biggest drawback, as just because a new version has been released, it doesn’t mean that the older versions have immediately become deprecated. It just means there happens to be a newer version to work with. Unless a rewrite has become deprecated, it’s still likely that it too will receive an update for the newer version.
This is less of a plus as a designer and more of a plus for developers, because as I stated above, if you’re used to working in a particular style, Bootstrap is still accessible to you. As a designer, the one positive of this is that all of the older documentation is still available to you.
3. There a lot of predesigned elements already available for designers
It can be hard switching between different frameworks — it seems like each one has a different shadow style, different button requirements, and don’t even get me started on the margin between elements in the navbars. Despite how complicated it can get, there are a bunch of resources out there — and a lot of them for Bootstrap, too. If you’re like me who’s created their own style guides and design libraries based on Material Design, switching to a new style can be difficult and it can be hard to change all of what you’ve learned. I did a quick search to see what was out there for Bootstrap design resources, and I found quite a bit right off the bat:
- Bootstrap documentation
- Bootstrap 4 resources for XD
- Bootstrap 5 resources for XD
- Bootstrap for Figma
- Bootstrap 4 for Figma
- bootstrap-sketch (v4)
While customizability is still going to be required, as a starting point, you can use a design resource file so you don’t have to create everything from scratch, and then use the framework’s documentation to understand how you can customize it more as needed. Another plus is that if you’re like me and have created your own design resources, it is still possible that these can be easily modified to suit the styles of Bootstrap.
4. The documentation provides a lot of options for breakpoints, containers, and columns
From mobile up and to large desktop sizes, Bootstrap provides you with many breakpoints to work with. Not only that, but they’re also customizable using the Sass files in the event that you know you need to modify them.
The documentation clearly outlines how the size of different containers works depending on the modifier they’re given, which is helpful not just for the developer, but for me as a designer. To have that granular of details is incredible because it means I can reference the documentation, label my elements similar to the documentation, give my prototype to the developer, and there’s a lot less confusion of what they’re supposed to do with this awkwardly sized container.
Bootstrap works on a 12-column layout, which is similar to Material Design making it easier to work with mentally. There isn’t a lot of confusion between working with the columns between one design system and another, this way. The one really interesting thing that Bootstrap seems to have that I haven’t experienced personally in Material Design is the ability to describe, using classes, how the columns are to react depending on the screen size. As a basic example, this means that with the addition of these classes, you can describe that you want the column to extend 100% of the width on mobile, but only 50% on desktop.
5. Overall, the documentation is well written
I’m a sucker for good documentation. Working examples, a lot of description, charts, tables and images are all the key to my heart when it comes to documentation. And I’ve got to give it to the creators of Bootstrap, they did a good job of breaking up their documentation into manageable pieces.
What I find really interesting that I can’t remember seeing in other documentation is that they have a specific section on helpers and utilities. I find this really interesting because I personally don’t have a lot of experience working with them — I find that a lot of times I don’t need to, so I don’t go out of my way to look for it. The fact that they have it easily accessible tells me they thought it through and made a dedicated effort to provide as much information as possible. It also means that if I get a chance to read through it, in the future I may be able to help my team to recommend using one of these utilities or helpers if they aren’t sure what to use to solve a particular problem.
I think, in conclusion, there’s a lot of good to Bootstrap, even if I don’t like the overall aesthetic of it. There are enough ways to customize the design to make it look unique if you take the time and effort to do so, as long as you work within the functional constraints. I don’t think Bootstrap will ever be my go-to, but doing this deep dive has helped me to see the value that Bootstrap provides. If nothing else, this should prove that doing your research is probably the most important thing you can do. You can’t be unbiased without being armed with knowledge.
