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 > |
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 > |
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 > |
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 > |
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 > |
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 > |
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 > |
Output: