Bootstrap Utilities: Highlighting text

Text can be highlighted (its background color being set to a light yellow) by applying the mark class or placing text within the mark tag (take a look at Figure 8.7):

<mark>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut veniam, quis nostrud exercitation ullamco laboris nisi commodo consequat.

</mark>

Figure 8.7: Highlighting text using the mark class

As with almost all the utility classes discussed here, the mark class itself is extremely simple and consists of only two rules. The first rule adjusts the padding to 0.2rem, while the second sets the background color of the element to #fcf8e3.

Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.

Leave a Reply

Your email address will not be published. Required fields are marked *