You've done an excellent job exposing what utter garbage bootcrap is with these examples. Endless pointless DIV for nothing, endless pointless classes for nothing, DIV doing ARTICLE's job, DIV doing CITE's job, DIV doing BLOCKQUOTE's job, presentational classes like text-center dragging coding practices back to the worst of 1997... it's hardly a shock you ended up with 2.4k (once formatted) of markup doing likely not even 1k'sjob.

Going with all the other bootstrap rubbish like a lack of a media target on the stylesheet embed. That's not your fault, you've just been taken for a ride by bootstrap. A system MADE by people unqualified to write a single blasted line of HTML or CSS.

Here's a pen to show just how much simpler, easier, and better it is to find a stick to scrape the bootcrap off with.

https://codepen.io/jason-knight/pen/WNZNmba

Quite literally where you have 2.4k of non-semantic gibberish markup laden with div and classes for nothing, I've done the same thing with semantic tags, one class, and less than 1k of code. Even if we count the stuff we have to declare in the CSS to do it this way, it's STILL smaller since you've got 874 bytes of CSS atop the train wreck of framework garbage, when you should only have needed 731 bytes of CSS to do ALL of it... without the framework.

And this scales upwards. Hence why EVERY claim you are told about these frameworks is a BALD FACED LIE. You are being lied to any time someone says these steaming dung heaps like bootstrap, pure, tailwind, etc are somehow magically "easier", "simpler", or "better". Simple fact is the people telling you that do not know enough about HTML, CSS, or what the web even is to be flapping their yaps on the topic.

Don't let these know-nothings with their media darling frameworks sucker you with bad practices, convoluted broken outdated methodologies, and how they all just plain flip the bird at what HTML and CSS are even for.