Labels Archives - Ebhor.com Read The Latest Post Java, Css, Html, Php learning articles Sun, 09 Jul 2023 06:55:47 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.2 https://www.ebhor.com/wp-content/uploads/2021/05/ebhor_logo_100x.jpg Labels Archives - Ebhor.com 32 32 Bootstrap Badges and Labels https://www.ebhor.com/bootstrap-badges-and-labels/ Sun, 09 Jul 2023 10:30:00 +0000 http://ebhor.com/?p=3780 Bootstrap Badges Bootstrap Badges are useful in almost all kinds of different websites now. They are, basically, numerical indicators that help us show the number of items associated a specific link. For examples, a typical use of badges is to notify the number of unread messages in your inbox. A basic can be added by ... Read more

The post Bootstrap Badges and Labels appeared first on Ebhor.com.

]]> Bootstrap Badges

Bootstrap Badges are useful in almost all kinds of different websites now. They are, basically, numerical indicators that help us show the number of items associated a specific link.

For examples, a typical use of badges is to notify the number of unread messages in your inbox.

A basic can be added by using the .badge classes with the <span> element. See the sample code below for illustration:

Badges

        

        News 5
  
        Comments 10
  
        Updates 2
Try It

Bootstrap Button Badge

The example below will tell you how to use badges with some buttons:

Badges on Buttons
Try It
Try It

Bootstrap Contextual class badge example

Primary
        Secondary
        Success
        Danger
        Warning
        Info
        Light
        Dark
Try It

Bootstrap badge Pill 

    
            
  • Inbox 500
    • 
            
  • Read 400
    • 
            
  • Unread 10
    • 
            
  • Spam 10
    • 
            
  • Trace 10
    •
Try It

Bootstrap badge size

Badges Example

        

        
Exciting Offers New

        
Exciting Offers New

        
Exciting Offers New

        
Exciting Offers New

        
Exciting Offers New
Try It

Bootstrap badges with icons

Bootstrap badges with icons
Try It

Bootstrap Labels

The labels are different from badges in the sense that they are generally non-numerical and tells you about the element itself rather than the items it is holding. They can be used for offering tips, counts etc.

The class .label can be used to add labels to your page.

Update New
  
  
UpdateNew
  
  
Update New
  
  
UpdateNew
  
  
UpdateNew
  
  
UpdateNew
Try It

The label colors can also be changed by using the following contextual label classes:

  • label-default
  • label-primary
  • label-success
  • label-info
  • label-warning
  • label-danger
  
  
  
  Bootstrap Contextual Label  
    
    
   
  
   

  
  
Contextual Label Classes
   
  Default Label  
  Primary Label  
  Success Label  
  Info Label  
  Warning Label  
  Danger Label

Badges Headings

You can also use Badges with the heading tags (<h1>……<h6>). For this, along with the .badge you also need to use the .badge-secondary class within <span> elements>.

This will help creating rectangular badges.

  
  
  
  Bootstrap Example  
    
    
    
    
    
    
  
  

  
  
Badges Example
  
  
h1 heading New
  
  
h2 heading New
  
  
h3 heading New
  
  
h4 heading New
  
  
h5 heading New
  
  
h6 heading New

Contextual Badges

Here’s a list of contextual classes for colored badges:

  • badge-primary
  • badge-secondary
  • badge-success
  • badge-danger
  • badge-warning
  • badge-info
  • badge-light
  • badge-dark
  
  
  
  Bootstrap Example  
    
    
    
    
    
    
  
  

  
  
Contextual Badges Example
  
  Primary Badge  
  Secondary Badge  
  Success Badge  
  Danger Badge  
  Warning Badge  
  Info Badge  
  Light Badge  
  Dark Badge

The post Bootstrap Badges and Labels appeared first on Ebhor.com.

]]>