Skip to content
Related Articles

Related Articles

Bootstrap | Badges and Breadcrumbs

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Easy
  • Last Updated : 29 Apr, 2022

Badges:

Badges are numbers associated with the link to indicate the number of items associated with the link. The notification number is seen when logged in to a particular website and tells the numbers of news or notifications to see by clicking it.

Example:

HTML




<!DOCTYPE html>
<html>
<head>
    <title>badge 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>
    <style>
        .container {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="#">UPDATES
            <span class="badge badge-secondart">
                4
              </span>
          </a>
          <br>
        <a href="#">NOTIFICATIONS
            <span class="badge badge-secondart">
                10
              </span>
          </a>
          <br>
        <a href="#">MESSAGES
            <span class="badge badge-secondart">
                4
              </span>
          </a>
          <br>
    </div>
</body>
</html>

Output:

bagdes

Contextual Variations: Badges can be used as part of links or buttons to provide a counter. Depending on how they are used, badges must be confusing for the users, for this purpose different colors of variations are used so that the user may not get confused. 

Example:

HTML




<!DOCTYPE html>
<html>
<head>
    <title>badge 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>
    <style>
        .container {
            font-size: 20px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <button type="button" class="btn btn-primary">
            NOTIFICATIONS
            <span class="badge badge-light">2</span>
        </button>
          <br>
          <br>
        <button type="button" class="btn btn-default">
            MESSAGES
            <span class="badge badge-warning">2</span>
        </button>
          <br>
          <br>
        <button type="button" class="btn btn-info">
            UPDATES
            <span class="badge badge-danger">2</span>
        </button>
          <br>
          <br>
        <button type="button" class="btn btn-light">
            NEWS
            <span class="badge badge-success">2</span>
        </button>
    </div>
</body>
</html>

Output:

badges

Pill Badges: The badges that use class = “badge-pill” to make the corner more rounded. 

Example:

HTML




<!DOCTYPE html>
<html>
<head>
    <title>badge 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>
    <style>
        .container {
            font-size: 20px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <button type="button" class="btn btn-primary">
            NOTIFICATIONS
            <span class="badge badge-pill badge-light">2</span>
        </button>
          <br>
          <br>
        <button type="button" class="btn btn-default">
            MESSAGES
            <span class="badge badge-pill badge-warning">2</span>
        </button>
          <br>
          <br>
        <button type="button" class="btn btn-info">
            UPDATES
            <span class="badge badge-pill badge-danger">2</span>
        </button>
          <br>
          <br>
        <button type="button" class="btn btn-light">
            NEWS
            <span class="badge badge-pill badge-success">2</span>
        </button>
    </div>
</body>
</html>

Output:

badges

Badges as Link: Badges can also be used as a direct link to the new page. 

Example:

HTML




<!DOCTYPE html>
<html>
<head>
    <title>badge 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>
    <style>
        .container {
            font-size: 20px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="#"><button type="button"
                        class="btn btn-primary">
                NOTIFICATIONS
                <span class="badge badge-pill badge-light">
                    2
                  </span>
            </button>
          </a>
          <br>
          <br>
        <a href="#">
              <button type="button"
                        class="btn btn-default">
                MESSAGES
                <span class="badge badge-pill badge-warning">
                    2
                  </span>
            </button>
          </a>
          <br>
          <br>
        <a href="#">
              <button type="button"
                        class="btn btn-info">
                UPDATES
                <span class="badge badge-pill badge-danger">
                    2
                  </span>
            </button>
          </a>
          <br>
          <br>
        <a href="#">
              <button type="button"
                        class="btn btn-light">
                NEWS
                <span class="badge badge-pill badge-success">
                    2
                  </span>
            </button>
          </a>
    </div>
</body>
</html>

Output:

badges-as-link

Breadcrumbs:

It is used to indicate the current page location with a navigational hierarchy. It adds separators automatically using CSS. It provides a backlink to each previous page the user navigates through. 

Example 1:

HTML




<!DOCTYPE html>
<html>
<head>
    <title>badge example</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <div class="container">
        <nav aria-label="breadcrumb" role="navigation">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active"
                    aria-current="page">
                    GeeksforGeeks
                  </li>
            </ol>
        </nav>
    </div>
</body>
</html>

Output:

breadcrumbs

Example 2:

HTML




<!DOCTYPE html>
<html>
<head>
    <title>badge example</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <div class="container">
        <nav aria-label="breadcrumb" role="navigation">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                      <a href="#">
                        GeeksforGeeks
                      </a>
                  </li>
                <li class="breadcrumb-item active"
                    aria-current="page">
                    Library
                  </li>
            </ol>
        </nav>
    </div>
</body>
</html>

Output:

breadcrumbs

Example 3:

HTML




<!DOCTYPE html>
<html>
<head>
    <title>badge example</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <div class="container">
        <nav aria-label="breadcrumb" role="navigation">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                      <a href="#">
                        GeeksforGeeks
                      </a>
                  </li>
                <li class="breadcrumb-item">
                      <a href="#">
                        Library
                      </a>
                  </li>
                <li class="breadcrumb-item">
                      <a href="#">
                        Books
                      </a>
                  </li>
                <li class="breadcrumb-item">
                      <a href="#">
                        Subject
                      </a>
                  </li>
                <li class="breadcrumb-item active"
                    aria-current="page">
                    Computer Science
                  </li>
            </ol>
        </nav>
    </div>
</body>
</html>

Output:

breadcrumbs

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!