Bootstrap | Badges and Breadcrumbs

Badges

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
   
<head>
<title>badge example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</body>
</html>

chevron_right


Output:
bagdes



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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
   
<head>
<title>badge example</title>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</body>
</html>

chevron_right


Output:
badges

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
   
<head>
<title>badge example</title>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</body>
</html>

chevron_right


Output:
badges

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
   
<head>
<title>badge example</title>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</body>
</html>

chevron_right


Output:
badges-as-link

Breadcrumbs

It is used to indicates the current page location with a navigational hierarchy. It add separators automatically using CSS. It provides back link to each previous page the user nevigate through.
Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<head>
<title>badge example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</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>

chevron_right


Output:
breadcrumbs

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<head>
<title>badge example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</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>

chevron_right


Output:
breadcrumbs

Example 3:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<head>
<title>badge example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</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>

chevron_right


Output:
breadcrumbs



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.