Bootstrap 4 | Colors
Text Colors: Bootstrap provides many classes to set the text color of an element. All classes of text colors are listed below:
Example: This example uses text color class to set the color of text content.
html
<!DOCTYPE html><html lang="en"><head> <title>Bootstrap Color Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script></head><body> <div class="container"> <h2>Bootstrap Colors List</h2> <ul> <li class="text-muted">.text-muted class</li> <li class="text-primary">.text-primary class</li> <li class="text-success">.text-success class</li> <li class="text-info">.text-info class</li> <li class="text-warning">.text-warning class</li> <li class="text-danger">.text-danger class</li> <li class="text-secondary">.text-secondary class</li> <li class="text-white">.text-white class</li> <li class="text-dark">.text-dark class</li> <li class="text-body">.text-body class</li> <li class="text-light">.text-light class</li> </ul> </div></body></html> |
Output: 
Background Colors: Bootstrap provides many classes to set the background color of an element. All classes of background colors are listed below:
Example: This example uses background-color class to set the background color of content.
html
<!DOCTYPE html><html lang="en"><head> <title>Bootstrap Background Color Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script></head><body> <div class="container"> <h2>Bootstrap Background Colors List</h2> <ul> <li class="bg-primary">.bg-primary class</li> <li class="bg-white">.bg-white class</li> <li class="bg-success">.bg-success class</li> <li class="bg-info">.bg-info class</li> <li class="bg-warning">.bg-warning class</li> <li class="bg-muted">.bg-muted class</li> <li class="bg-danger">.bg-danger class</li> <li class="bg-secondary">.bg-secondary class</li> <li class="bg-dark">.bg-dark class</li> <li class="bg-light">.bg-light class</li> </ul> </div></body></html> |
Output:
Bootstrap Background Colors List
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...