Whats the benefit of UI Frameworks? Bootstrap 5 and beyond!
03 Jul 2025UI Frameworks
UI (User Interface) frameworks are something that is relatively new to me. Previous to taking software engineering, I had little to no experience with HTML or CSS. I had only been dealing with UI in the way that terminals displayed prompts and output. Evidently, I was very excited to jump into designing something that had more aesthetic value, and made the experience simpler for the user. Jumping into HTML and CSS proved exciting, though I quickly realized how much work goes into the design of even a simple button or forum. As I move towards building projects that require multiple pages, it means a mess of duplicated work and elements, in order to maintain consistency. Beginning to use Bootstrap 5 changes everything.
Benefits of UI Frameworks
UI frameworks like bootstrap 5 were created to help programmers manage the complexity that comes with large and real world projects. Some of the benefits I have discovered in my introduction to Bootstrap5:
1) consistency
Bootstrap has a set of default rules that are designed to not only work well together, but also to be visually aesthetic for the user. This feature will save me time spent on recreating components, and gives a good baseline to improve the aesthetic of my sites.
2) classes
Bootstrap has a 12 column grid system that makes it easy to build websites that work for various screen sizes, which is important for real world programming. Features that allow me to choose how much of the screen an element fills will save me time testing the transfer from a computer to a phone to a tablet screen. Chat GPT helped me discover and implement classes like col-md-6 into my code to control the visibility and sizing of visual elements.
3) reusability
Bootstrap provides components useful for code that work right off the bat. I found using elements like nav-bar in my site design saved me time and unnecessary coding. These elements are designed to be functional and accessible to the user, and leads to a better UI design with less work. Rather than spending hours trying to figure out how to code a navigation bar or dropdown, I was able to implement the bootstrap version quickly, while preserving the functionality and aesthetic of my page.
Compared to other UI Frameworks
Whilst I have little current experience working with UI Frameworks, I have researched Semantic UI for this essay. Semantic UI seems more approachable, with class names that are easier to read for people. This no doubt makes it an easier UI Framework to learn for beginners. Semantic also has a slightly different aesthetic than Bootstrap, so it may appeal more to a specific audience. The main difference outside of the class names is the development. I found in my research that Semantic’s development has slowed down recently, while Bootstrap stays more up to date by using CSS variables.
Why use a UI Framework at all?
This is a valid question, and honestly from what I can tell, you can. Using raw HTML and CSS might be useful for programmers who have the time and initiative in which hand coding everything is better. This would probably work best for smaller sites, or interfaces you want to be highly customizable. The issue with raw coding HTML and CSS over using a UI Framework like Bootstrap 5 comes when you need to update your site, or demonstrate consistent elements across it. UI frameworks were designed to help programmers build faster and smarter UI’s. While it is in the end a personal design choice to move away from a UI Framework, they do provide a good infrastructure for front end designing.
Final Thoughts :
Learning how to code a practical, efficient, and aesthetic UI is an important skill for all programmers to have. Front end development is what clients and users will see, so arguably it is the most important element to master. UI Frameworks help to speed up programming while maintaining the levels of usefulness and visual elements for the user. Learning a UI framework can be difficult, as can learning any code, but in the end it pays off. The difference between UI Frameworks seems to come down to aesthetic preferences, level of programmer, and how well maintained the programs are. I would say that since Bootstrap 5 is well maintained, it is a good investment to master, as it continues to carry into evolving codescapes.
Comparison:
Below are two versions of the same website. The first is blonded.co, a website not built using bootstrap 5, but shopify. The second is my recreation of this website, using bootstrap 5. As you can see, the version created with bootstrap offers a clean version of the original website, offering the same features and functionality, with consistent elements such as a mailing list, product listing, and navigation bar.
The Use of AI:
I used ChatGPT while writing this essay to learn more about Semantic UI and confirm the functions offered by Bootstrap 5. All writing and content are my personal thoughts and views which reflect my work in this class and module.