- Bootstrap 4 Tutorial
- Bootstrap 4 - Home
- Bootstrap 4 - Overview
- Bootstrap 4 - Environment Setup
- Bootstrap 4 - Layout
- Bootstrap 4 - Grid System
- Bootstrap 4 - Content
- Bootstrap 4 - Components
- Bootstrap 4 - Utilities
- Differences Between Bootstrap 3 and 4
- Bootstrap 4 Useful Resources
- Bootstrap 4 - Quick Guide
- Bootstrap 4 - Useful Resources
- Bootstrap 4 - Discussion
Bootstrap 4 - Colors
Description
Use the contextual classes to change the color of text, link (using classes like text-primary, text-secondary etc) and background color (using classes like bg-primary, bg-secondary etc) of an element.
Text Color
The following example shows changing color of the text by using contextual classes −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container-fluid"> <h2>Text Color</h2> <p class = "text-primary">Color : text-primary </p> <p class = "text-secondary">Color : text-secondary</p> <p class = "text-success">Color : text-success</p> <p class = "text-danger">Color : text-danger</p> <p class = "text-warning">Color : text-warning</p> <p class = "text-info">Color : text-info</p> <p class = "text-black-50">Color : text-black-50</p> <p class = "text-dark">Color : text-dark</p> <p class = "text-body">Color : text-body</p> <p class = "text-muted">Color : text-muted</p> <p class = "text-white bg-dark">Color : text-white</p> <p class = "text-light bg-dark">Color : text-light</p> <p class = "text-white-50 bg-dark">Color : text-white-50</p> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"> </script> <!-- Popper --> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"> </script> <!-- Latest compiled and minified Bootstrap JavaScript --> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
Link Color
The following example shows changing color of the link by using contextual classes −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container-fluid"> <h2>Link Color</h2> <p><a href = "#" class = "text-primary">Primary link</a></p> <p><a href = "#" class = "text-secondary">Secondary link</a></p> <p><a href = "#" class = "text-success">Success link</a></p> <p><a href = "#" class = "text-danger">Danger link</a></p> <p><a href = "#" class = "text-warning">Warning link</a></p> <p><a href = "#" class = "text-info">Info link</a></p> <p><a href = "#" class = "text-dark">Dark link</a></p> <p><a href = "#" class = "text-muted">Muted link</a></p> <p><a href = "#" class = "text-light bg-dark">Light link</a></p> <p><a href = "#" class = "text-white bg-dark">White link</a></p> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"> </script> <!-- Popper --> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"> </script> <!-- Latest compiled and minified Bootstrap JavaScript --> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
Background Color
The following example shows the changing background color of an element by using contextual classes −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container-fluid"> <h2>Background Color</h2> <div class = "p-3 mb-2 bg-primary text-white">class = 'bg-primary'</div> <div class = "p-3 mb-2 bg-secondary text-white">class = 'bg-secondary'</div> <div class = "p-3 mb-2 bg-success text-white">class = 'bg-success'</div> <div class = "p-3 mb-2 bg-danger text-white">class = 'bg-danger'</div> <div class = "p-3 mb-2 bg-warning text-dark">class = 'bg-warning'</div> <div class = "p-3 mb-2 bg-info text-white">class = 'bg-info'</div> <div class = "p-3 mb-2 bg-light text-dark">class = 'bg-light'</div> <div class = "p-3 mb-2 bg-dark text-white">class = 'bg-dark'</div> <div class = "p-3 mb-2 bg-white text-dark">class = 'bg-white'</div> <div class = "p-3 mb-2 bg-transparent text-dark">class = 'bg-transparent'</div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"> </script> <!-- Popper --> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"> </script> <!-- Latest compiled and minified Bootstrap JavaScript --> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
bootstrap4_utilities.htm
Advertisements