Bootstrap Colors
Web pages are full of colors. Bootstrap provides us classes to add colors to the background, text buttons, links, etc. Add meaning to your web pages through color utility classes. Here we will see how we can add colors to different elements on the web page.
Text colors
Bootstrap has contextual classes for changing the color of the text. The text color can be changed using .text-primary for primary color.
List of text colors classes are:
- .text-primary
- .text-secondary
- .text-info
- .text-success
- .text-danger
- .text-warning
- .text-white
- .text-light
- .text-muted
Example: Using the text color classes
The classes of text colors are being shown through the program given below. Let us see how each text color class looks.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>
<div class="container">
<h2> Text colors </h2>
<p class="text-primary"> .text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
</div>
</body>
</html>
Output:
Here is the output to show different color text.
Link colors
Link's colors can also be changed using contextual text classes. It provides an option to add a hover and focus effect. The contextual classes are added within <a> tags to change link color.
Example: Changing link color using bootstrap 5
Here is an example to demonstrate the link colors in bootstrap 5.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> Link colors </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-light bg-dark">Light 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-white bg-dark">White link</a></p>
</div>
</body>
</html>
Output:
Background colors
Bootstrap provides the option to change the background color of any element to contextual classes. The options to change background-color are .bg-primary, .bg-secondary, .bg-success, .bg-info, .bg-warning, .bg-danger etc.
Sometimes background color does not set text color, so we need to include .text* class.
Example: Adding background color using bootstrap 5
Here is a program to illustrate background colors.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> Background colors </h2>
<div class=" bg-primary text-white">primary</div>
<div class=" bg-secondary text-white">secondary</div>
<div class=" bg-success text-white">success</div>
<div class=" bg-danger text-white">danger</div>
<div class=" bg-warning text-dark">warning</div>
<div class=" bg-info text-white">info</div>
<div class=" bg-light text-dark">light</div>
<div class=" bg-dark text-white">dark</div>
<div class=" bg-white text-dark">white</div>
</div>
</body>
</html>
Output:
Here is the output to illustrate different background colors in bootstrap.
Conclusion
Make your web pages colorful with Bootstrap color utilities. Customize text links and background with any contextual class. We can easily and quickly add colors using bootstrap classes
