Bootstrap, Bootcamp: A Journey into UI Frameworks
27 Feb 2025
(left image: web page using plain HTML, right image: same web page using Bootstrap 5)
Analogy
Baking a cake from scratch requires gathering specific ingredients, following detailed procedures, and using the right techniques to produce a high-quality result. However, using cake flour sold at supermarkets simplest the process, requiring fewer ingredients, less time, and fewer steps while still producing a good cake. Similarly, building a webpage with plain HTML and CSS can be time-consuming and complex requiring software developers to write extensive code. UI frameworks like Bootstrap acts like the cake flower, they provide prebuilt designs and styles allowing the process of creating a web page more efficient for developers.
Benefits of UI Frameworks
UI frameworks are designed to provide pre-built components making web development faster and more efficient for software developers. They help shorten code, improve readability and maintain consistency, across other web pages. One of the biggest advantages is cross-browser compatibility which ensures a web page to look well structured and works properly on different browsers and devices.
Bootstrap 5, a UI framework, offers software developers a collection of pre-built features such as navigation bars, links, buttons, grid systems, search bar, textbox, forms, icons, and much more. Developers can use Bootstrap’s built-in classes to avoid manually coding layouts and complex CSS rules.
For example, instead of setting up different sections one at a time for a navigation bar, developers can use a few class names from Bootstrap 5 for the same results.
Disadvantages of UI Frameworks
Since UI frameworks provide pre-built components, they have only a limited amount of design features meaning that the flexibility is not too great. This would limit the developer’s ability to customize certain areas if they are going for a unique layout. This also means that many web pages look the same, a navigation bar holding the web page name, links, search bars, a footer on the bottom containing a company’s contact information and subscription.
Another drawback is poor performance rate due to file sizes taking up more space. UI frameworks come with a full library of their features which may take up unnecessary space if some part of it is not needed. It’s inconvenient to wait for the full library to load when you are just trying to run a small project. With bigger projects, the loading time would be longer.
One of the biggest challenges is learning the syntax, design patterns, conventions, and structure. It feels just as hard as learning a new programming language. You can’t really use a UI framework if you don’t know what to code and not understand how to use it. It takes a lot of time to learn, practice, and to get in the habit and familiarity of it.
Personal Experience
As a beginner in HTML, I found formatting a web page challenging, especially when working with margins and layouts. Manually styling and aligning each section through plain HTML and CSS became tedious. When I recreated the same webpage but using Bootstrap 5, I noticed improvement in efficiency and readability though it required a little effort understanding how the features worked. The built in rows and columns classes allowed me to structure the three paragraphs into columns more easily since it eliminated the need to adjust the margins in a separate CSS file.
The images attached show my attempt in creating a webpage using plain HTML and another using Bootstrap 5. In the Bootstrap 5 version, the columns are aligned more neatly with the introduction paragraph compared to the plain HTML version. Zooming in and out of the web page also affected the margins in the plain HTML version compared to Bootstrap 5 version where it did not. Using Bootstrap’s grid system made it easier to visualize the layout within my code and helped me understand how the content is structured on the web page.