Extending Bootstrap 5 classes for semantic HTML
When using Bootstrap 5, you can end up adding a lot of classes to your markup, which will make it hard to swap out the Bootstrap 5 styles with your own set of styles, should you wish to do that sometime in the future. Instead, you can choose to only use semantic HTML elements, while still using the Bootstrap 5 styling. Your HTML can have no classes at all or only the classes you choose (and the naming of these classes as well). So, the structure of the HTML and the (optional) classes can be anything you want.
To understand why this might be desirable, we will consider the Bootstrap 5 CSS rulesets as two different things:
- A set of styling rules (the CSS declaration blocks)
- A vocabulary for these styling rules (the selectors)
We want the benefits of the styling rules, but we don’t want to rely on its vocabulary, which is the specific Bootstrap 5 classes. We can achieve this by using semantic HTML on our page...
