While creating a prototype for a project (using Bootstrap), I added the Jumbotron component which is described as: “a lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site” and found that my background image wasn’t responsive at all.
According to Bootstrap, “you can modify the variables to your own custom values, or just use the mixins with their default values.”
An example of writing semantic code using Bootstrap is using @extend:
As written by Brad Borrow in the article Using Sass To Semantically @extend Bootstrap, he says that Bootstrap “makes it incredibly easy to write cluttered, non-semantic and non-reusable markup that will render correctly across all browsers.”
He goes on to explain what writing semantically means, “HTML documents are intended to be descriptive of their contents from an information hierarchy perspective. One should be able to read them and know what they are about, not how they will look.”