HTML & CSS Got the Job Done… But Bootstrap 5 Did It Faster

Introduction to Bootstrap5

When we first started learning HTML and CSS, it seemed pretty easy. I had no trouble understanding the basics, and I especially remember working on the Browser History assignment; it was straightforward but time-consuming. The hardest part was adjusting margins, sizing, and formatting to make everything look right. Even though it took a while, I felt confident using HTML and CSS on their own. Then came Bootstrap 5. At first, I thought it would make web design even easier, but I quickly realized that learning Bootstrap was harder than I expected. It was a completely different way of styling webpages, and figuring out how to use the classes correctly took time. However, as I kept using it, I started to understand its power and how much time it could save me.

HTML and CSS

When I first started recreating homepages with just HTML and CSS, I didn’t find it too difficult. The basic structure of a webpage made sense to me, and I enjoyed putting everything together. However, some things took longer than I expected:

1. Margins and Sizing Were Tricky Getting elements to line up exactly how I wanted was frustrating at times. I had to manually adjust margin and padding values, test different sizes, and tweak things repeatedly before they looked right.

2. Formatting Required A Lot of Trial and Error I could style everything exactly how I wanted, but it took a lot of small adjustments. For example, if I changed the size of one element, I often had to go back and fix other parts of the page to keep everything balanced. Even though it was time-consuming, I felt like I had full control over my designs.

That’s why, when I first started with Bootstrap 5, I didn’t expect it to be difficult…but I was wrong.

Starting with Bootstrap5

When I started learning Bootstrap 5, I thought it would be as easy as HTML and CSS. Instead, it was confusing at first.

1. Too Many New Classes to Learn Bootstrap relies on pre-made classes instead of writing your own CSS. At first, I had trouble remembering which classes to use. Should I use col-md-6 or col-lg-4? What does container-fluid do? There were so many options that it felt overwhelming.

2. Less Control at First Since Bootstrap applies default styles, I didn’t always know why things looked the way they did. Sometimes, I would add a Bootstrap class and it wouldn’t work the way I expected. I had to spend time reading the documentation and testing different classes to get the results I wanted.

3. Grid System Confusion Bootstrap’s grid system was one of the hardest things for me to understand at first. Instead of manually setting widths and positions, I had to use columns and rows. While this made layouts more responsive, it took me time to get used to letting Bootstrap handle the layout instead of doing everything myself.

Even though it was difficult, I kept practicing. Eventually, I started to see the benefits of Bootstrap 5.

My Experience in Bootstrap5

At first, Bootstrap 5 was difficult to learn, and I struggled with all the different classes and how they worked. But after playing around with it for a little bit, I started to get the hang of it. I realized that, once I understood how Bootstrap worked, it actually made coding certain things much easier.

One of the biggest improvements was how quickly I could create layouts and responsive designs. Instead of manually adjusting widths and writing media queries, I could just use Bootstrap’s grid system, and it would automatically adjust for different screen sizes.

For example, I used to spend a lot of time positioning elements and making sure everything lined up correctly. With Bootstrap, I could write something like this:

  <div class="container">
    <div class="row">
      <div class="col-md-6">Left Column</div>
    <div class="col-md-6">Right Column</div>
      </div>
  </div>

This simple code would create a two-column layout that adjusted perfectly on different screen sizes. Before, I would have had to write extra CSS to get the same effect.

I also realized that Bootstrap’s pre-styled components saved me a lot of time. Instead of designing and styling every button from scratch, I could just use Bootstrap’s built-in classes:

<button class="btn btn-primary">Click Me</button>

Final Thoughts

At first, Bootstrap 5 was confusing, and I had a hard time understanding how to use it. But after spending some time with it, I realized that it actually made coding easier. It saved me time by providing pre-made layouts, responsive features, and styled components that I didn’t have to create from scratch.

Even though HTML and CSS are still important, Bootstrap helps speed up the process and makes building websites more efficient. Now that I’ve learned how to use it, I can see why so many developers rely on it. While it took some practice, I’m glad I learned Bootstrap 5, and I plan to keep using it in the future.

Recreation With Bootstrap5

Left: Original homepage | Right: My recreation using Bootstrap 5

I used AI to help organize my ideas, check grammar, and improve readability, but the content is based on my own experience learning Bootstrap 5.