Bootstrap | Badges and Breadcrumbs

Difficulty Level : Easy
Last Updated : 16 Jul, 2018

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:

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

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:

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

Output:
badges

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

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

Output:
badges

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

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

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:

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

Output:
breadcrumbs

Example 2:

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

Output:
breadcrumbs

Example 3:

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

Output:
breadcrumbs

My Personal Notes

Related Articles