Strap in for Bootstrap!
21 Feb 2024
That looks delicious
I love food. I could spend hours just watching short clips of businesses promoting their dishes of crispy pork belly, or a beautifully presented sushi roll, or maybe even that juicy smash burger that’s been trending on Instagram for a while now. Yet when you bite into that burger, do you think of where the patty or buns came from? I know I don’t. It’s interesting to think for a second how that burger got there, but we don’t think too deeply about it. We just slap the components of that burger together and we don’t want to go through all the trouble of raising the cow or harvesting the wheat for our bread—we just want our delicious burger. Likewise with UI Frameworks, we just want our nice looking webpage, and our UI Frameworks are our premade components that enable us to do so. Of course, UI Frameworks aren’t perfect; there are some things we need to consider.
The Bad News of Bootstrap 5
As an assignment for ICS314, we were tasked with rebuilding a webpage from scratch with a UI Framework, Bootstrap 5. Prior to that assignment, we had several days to get comfortable using Bootstrap. Was it easy to rebuild a pre-existing webpage? No, it was not. I was very fortunate since I had built strong fundamental skills in HTML and CSS in high school, so being able to build a webpage with solely those two was not as bad as it could have been, but using Bootstrap (or frameworks for that matter) was very new to me. Honestly, using just Bootstrap to rebuild a webpage led to a webpage that was not very aesthetically pleasing nor similar. Sure, it had the icon and buttons in both the top left and right respectively, but they were not in the exact spots as they were on their original webpage. As a result, I relied on CSS for very specific modifications, such as positioning, color, and sizing. Bootstrap 5 doesn’t support certain percentages to such measurements, typically allowing only 0%, 25%, 50%, and 100% relative measurements for the aforementioned modifications of the positioning and size of objects. It will not solve all your problems, granted, that was the only real issue I had with Bootstrap.
The Good News of Bootstrap 5
There are a lot more positives to using a framework than there are negatives. The most prominent benefit of using Bootstrap that I noticed was that it allows you to write CONSIDERABLY LESS code. While I still ended up using my stylesheet for multiple elements, there were many things that Bootstrap allowed me to do that would take me hours to implement with pure HTML and CSS. Yes, it may take a fair amount of time learning Bootstrap 5 and the “know hows,” and perhaps a bit of frustration but once you get over the hill, the experience becomes great. Even though I had a simple sentence to say for the good news, that benefit can not be emphasized enough. Especially since we know the excruciatingly long time it takes to implement everything in HTML and CSS directly. There are less intricacies to micromanage and one can see the satisfyingly quick results of Bootstrap.
Final Thoughts
While Bootstrap 5 is the only UI Framework I have experience with (as of right now), I can confidently say that UI Frameworks are incredibly powerful tools that can make development much faster and easier. Honestly at some points, the conveniences that UI Frameworks provides can seem as though they were magic. However, one should not rely fully on UI Frameworks. Rather, the use of UI Frameworks (in this case Bootstrap 5) with raw HTML and CSS complement each other nicely. Below are photos of the previously mentioned assignment where we had to rebuild a webpage completely. Can you tell which one is mine?
Spoiler alert: Mine is the one on the left, though you could probably tell given enough time. If I were to use only Bootstrap, it would probably be much easier to tell which one is the replica, but since I used HTML and CSS together, I was able to create something much closer to the original. There you have it, UI Frameworks are incredible (and perhaps that’s an understatement), but to be able to create something even better you’ll need a solid balance of both.