English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Bootstrap 4 Provided some representative color classes: .text-muted .text-primary, .text-success, .text-info .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script> </head> <body> <div class="container"> <h2>Representing text colors with specific meanings/h2> <p class="text-muted">Soft text.</p> <p class="text-primary">Important text.</p> <p class="text-success">Text representing successful execution.</p> <p class="text-info">Text representing some tips.</p> <p class="text-warning">Warning text.</p> <p class="text-danger">Dangerous operation text.</p> <p class="text-secondary">Subtitle.</p> <p class="text-dark">Dark gray text.</p> <p class="text-light">Light gray text (not clear on white background).</p> <p class="text-white">White text (not clear on white background).</p> </div> </body> </html>Test and See ‹/›
Use in links
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script> </head> <body> <div class="container"> <h2>Text color/h2> <p>Mouse over the link.</p> <a href="#" class="text-muted">Soft link.</a> <a href="#" class="text-primary">Main link.</a> <a href="#" class="text-success">Successful link.</a> <a href="#" class="text-info">Information text link.</a> <a href="#" class="text-warning">Warning link.</a> <a href="#" class="text-danger">Dangerous link.</a> <a href="#" class="text-secondary">Subtitle link.</a> <a href="#" class="text-dark">Dark gray link.</a> <a href="#" class="text-light">Light gray link.</a> </div> </body> </html>Test and See ‹/›
Classes that provide background colors include: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
Note that the background color does not set the text color, and in some examples you need to use .text-* classes together.
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script> </head> <body> <div class="container"> <h2>Background color</h2> <p class="bg-primary text-white">Important background color.</p> <p class="bg-success text-white">Execution success background color.</p> <p class="bg-info text-white">Info alert background color.</p> <p class="bg-warning text-white">Warning background color</p> <p class="bg-danger text-white">Danger background color.</p> <p class="bg-secondary text-white">Subtitle background color.</p> <p class="bg-dark text-white">Dark grey background color.</p> <p class="bg-light text-dark">Light grey background color.</p> </div> </body> </html>Test and See ‹/›