Learning Bootstrap 5 has been quite a shift from working with raw HTML and CSS. One of the first things that struck me about Bootstrap 5 is the built in components are very useful since these components are commonly shared among many websites. Things like navbars, buttons, and forms are already pre-designed and ready to be implemented. It makes it easier to start building a site without having to reinvent the wheel every time I need a navigation bar or a basic input from the user.
That being said, one of the biggest challenges for me has been figuring out how to organize and assemble all of these components on the page. This is because a lot of things happen behind the scenes on a webpage and are not immediately visible without inspecting the page elements using developer tools. This challenge is especially noticeable when nesting components like divs inside containers; it is very tricky to visualize how all of the pieces fit together, and it is still something I am trying to wrap my head around.
<div class="container">
<div class="row">
<div class="col-3">
One of three columns
</div>
<div class="col-3">
Two of three columns
</div>
<div class="col-6">
Three of three columns
</div>
</div>
</div>
In the above snippet of code, there are three columns organized within a row, which itself is nested within a basic container element. Without an intuitive understanding of how this will affect the page layout through extensive repitition, inspecting the page elements will become a useful tool in visualizing what normally stays invisible in a web application.
But that is not all. Another confusing aspect of Bootstrap is the sheer number of attributes and classes that Bootstrap has to offer. There are so many ways to tweak, align, and modify components and it feels overwhelming at times. In the snipped I shared earlier, each column has a sub-class denoted by the number after the hyphen which affects the size of each column relative to the full width of the page, which is just a small example of the degree of customization that can happen. There are things to keep in mind as well when aligning components, such as how they shift and realign themselves as the size of the browser window changes. It feels like there are endless ways to achieve very similar results, and it often reminds me of the gruesome saying, "there is more than one way to skin a cat".
Despite all of these hurdles, I believe the effort will pay off. Rather than building every element from scratch with raw HTML and CSS, the Bootstrap framework saves a lot of time by eliminating the need for repetitive customization. I can think of it as analogous to a manufacturing plant for cars. For example, it is much faster for a manufacturing plant to turn raw materials into a finished vehicle in comparison to a talented engineer buidling one in their garage with basic tools. The cost for achieving this heightened level of productivity, though, is the upfront time and (in the case for a plant) monetary investment in order to learn how to build the website using Bootstrap.