Pulling Yourself Up By Your Bootstrap5

The phrase “Pull yourself up by your bootstraps” originated as a phrase meaning that something is impossible. This is relevant because creating a webpage and managing my HTML code seemed to be a daunting task. Thanks to UI Frameworks, such as Bootstrap5, the task is more manageable and achievable. I have learned a lot in the HTML and CSS module of my Software Engineering course. I previously was so confused when looking at HTML code because I had no idea what I was looking at. I am sure many people can relate to this sentiment because HTML code requires a lot of nested statements. For example let us take a look at the code block below:

<div class="row justify-content-center pt-4">
    <div class="col-1">
      <div class="dropdown">
        <div class="dropdown-toggle">
          Men
        </div>
      </div>
    </div>
    <div class="col-1">
      <div class="dropdown">
        <div class="dropdown-toggle">
          Women
        </div>
      </div>
    </div>

We can see how messy HTML code can get in this simple dropdown menu. Here we can see that many divs are needed in order to separate the menu items accordingly. This is just a component of the IslandSnow website and the full code is a little harder to trace. It can be a big issue when de-bugging your code. This is because it can be easy to skip lines because so many of the lines look so similar.

Bootstrap5 doesn’t necessarily help with the readability of the code but when writing the code it helps a lot with the layout of the webpage. Placing webpage components on the page itself is fairly straight forward. The grid system that Bootstrap5 uses is very easy to use and allows for easy formatting such as justify-content as well as d-flex.

Bootstrap5 also allows the user to develop components easier and faster. For example when creating the navbar using Bootstrap5 elements it was very straight forward and Bootstrap5 offers a lot of different element styles to choose from. The navbar could be composed of dropdown menus or icons. The Bootstrap5 icons were really easy to use and implement. I did not even need to download image files to my device, I simply needed to link the bootstrap5 utilities.

Overall UI Frameworks are also very adaptable. We saw in class that we could repurpose our imitations of websites and transform them into completely new pages. Many of the UI elements were maintained and slightly changed. Most of changes that needed to be made were in the CSS stylesheet and we could just repurpose navbars, footers, image statements and change the links and text throughout the page. Although learning UI frameworks can be confusing and almost as difficult as learning a new coding language, it feels very useful and the skills can carryover to many projects. I personally am not in love with HTML code as it can be a headache to work with and become very messy if you’re working on something complex and intricate. But after learning about Bootstrap5 and working with HTML code I will admit I am a lot less intimidated by it and feel as if I could master it if necessary.