{"id":920,"date":"2019-07-16T10:32:06","date_gmt":"2019-07-16T10:32:06","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=920"},"modified":"2019-07-16T10:32:06","modified_gmt":"2019-07-16T10:32:06","slug":"bootstrap-badges-and-labels","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/","title":{"rendered":"Bootstrap Badges and Labels"},"content":{"rendered":"

Bootstrap Labels<\/strong>
\nBootstrap Labels are used to provide some additional or valuable information about something like counts, tips, important notes, warning messages etc. For this, we can use inline labels using class .label<\/em>. To use bootstrap, include bootstrap css and js files and also include jQuery file in your application.
\n<\/br><\/p>\n

\r\n<!DOCTYPE html>  \r\n<html lang=\"en\">  \r\n<head>  \r\n  \t\t\t<title>Bootstrap Label Example<\/title>  \r\n  \t\t\t<meta charset=\"utf-8\">  \r\n  \t\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">  \r\n  \t\t\t<link rel=\"stylesheet\" href=\"http:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\">    \r\n<\/head>  \r\n<body>\r\n<div class=\"container\">  \r\n  \t\t\t<h1>Example Label heading <span class=\"label label-default\">1<\/span><\/h1>  \r\n  \t\t\t<h2>Example Label heading <span class=\"label label-default\">2<\/span><\/h2>  \r\n  \t\t\t<h3>Example Label heading <span class=\"label label-default\">3<\/span><\/h3>  \r\n  \t\t\t<h4>Example Label heading <span class=\"label label-default\">4<\/span><\/h4>  \r\n  \t\t\t<h5>Example Label heading <span class=\"label label-default\">5<\/span><\/h5>  \r\n  \t\t\t<h6>Example Label heading <span class=\"label label-default\">6<\/span><\/h6>  \r\n<\/div>  \r\n\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.0\/jquery.min.js\"><\/script>  \r\n<script src=\"http:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\"><\/script>  \r\n  \r\n<\/body>  \r\n<\/html>  \r\n<\/pre>\n
The output of above html sample is shown in the following screenshot:<\/p>\n
<\/p>\n
Screenshot 1<\/p>\n
We can use additional contextual labels classes like .label-primary<\/em>, .label-success<\/em> etc. along with .label<\/em> class to highlight information in different colors. <\/p>\n
\r\n<p>This is default <span class=\"label label-default\"> Gray<\/span> color label<\/p>\r\n<p>This is primary <span class=\"label label-primary\"> Blue<\/span> color label<\/p>\r\n<p>This is success <span class=\"label label-success\"> Green<\/span> color label<\/p>\r\n<p>This is information <span class=\"label label-info\"> Light blue<\/span> color label<\/p>\r\n<p>This is default <span class=\"label label-warning\"> Orange<\/span> color label<\/p>\r\n<p>This is red <span class=\"label label-danger\"> Red<\/span> color label<\/p> \r\n<\/pre>\n
The output of above html sample is shown in following screenshot 2.<\/p>\n
<\/p>\n
Screenshot 2<\/p>\n
Bootstrap Badges<\/strong>
\nA badge can be used to denote any numerical value. Badges can be used to provide any important information such as unread messages, number of items added to cart, unread notifications, updates etc. To use badges in your application, simply add \u201cbadge<\/em>\u201d class to the opening span tag.<\/p>\n
\r\n<h2>Badges<\/h2>  \r\n  \t<a href=\"#\">News <span class=\"badge\">5<\/span><\/a><br>  \r\n  \t<a href=\"#\">Comments <span class=\"badge\">10<\/span><\/a><br>  \r\n  \t<a href=\"#\">Updates <span class=\"badge\">2<\/span><\/a> <br>   \r\n\t<a href=\"#\">Shopping Cart <span class=\"badge\">8<\/span><\/a> <br>   \r\n\t<a href=\"#\">Unread <span class=\"badge\">5<\/span><\/a> <br>  \r\n<\/pre>\n
The output of above HTML sample is shown in following screenshot 3.<\/p>\n
<\/p>\n
Screenshot 3<\/p>\n
Bootstrap<\/a> badges can also be used inside other elements such as buttons. Let\u2019s see how we can add badges to buttons.<\/p>\n
\r\n<h2> Badges on Buttons <\/h2> \r\n<button type=\"button\" class=\"btn btn-primary\">Notifications <span class=\"badge\">7<\/span><\/button>  \r\n<button type=\"button\" class=\"btn btn-success\">Notifications <span class=\"badge\">3<\/span><\/button>      \r\n<button type=\"button\" class=\"btn btn-danger\">Critical Updates <span class=\"badge\">5<\/span><\/button>  \r\n<\/pre>\n
The output of above HTML sample is provided in following Screenshot 4. <\/p>\n
<\/p>\n
Screenshot 4<\/p>\n
Badges can be applied to any dom element such as paragraph (<p>), heading (<h1>, <h2> etc.). <\/p>\n
In the sample, bootstrap having version 3.3.7 is used. Bootstrap 4 provides more contextual classes, means more features for providing different colors and shapes to badges. Bootstrap 3.3.7 provide only gray color and rectangular shapes to badges when we use any dom element except buttons. <\/p>\n
Contextual classes badge-primary<\/em>, badge-success<\/em>, badge-danger<\/em>, badge-warning<\/em> etc can be used along with badge class inside <span> to display colorful badges with bootstrap 4.<\/p>\n
\r\n<h2>Badges for bootstrap 4<\/h2>\r\n<a href=\"#\">News <span class=\"badge badge-primary\">5<\/span><\/a><br>  \r\n  \t<a href=\"#\">Comments <span class=\"badge badge-success\">10<\/span><\/a><br>  \r\n  \t<a href=\"#\">Updates <span class=\"badge badge-warning\">2<\/span><\/a> <br>   \r\n\t<a href=\"#\">Critical updates <span class=\"badge badge-danger\">8<\/span><\/a> <br>   <\/pre>\n
The output of above sample code is shown below:<\/p>\n
<\/p>\n
Screenshot 5<\/p>\n
Bootstrap 4 also provides .badge-pill<\/em> class which makes badges more rounded.<\/p>\n
\r\n<p>Badge with rounded shape example <span class=\"badge badge-success badge-pill\">100<\/span><\/p>\r\n<\/pre>\n
The output of above sample is:<\/p>\n
<\/p>\n
Screenshot 6<\/p>\n","protected":false},"excerpt":{"rendered":"
Bootstrap Labels Bootstrap Labels are used to provide some additional or valuable information about something like counts, tips, important notes,<\/p>\n","protected":false},"author":1,"featured_media":921,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[163,162,118,39,164],"acf":[],"yoast_head":"\nStudySection Blog - Introduction to Bootstrap Badges and Labels<\/title>\n<meta name=\"description\" content=\"Bootstrap Labels are used to provide some additional or valuable information about something like counts, tips, important notes, warning messages etc.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"StudySection Blog - Introduction to Bootstrap Badges and Labels\" \/>\n<meta property=\"og:description\" content=\"Bootstrap Labels are used to provide some additional or valuable information about something like counts, tips, important notes, warning messages etc.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-16T10:32:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2019\/07\/bootstrap-blog.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"160\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Bootstrap Badges and Labels\",\"datePublished\":\"2019-07-16T10:32:06+00:00\",\"dateModified\":\"2019-07-16T10:32:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/\"},\"wordCount\":311,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"badges\",\"Bootstrap\",\"examples\",\"introduction\",\"lables\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/\",\"url\":\"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/\",\"name\":\"StudySection Blog - Introduction to Bootstrap Badges and Labels\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2019-07-16T10:32:06+00:00\",\"dateModified\":\"2019-07-16T10:32:06+00:00\",\"description\":\"Bootstrap Labels are used to provide some additional or valuable information about something like counts, tips, important notes, warning messages etc.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap Badges and Labels\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"StudySection Blog - Introduction to Bootstrap Badges and Labels","description":"Bootstrap Labels are used to provide some additional or valuable information about something like counts, tips, important notes, warning messages etc.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/","og_locale":"en_US","og_type":"article","og_title":"StudySection Blog - Introduction to Bootstrap Badges and Labels","og_description":"Bootstrap Labels are used to provide some additional or valuable information about something like counts, tips, important notes, warning messages etc.","og_url":"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2019-07-16T10:32:06+00:00","og_image":[{"width":300,"height":160,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2019\/07\/bootstrap-blog.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Bootstrap Badges and Labels","datePublished":"2019-07-16T10:32:06+00:00","dateModified":"2019-07-16T10:32:06+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/"},"wordCount":311,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["badges","Bootstrap","examples","introduction","lables"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/","url":"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/","name":"StudySection Blog - Introduction to Bootstrap Badges and Labels","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2019-07-16T10:32:06+00:00","dateModified":"2019-07-16T10:32:06+00:00","description":"Bootstrap Labels are used to provide some additional or valuable information about something like counts, tips, important notes, warning messages etc.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/bootstrap-badges-and-labels\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Bootstrap Badges and Labels"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":927,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/920"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=920"}],"version-history":[{"count":22,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/920\/revisions"}],"predecessor-version":[{"id":955,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/920\/revisions\/955"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/921"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}