Bootstrap 4 supports 10 different color utility classes that can be used for text and background colors. Each of these colors has a name that can be used to describe the use of colors on a page.
Color Utility Text Classes: These classes are used for changing the color of the text.
- text-primary: It gives a sky blue color to the text.
- text-secondary: It gives a greyish color to the text.
- text-warning: It gives a shade of yellow to text.
- text-success: It gives a color of green to text.
- text-danger: It gives a color of red to text.
- text-muted: It gives a grey color to text.
- text-dark: It gives a dark black color to text.
- text-light: It gives a very light greyish color to text.
- text-info: It gives a shade of blue to the text.
- text-white: It gives a color of white to the text.
Example: This example shows the use of all the color utility classes for coloring text on the page.
<html>
<head>
<link rel="stylesheet"
href=
</head>
<body>
<div class="p-3">
<p class="text-primary">
Welcome to geeksforgeeks
</p>
<p class="text-secondary">
Welcome to geeksforgeeks
</p>
<p class="text-warning">
Welcome to geeksforgeeks
</p>
<p class="text-success">
Welcome to geeksforgeeks
</p>
<p class="text-danger">
Welcome to geeksforgeeks
</p>
<p class="text-muted">
Welcome to geeksforgeeks
</p>
<p class="text-dark">
Welcome to geeksforgeeks
</p>
<p class="text-light">
Welcome to geeksforgeeks
</p>
<p class="text-info">
Welcome to geeksforgeeks
</p>
<p class="text-white">
Welcome to geeksforgeeks
</p>
</div>
<script src=
</script>
<script src=
</script>
<script src=
</script>
</body>
</html>
|
Output:
Color Utility Background Classes: These classes are used for changing the color of the background. When trying to use color utility classes for background, ‘text’ is replaced with ‘bg’ which stands for ‘background’.
The color utility classes for background colors are:
- bg-primary: It gives a sky blue color to the background of an element.
- bg-secondary: It gives a greyish color to the background of an element.
- bg-warning: It gives a shade of yellow to the background of an element.
- bg-success: It gives a color of green to the background of an element.
- bg-danger: It gives a color of red to the background of an element.
- bg-muted: It gives a grey color to the background of an element.
- bg-dark: It gives a dark black color to the background of an element.
- bg-light: It gives a very light greyish color to the background of an element.
- bg-info: It gives a shade of blue to the background of an element.
- bg-white: It gives a color of white to the background of an element.
Example: This example shows the use of all the color utility classes for coloring the backgrounds on the page.
<html>
<head>
<link rel="stylesheet"
href=
</head>
<body>
<div class="p-3">
<div class="bg-primary m-2 p-2">
Welcome to geeksforgeeks
</div>
<div class="bg-secondary m-2 p-2">
Welcome to geeksforgeeks
</div>
<div class="bg-warning m-2 p-2">
Welcome to geeksforgeeks
</div>
<div class="bg-success m-2 p-2">
Welcome to geeksforgeeks
</div>
<div class="bg-danger m-2 p-2">
Welcome to geeksforgeeks
</div>
<div class="bg-muted m-2 p-2">
Welcome to geeksforgeeks
</div>
<div class="bg-dark m-2 p-2">
Welcome to geeksforgeeks
</div>
<div class="bg-light m-2 p-2">
Welcome to geeksforgeeks
</div>
<div class="bg-info m-2 p-2">
Welcome to geeksforgeeks
</div>
<div class="bg-white m-2 p-2">
Welcome to geeksforgeeks
</div>
</div>
<script src=
</script>
<script src=
</script>
<script src=
</script>
</body>
</html>
|
Output: