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:
<!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"> <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:
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"> <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:
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"> <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 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"> <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:
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"> </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:
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"> </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:
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"> </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:
