Introduction to Bootstrap Text Color
Bootstrap Text Color is just like in the HTML. It provides different color classes to provide different colors to the text. If you take any color in HTML, we must write color logic explicitly, but in the case of bootstrap, predefined classes provide different color functionality. Text colors’ main motto is to apply different colors to the text based on client requirements.
Types of Color Classes:
- <p class=”text-primary”>Blue color to Text</p>
- <p class=”text-secondary”>Light Gray color to Text/p>
- <p class=”text-success”>Green color to Text</p>
- <p class=”text-danger”>Red color to Text</p>
- <p class=”text-warning”>Yellow color to Text</p>
- <p class=”text-info”>Slight Blue color to Text</p>
- <p class=”text-light bg-dark”>Light text with black background</p>
- <p class=”text-dark”>Dark color to Text</p>
- <p class=”text-muted”>Light Brown Color</p>
- <p class=”text-white bg-dark”>White text color with black background</p>
How does Text Color Work in Bootstrap?
1. Text color works based on class property with its corresponding value. Different property values provide different color to the text in output.
Syntax:
<div class="container">
<p class="text-primary">Blue color to Text</p>
<p class="text-secondary">Light Gray color to Text/p>
<p class="text-success">Green color to Text</p>
<p class="text-danger">Red color to Text</p>
<p class="text-warning">Yellow color to Text</p>
<p class="text-info">Slight Blue color to Text</p>
<p class="text-light bg-dark">Light text with black background</p>
<p class="text-dark">Dark color to Text</p>
<p class="text-muted">Light Brown Color</p>
<p class="text-white bg-dark">White text color with black background</p>
</div>2. Accessing all bootstrap predefined classes into our application we must use some predefined bootstrap libraries in our code. They are listed below:
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>Includes bootstrap view.
Includes ajax and jQuery libraries.
Includes bootstrap libraries.
Includes bootstrap libraries.
Examples
Below are the different examples:
Example #1
Primary, secondary, success, danger, warning and info text colors example:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Text Color</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.container {
border-style: solid;
border-width: 2px;
border-color: fuchsia;
}
.header {
text-align: center;
color: red;
}
p {
font-size: 28px;
}
</style>
</head>
<body>
</head>
<body>
<div class="container">
<h3 class="header">Primary Class Text Color</h3>
<p class="text-primary">
Bootstrap Text Color is just like in the HTML. Bootstrap provides different color classes to provide different colors to the text. If you take any color in HTML, we must write color logic explicitly.
</p>
<h3 class="header">Secondary Class Text Color</h3>
<p class="text-secondary">
Bootstrap Text Color is just like in the HTML. Bootstrap provides different color classes to provide different colors to the text. If you take any color in HTML, we must write color logic explicitly.
</p>
<h3 class="header">Success Class Text Color</h3>
<p class="text-success">
Bootstrap Text Color is just like in the HTML. Bootstrap provides different color classes to provide different colors to the text. If you take any color in HTML, we must write color logic explicitly.
</p>
<h3 class="header">Danger Class Text Color</h3>
<p class="text-danger">
Bootstrap Text Color is just like in the HTML. Bootstrap provides different color classes to provide different colors to the text. If you take any color in HTML, we must write color logic explicitly.
</p>
<h3 class="header">Warning Class Text Color</h3>
<p class="text-warning">
Bootstrap Text Color is just like in the HTML. Bootstrap provides different color classes to provide different colors to the text. If you take any color in HTML, we must write color logic explicitly.
</p>
<h3 class="header">Info Class Text Color</h3>
<p class="text-info">
Bootstrap Text Color is just like in the HTML. Bootstrap provides different color classes to provide different colors to the text. If you take any color in HTML, we must write color logic explicitly.
</p>
<div>
</body>
</html>Output:
Example #2
Muted, white, bg dark, light text colors.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Colors</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
h3
{
color:green;
text-align:center;
}
p
{
font-size: 28px;
}
</style>
</head>
<body>
<div class="container">
<h3 class="header">Text Light and bg dark Class Text Color</h3>
<p class="text-light bg-dark">
Bootstrap Text Color is just like in the HTML. Bootstrap provides different color classes to provide different colors to the text. If you take any color in HTML, we must write color logic explicitly.
</p>
<h3 class="header">Text dark Class Text Color</h3>
<p class="text-dark">
Bootstrap Text Color is just like in the HTML. Bootstrap provides different color classes to provide different colors to the text. If you take any color in HTML, we must write color logic explicitly.
</p>
<h3 class="header">Text muted Class Text Color</h3>
<p class="text-muted">
Bootstrap Text Color is just like in the HTML. Bootstrap provides different color classes to provide different colors to the text. If you take any color in HTML, we must write color logic explicitly.
</p>
<h3 class="header">Text white and bg dark Class Text Color</h3>
<p class="text-white bg-dark">
Bootstrap Text Color is just like in the HTML. Bootstrap provides different color classes to provide different colors to the text. If you take any color in HTML, we must write color logic explicitly.
</p>
<div>
</body>
</html>Output:
Example #3
Text colors with Opacity.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Colors</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
h3
{
color:maroon;
text-align:center;
}
p
{
font-size: 28px;
}
</style>
</head>
<body>
<div class="container">
<h3>Opacity with black color</h3>
<p class="text-black-50">Opacity property can be observed with black and white text with dark background.</p>
<h3>Opacity with white color with dark background</h3>
<p class="text-white-50 bg-dark">Opacity property can be observed with black and white text with dark background.</p>
<div>
</body>
</html>Output:
