Bootstrap CSS class: text-success

Bootstrap color classes have provided developers with great ease. These classes are not just added by using the class name but also convey a meaning to the user, such as to show some error message, the “text-danger” class is used. Similarly, the “text-success” class can be utilized to display some success messages related to form submission or more.

This post will discuss:

• What is Bootstrap CSS Class “text-success”?
• How to Add the Bootstrap “text-success” Class to the HTML Element?

What is Bootstrap CSS Class “text-success”?

The “text-success” class applies green to the element’s text. This class is usually added to the elements having success messages, such as “Well done!”, “Success!”, “Good job!” and many more.

How to Add the Bootstrap “text-success” Class to the HTML Element?

Let’s add the “text-success” class to the HTML “<p>” element in our web page:

• First, add the “<div>” element having “rect”, “m-auto”, “align-items-center”, and “justify-content-center” classes.
• Inside this “<div>” element, add the “<p>” tag to specify some text. This tag is added with the “font-weight-bold” and “text-success” classes.

Here is the HTML code:

It can be observed that the green color has been successfully applied to the paragraph element:

Now, let’s add some CSS to style the “<div>” having a “rect” class.

Style “rect” Class

The following discussed properties are applied to the class “rect”:

• “background-color” changes the element’s background color.
• “width” and “height” are utilized to set the area of the element.
• “border-radius” property gives the element’s edges a rounded appearance.
• “border” adds the border around all the element’s edges.
• “box-shadow” adds a shadow effect to the element.

Style “p” Element

The paragraph element is styled as follows:

Here:

• “font-size” adjusts the font size.
• “letter-spacing” is utilized to add spaces between the letters.

Output

This is how you can use the Bootstrap “text-success” class in your website or web app.

Conclusion

To represent the success message in our application, the Bootstrap “text-success” class is utilized. This class provides the text with the “#28a745” (bright green) color. To utilize it, add the “text-success” class to the HTML element to which you want to add the green color. This write-up has explained the Bootstrap “text-success” class with the help of examples.