Open In App

Bootstrap | Badges and Breadcrumbs

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 29 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads