-

Badges

-

Documentation and examples for badges, our small count and labeling component.

+

Badges

+

Documentation and examples for badges, our small count and labeling component.

-

Example

+

Example

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

@@ -46,7 +60,7 @@ if ($dolibarr_main_prod) {
-
+			
 
 <h1>Example heading <span class="badge badge-secondary">New</span></h1>
 <h2>Example heading <span class="badge badge-secondary">New</span></h2>
@@ -55,7 +69,7 @@ if ($dolibarr_main_prod) {
 <h5>Example heading <span class="badge badge-secondary">New</span></h5>
 <h6>Example heading <span class="badge badge-secondary">New</span></h6>
 
-    		
+

Badges can be used as part of links or buttons to provide a counter.

@@ -88,7 +102,7 @@ if ($dolibarr_main_prod) {
-
+			
 
 
 <button type="button" class="btn btn-primary">
@@ -97,7 +111,7 @@ if ($dolibarr_main_prod) {
 </button>
 
 
-    		
+

Contextual variations

@@ -117,7 +131,7 @@ if ($dolibarr_main_prod) {
-
+			
 
 <span class="badge badge-primary">Primary</span>
 <span class="badge badge-secondary">Secondary</span>
@@ -128,7 +142,7 @@ if ($dolibarr_main_prod) {
 <span class="badge badge-light">Light</span>
 <span class="badge badge-dark">Dark</span>
 
-    		
+
@@ -144,13 +158,13 @@ if ($dolibarr_main_prod) {

Add any of the below mentioned modifier classes to change the appearance of a badge to be linked to a default status.

- + status-
-
+
 <span class="badge badge-status" >status</span>
 
 		
@@ -171,7 +185,7 @@ if ($dolibarr_main_prod) { Light Dark - + status @@ -188,7 +202,7 @@ if ($dolibarr_main_prod) { <span class="badge badge-pill badge-info">Info</span> <span class="badge badge-pill badge-light">Light</span> <span class="badge badge-pill badge-dark">Dark</span> - + <span class="badge badge-pill badge-status" >status</span> @@ -210,7 +224,7 @@ if ($dolibarr_main_prod) { - + @@ -227,7 +241,7 @@ if ($dolibarr_main_prod) { <span class="badge badge-dot badge-info"></span> <span class="badge badge-dot badge-light"></span> <span class="badge badge-dot badge-dark"></span> - + <span class="badge badge-dot badge-status" ></span> @@ -256,7 +270,7 @@ if ($dolibarr_main_prod) { Info Light Dark - + status @@ -271,7 +285,7 @@ if ($dolibarr_main_prod) { <a href="#" class="badge badge-info">Info</a> <a href="#" class="badge badge-light">Light</a> <a href="#" class="badge badge-dark">Dark</a> - + <a href="#" class="badge badge-status" >status</a> @@ -326,7 +340,7 @@ if ($dolibarr_main_prod) { -