Badges · Bootstrap v5.0

Headings Skiptomaincontent Skiptodocsnavigation Bootstrapv5.0 Latest(5.0.x) v4.6.x v3.4.1 v2.3.2 Allversions Expand Collapse Gettingstarted Introduction Download Contents Browsers&devices JavaScript Buildtools Webpack Parcel Accessibility RFS RTL Customize Overview Sass Options Color Components CSSvariables Optimize Layout Breakpoints Containers Grid Columns Gutters Utilities Z-index Content Reboot Typography Images Tables Figures Forms Overview Formcontrol Select Checks&radios Range Inputgroup Floatinglabels Layout Validation Components Accordion Alerts Badge Breadcrumb Buttons Buttongroup Card Carousel Closebutton Collapse Dropdowns Listgroup Modal Navs&tabs Navbar Offcanvas Pagination Popovers Progress Scrollspy Spinners Toasts Tooltips Helpers Clearfix Coloredlinks Ratio Position Visuallyhidden Stretchedlink Texttruncation Utilities API Background Borders Colors Display Flex Float Interactions Overflow Position Shadows Sizing Spacing Text Verticalalign Visibility Extend Approach Icons About Overview Team Brand License Translations Migration ViewonGitHub Badges Documentationandexamplesforbadges,oursmallcountandlabelingcomponent. Onthispage Examples Headings Buttons Positioned Backgroundcolors Pillbadges Sass Variables Examples Badgesscaletomatchthesizeoftheimmediateparentelementbyusingrelativefontsizingandemunits.Asofv5,badgesnolongerhavefocusorhoverstylesforlinks. Headings ExampleheadingNew ExampleheadingNew ExampleheadingNew ExampleheadingNew ExampleheadingNew ExampleheadingNew

ExampleheadingNew

ExampleheadingNew

ExampleheadingNew

ExampleheadingNew

ExampleheadingNew

ExampleheadingNew

Buttons Badgescanbeusedaspartoflinksorbuttonstoprovideacounter. Notifications4 Notifications4 Notethatdependingonhowtheyareused,badgesmaybeconfusingforusersofscreenreadersandsimilarassistivetechnologies.Whilethestylingofbadgesprovidesavisualcueastotheirpurpose,theseuserswillsimplybepresentedwiththecontentofthebadge.Dependingonthespecificsituation,thesebadgesmayseemlikerandomadditionalwordsornumbersattheendofasentence,link,orbutton. Unlessthecontextisclear(aswiththe“Notifications”example,whereitisunderstoodthatthe“4”isthenumberofnotifications),considerincludingadditionalcontextwithavisuallyhiddenpieceofadditionaltext. Positioned Useutilitiestomodifya.badgeandpositionitinthecornerofalinkorbutton. Inbox 99+ unreadmessages Inbox 99+ unreadmessages Youcanalsoreplacethe.badgeclasswithafewmoreutilitieswithoutacountforamoregenericindicator. Profile Newalerts Profile Newalerts Backgroundcolors Useourbackgroundutilityclassestoquicklychangetheappearanceofabadge.PleasenotethatwhenusingBootstrap’sdefault.bg-light,you’lllikelyneedatextcolorutilitylike.text-darkforproperstyling.Thisisbecausebackgroundutilitiesdonotsetanythingbutbackground-color. Primary Secondary Success Danger Warning Info Light Dark Primary Secondary Success Danger Warning Info Light Dark Conveyingmeaningtoassistivetechnologies Usingcolortoaddmeaningonlyprovidesavisualindication,whichwillnotbeconveyedtousersofassistivetechnologies–suchasscreenreaders.Ensurethatinformationdenotedbythecoloriseitherobviousfromthecontentitself(e.g.thevisibletext),orisincludedthroughalternativemeans,suchasadditionaltexthiddenwiththe.visually-hiddenclass. Pillbadges Usethe.rounded-pillutilityclasstomakebadgesmoreroundedwithalargerborder-radius. Primary Secondary Success Danger Warning Info Light Dark Primary Secondary Success Danger Warning Info Light Dark Sass Variables $badge-font-size:.75em; $badge-font-weight:$font-weight-bold; $badge-color:$white; $badge-padding-y:.35em; $badge-padding-x:.65em; $badge-border-radius:$border-radius;