×

Html & Html5

The World's best Software Development Study Portal

Bootstrap colors


Basically in Bootstrap 4 we are having some sort of definite colors by which we can give color to our text or to our background.


So let’s see how we can do that :-


Text Colors


In Bootstrap we are having some limited class or contextual by which we can change the color of our text.
Let’s understand them by this program



<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example </title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container">

<h2>Contextual Colors </h2>

<p>Use the contextual classes to provide "meaning through colors": </p>

<p class="text-muted">This text is muted. </p>

<p class="text-primary">This text is important. </p>

<p class="text-success">This text indicates success. </p>

<p class="text-info">This text represents some information. </p>

<p class="text-warning">This text represents a warning. </p>

<p class="text-danger">This text represents danger. </p>

<p class="text-secondary">Secondary text. </p>

<p class="text-dark">This text is dark grey. </p>

<p class="text-body">Default body color (often black). </p>

<p class="text-light">This text is light grey (on white background). </p>

<p class="text-white">This text is white (on white background). </p>

</div>

</body>

</html>

Output of this Program


bootstrapimage



So through these classes we changed the colors of the text and these colors also describing words.


Background Colors


< p> In Bootstrap we are having some limited class by which we can change the color of our background.
Let’s understand them by this program


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example </title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container">

<h2>Contextual Backgrounds </h2>

<p>Use the contextual background classes to provide "meaning through colors". </p>

<p>Note that you can also add a .text-* class if you want a different text color: </p>

<p class="bg-primary text-white">This text is important. </p>

<p class="bg-success text-white">This text indicates success. </p>

<p class="bg-info text-white">This text represents some information. </p>

<p class="bg-warning text-white">This text represents a warning. </p>

<p class="bg-danger text-white">This text represents danger. </p>

<p class="bg-secondary text-white">Secondary 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>

Output of this Program


bootstrapimage




Here we can see the different background class by these different class.








Bootstrap 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute