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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></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>
</body>
</html>

chevron_right






                        filter_none








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"> 


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> 


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 


  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> 


  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></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> 


</body> 


</html> 



















                        chevron_right







                        filter_none








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"> 


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> 


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 


  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> 


  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></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> 


</body> 


</html> 



















                        chevron_right







                        filter_none








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"> 


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> 


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 


  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> 


  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></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> 


</body> 


</html> 



















                        chevron_right







                        filter_none








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"> 


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></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> 



















                        chevron_right







                        filter_none








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"> 


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></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> 



















                        chevron_right







                        filter_none








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"> 


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></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> 



















                        chevron_right







                        filter_none








Output:

breadcrumbs





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
MrinalVerma
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.