How to customize bootstrap colors ?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. How to customize bootstrap colors in bootstrap with code example.

Here, we will use badge class to make a customize bootstrap colors.

Bootstrap badge examples

Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge.

Extended colors

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
    <title>Bootstrap Badge Colors Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
        .bcontent {
            margin-top: 10px;
    <div class="container bcontent">
      <h2>Bootstrap Badge Colors</h2>
      <hr />
      <span class="badge badge-primary">Primary</span>
      <span class="badge badge-secondary">Secondary</span>
      <span class="badge badge-success">Success</span>
      <span class="badge badge-danger">Danger</span>
      <span class="badge badge-warning">Warning</span>
      <span class="badge badge-info">Info</span>
      <span class="badge badge-light">Light</span>
      <span class="badge badge-dark">Dark</span>
    <!-- Bootstrap Bundle with Popper -->
    <script src="[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


In the above code, we have used badge badge-dark method to align image in center .of div

Check the output of the above code example.

Bootstrap, Badges, colors

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us


Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts