How do I Highlight Text in Bootstrap?

Bootstrap is a CSS framework that offers predefined classes to use with the HTML elements. In Bootstrap, there are many ways to decorate the text, such as underlining, overline, color marked, and many more. Highlighting the text refers to the style that makes the text prominent and stands out within a document.

This post will describe how to highlight text in Bootstrap.

How to Highlight Text in Bootstrap?

In Bootstrap, the “<mark>” element is utilized to highlight the text. This tag is defined with the “background-color” property with the value “#fcf8e3”.

See the example given below.

Example 1: Highlight Text Using “<mark> Element

Add the “<p>” tag in the HTML file and place the text that you want to highlight within the “<mark>” tag:

 
Output

Example 2: Change the “background-color” of the “<mark>” Element

We have seen how the “<mark>” element highlights the text. However, you can also use the “bg-*” class to set the color according to your need.

The below example uses the “bg-info” class to highlight the text in the blue color:

 
It can be observed that the added text has been successfully highlighted according to the specified class:

There are some other elements that are utilized to make the text stand out. These elements are listed below:

• • <strong>
  • <small>
  • <u>
  • <ins>
  • <del>
  • <s>
  • <em>

Check out the example that uses these elements with the “<p>” element:

 
Output

Example 3: Add Background Color to Highlight the Text

You can also use the “bg-*” class to highlight the text as demonstrated in the below example:

 
Here, the specified “bg-warning” class will apply the yellow background:

These are the ways to highlight the text in Bootstrap.

Conclusion

To highlight the text in Bootstrap, the “<mark>” element is utilized. This element applies the “#fcf8e3” color to the element’s background. Moreover, the Bootstrap “bg-*” class can also be used to highlight the text where “*” indicates the color that will be applied. This post has explained the ways of highlighting the text in Bootstrap.