While developing any application, developers prefer to use attractive colors to gain the user’s attention. It also assists in setting the theme of a web page appropriately. For instance, to show some positive or successful response, the green color is used, the blue color indicates some information, the red color indicates some negative or failure messages, and the yellow color is utilized to represent some warnings or precautions.
This write-up will guide about:
What is Bootstrap Text Warning Color?
The Bootstrap “text-warning” class applies the “#ffc107” color to the text, which is a yellow color. This class is generally used to specify a message that shows some warnings.
How to Use Bootstrap Text Warning Color?
Now, we will demonstrate the usage of the “text-warning” class with the help of the following examples:
- Example 1: Create a Warning Button With Bootstrap Text Warning Color
- Example 2: Display a Warning Message With Bootstrap Text Warning Color
Example 1: Create a Warning Button With Bootstrap Text Warning Color
Open up your HTML file and follow the given instructions:
- Create a card by using the Bootstrap “card” class.
- Then, add a card header using the “card-header” class.
- Then, adjust the card body by specifying the “card-body” class.
- Inside the “<div>” class “card-body”, include the “<p>” element to display some text.
- Lastly, create two buttons using the class “btn” class.
- Lastly, the “text-warning” class is used to display the text in yellow color.
Here is the HTML code:
<h5 class="card-header">Members Management</h5>
<div class="card-body">
<p class="card-text">Are you sure you want to remove @f233 member?</p>
<button href="#" class="btn btn-dark">Cancel</button>
<button href="#" class="btn font-weight-bold btn-dark text-warning">Remove </button>
</div>
</div>
It can be observed that the Bootstrap text warning color has been successfully applied to the button caption:
Example 2: Display a Warning Message With Bootstrap Text Warning Color
This example uses the “text-warning” class to show a warning message:
<div class="card-header">
<h5 class="text-warning">Warning!</h5>
</div>
<div class="card-body">
<p class="card-text">There was a network connection problem!</p>
</div>
</div>
Here:
- “w-50” class adjusts the card’s width.
- “m-auto” determines an equal margin around the element.
Output
You have successfully learned the Bootstrap text-warning color with code examples.
Conclusion
In web designing, the yellow color is mostly used to display caution messages. More specifically, the “text-warning” class is utilized to set the yellow text color. In the Bootstrap.css file, it is set with the color property having value “#ffc107” (yellow) color. This post has explained the Bootstrap “text-warning” color with code examples.
