Home >>Bootstrap Tutorial >Bootstrap Colors

Bootstrap Colors

Bootstrap Colors

Bootstrap color is used to set the text color as well as background color of an element. It is also work on anchors to set the hover color (on hover link color become darken).

These are the following contextual classes for text colors are:

  • .text-muted
  • .text-success
  • .text-warning
  • .text-info
  • .text-danger
  • .text-primary
  • .text-white
  • .text-dark
  • .text-secondary
  • .text-light

Let's take an example of bootstrap colors:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Colors</title>
  <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>
</head>
<body>
<div class="container">
  <p class="text-muted">Phptpoint</p>
   <p class="text-success">Phptpoint</p>
     <p class="text-warning">Phptpoint</p>
	 <p class="text-info">Phptpoint</p>
   <p class="text-danger">Phptpoint</p>
  <p class="text-primary">Phptpoint</p>
  <p class="text-white">Phptpoint</p>
  <p class="text-dark">Phptpoint</p>
  <p class="text-secondary">Phptpoint</p>
  <p class="text-light">Phptpoint</p>
</div>
</body>
</html>
Output:

Phptpoint

Phptpoint

Phptpoint

Phptpoint

Phptpoint

Phptpoint

Phptpoint

Phptpoint

Phptpoint

Phptpoint

Opacity Text Colors

If you want then you can also set the opacity on text colors (only on black and white colors). Add 50% opacity for black and white text.

Let's take an Example of opacity text colors :

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Colors</title>
  <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>
</head>
<body>
<div class="container">
  <p class="text-black-50">Hello world !!</p>
  <p class="text-white-50 bg-dark">Hello world !!</p>
</div>
</body>
</html>
Output:

Hello world !!

Hello world !!

Anchor Color

It can also be used on anchors (on hover the link color become darken).

Let's take an example:

 <!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Colors</title>
  <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>
</head>
<body>
<div class="container">
  <p><a href="#" class="text-muted">Welcome to phptpoint</a></p>
<p><a href="#" class="text-success">Welcome to phptpoint</a></p>
<p><a href="#" class="text-warning">Welcome to phptpoint</a></p>
<p><a href="#" class="text-info">Welcome to phptpoint</a></p>
<p><a href="#" class="text-danger">Welcome to phptpoint</a></p>
<p><a href="#" class="text-primary">Welcome to phptpoint</a></p>
<p><a href="#" class="text-dark">Welcome to phptpoint</a></p>
<p><a href="#" class="text-secondary">Welcome to phptpoint</a></p>
<p><a href="#" class="text-light">Welcome to phptpoint</a></p>
</div>
</body>
</html>

Background Color

You can also set the background color of an element, by using these below given contextual colors.

  • bg-primary
  • .bg-danger
  • .bg-dark
  • .bg-success
  • .bg-info
  • .bg-secondary
  • .bg-warning
  • .bg-light

Let's take an Example of background color:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Colors</title>
  <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>
</head>
<body>
<div class="container">
 <p class="bg-primary text-white">how are you ? </p>
  <p class="bg-danger text-white">how are you ?</p>
  <p class="bg-dark text-white">how are you ?</p>
  <p class="bg-success text-white">how are you ?</p>
  <p class="bg-info text-white">how are you ?</p>
  <p class="bg-secondary text-white">how are you ?</p>
  <p class="bg-warning text-white">how are you ?</p>
  <p class="bg-light text-dark">how are you ?</p>
  </div>
</body>
</html>
Output:

how are you ?

how are you ?

how are you ?

how are you ?

how are you ?

how are you ?

how are you ?

how are you ?


Popular Tutorials