About This Author
 | Wren Mahler Joined: January 26th, 2021 |
Arts, Business, Computers, Finance, Games, Health, Home, Internet, News, Other, Reference, Shopping, Society, Sports
In this tutorial, I am going to show you examples of built-in Bootstrap color classes for various elements. Generally, the class names use the context that may reflect the purpose of the text or some other element. For example, as using the red colored text or button, the class name contains the word “-danger” reflecting some dangerous or critical information or action. Similarly, -warning is the orange color for the context where you are alarming a visitor for certain action. These names are preceded by element’s names or shortcodes. For example, text- for text, btn- for buttons, bg- for backgrounds. In the last section, you can also see an example of setting navbar colors. Similarly, you may use the background color standard classes for setting the background of various elements. The following example shows using the contextual background color classes in paragraphs, div and different headings (h1-h6) elements. Along with background color, the contextual text color classes are also used. Until now, you can see the pattern of coloring in Bootstrap. Similarly, replace the “text” by “bg” for setting the background colors. The buttons can also be colored in the same way in Bootstrap. Just replace the “text” or “bg” in above classes by “btn” and the same standard colors will be applied to buttons. Learn more about the Bootstrap 4 buttons with 15 examples. Just like backlink service , backgrounds, and buttons standard built-in classes, the pattern that can be used for coloring the list items is similar. If you want to color the links by using Bootstrap classes then simply assign the contextual text classes to the tags. You may also use the background and text color classes in the table as well. In the following example, the background color is set at the table level that applies to the whole table. The color of the text is also set by using text contextual class. Besides, the table header is given a separate background and text color. You may use the background color classes for setting the background of navbar in Bootstrap 4. For that, simply use the background class in the tag containing your navigation bar.
| Wren Mahler Joined: January 26th, 2021 |
