Josephin Doe

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

Share your thoughts

#### Label-Badges

##### Badges

Default badge

##### Code Explanation for Default Badge

    												/* Use For for Default Badge */

    						                      	<label class="badge badge-default">5</label>
    						                      	<label class="badge badge-default">9</label>
    						                      	<label class="badge badge-default">15</label>

Use class `badge-default`

5 9 15
Primary badge

##### Code Explanation for Primary Badge

    												/* Use For for Primary Badge */

    						                      	<label class="badge bg-primary">5</label>
    						                      	<label class="badge bg-primary">9</label>
    						                      	<label class="badge bg-primary">15</label>

Use class `bg-primary`

5 9 15
Success badge

##### Code Explanation for Success Badge

    												/* Use For for Success Badge */

    						                      	<label class="badge bg-success">5</label>
    						                      	<label class="badge bg-success">9</label>
    						                      	<label class="badge bg-success">15</label>

Use class `bg-success`

5 9 15
Warning badge

##### Code Explanation for Warning Badge

    											/* Use For for Warning Badge */

    					                      	<label class="badge bg-warning">5</label>
    					                      	<label class="badge bg-warning">9</label>
    					                      	<label class="badge bg-warning">15</label>

Use class `bg-warning`

5 9 15
Danger badge

##### Code Explanation for Danger Badge

    												/* Use For for Danger Badge */

    						                      	<label class="badge bg-danger">5</label>
    						                      	<label class="badge bg-danger">9</label>
    						                      	<label class="badge bg-danger">15</label>

Use class `bg-danger`

5 9 15
Info badge

##### Code Explanation for Info Badge

    												/* Use For for Info Badge */

    						                      	<label class="badge bg-info">5</label>
    						                      	<label class="badge bg-info">9</label>
    						                      	<label class="badge bg-info">15</label>

Use class `bg-info`

5 9 15
inverse default badge

##### Code Explanation for inverse default Badge

    												/* Use For for inverse default Badge */

    						                      	<label class="badge badge-inverse-default">5</label>
    						                      	<label class="badge badge-inverse-default">9</label>
    						                      	<label class="badge badge-inverse-default">15</label>

Use class `badge-inverse-default`

5 9 15
Inverse primary badge

##### Code Explanation for inverse primary Badge

    												/* Use For for inverse primary Badge */

    						                      	<label class="badge badge-inverse-primary">5</label>
    						                      	<label class="badge badge-inverse-primary">9</label>
    						                      	<label class="badge badge-inverse-primary">15</label>

Use class `badge-inverse-primary`

5 9 15
Inverse success badge

##### Code Explanation for inverse success Badge

    												/* Use For for inverse success Badge */

    						                      	<label class="badge badge-inverse-success">5</label>
    						                      	<label class="badge badge-inverse-success">9</label>
    						                      	<label class="badge badge-inverse-success">15</label>

Use class `badge-inverse-success`

5 9 15
Inverse warning badge

##### Code Explanation for inverse warning Badge

    												/* Use For for inverse warning Badge */

    						                      	<label class="badge badge-inverse-warning">5</label>
    						                      	<label class="badge badge-inverse-warning">9</label>
    						                      	<label class="badge badge-inverse-warning">15</label>

Use class `badge-inverse-warning`

5 9 15
Inverse Danger badge

##### Code Explanation for inverse danger Badge

    												/* Use For for inverse danger Badge */

    						                      	<label class="badge badge-inverse-danger">5</label>
    						                      	<label class="badge badge-inverse-danger">9</label>
    						                      	<label class="badge badge-inverse-danger">15</label>

Use class `badge-inverse-danger`

5 9 15
Inverse Info badge

##### Code Explanation for inverse info Badge

    												/* Use For for inverse info Badge */

    						                      	<label class="badge badge-inverse-info">5</label>
    						                      	<label class="badge badge-inverse-info">9</label>
    						                      	<label class="badge badge-inverse-info">15</label>

Use class `badge-inverse-info`

5 9 15

##### Labels

##### Code Explanation for Badges Labels

    														/* Use For for Badges Labels */

    											/* Use For for Default Badge Labels */

    											<div class="label-main">
    												<label class="label label-default">Default Label</label>
    											</div>

    											/* Use For for Primary Badge Labels */

    											<div class="label-main">
    												<label class="label bg-primary">Primary Label</label>
    											</div>

    											/* Use For for Success Badge Labels */

    											<div class="label-main">
    												<label class="label bg-success">Success Label</label>
    											</div>

    											/* Use For for Warning Badge Labels */

    											<div class="label-main">
    												<label class="label bg-warning">Warning Label</label>
    											</div>

    											/* Use For for Danger Badge Labels */

    											<div class="label-main">
    												<label class="label bg-danger">Danger Label</label>
    											</div>

    											/* Use For for Info Badge Labels */

    											<div class="label-main">
    												<label class="label bg-info">Info Label</label>
    											</div>

    											/* Use For for Inverse Default Badge Labels */

    											<div class="label-main">
    												<label class="label label-inverse-default"<Inverse Default</label>
    											</div>

    											/* Use For for Inverse Primary Badge Labels */

    											<div class="label-main">
    												<label class="label label-inverse-primary">Inverse Primary</label>
    											</div>

    											/* Use For for Inverse Success Badge Labels */

    											<div class="label-main">
    												<label class="label label-inverse-success">Inverse Success</label>
    											</div>

    											/* Use For for Inverse Warning Badge Labels */

    											<div class="label-main">
    												<label class="label label-inverse-warning">Inverse Warning</label>
    											</div>

    											/* Use For for Inverse Danger Badge Labels */

    											<div class="label-main">
    												<label class="label label-inverse-danger">Inverse Danger</label>
    											</div>

    											/* Use For for Inverse Primary Badge Labels */

    											<div class="label-main">
    												<label class="label label-inverse-info">Inverse Primary</label>
    											</div>

Use the `.label` class, followed by one of the six contextual classes `.label-default`, `.bg-primary`, `.bg-success`, `.bg-info`, `.bg-warning` or `.bg-danger`, within a `<label>` element to create a label:

Default Label
Primary Label
Success Label
Warning Label
Danger Label
Info Label
Inverse Default
Inverse Primary
Inverse Success
Inverse Warning
Inverse Danger
Inverse Primary

##### Label Sizes

##### Code Explanation for Label Sizes

    											/* use for large Label */

    											<div class="label-main">
    												<label class="label label-lg label-default">Large Label</label>
    											</div>

    											/* use for Medium Label */

    											<div class="label-main">
    												<label class="label label-md bg-primary">Medium Label</label>
    											</div>

    											/* use for Default Label */

    											<div class="label-main">
    												<label class="label bg-success">Default Label</label>
    											</div>

Use the `.label-lg` class along with `.label` for large label and Use the `.label-md` class along with `.label` for medium label.The`.label` class use form small label

Large Label
Medium Label
Default Label

##### Badge Sizes

##### Code Explanation for Badges Sizes

    											/* use for large size badge */

    											<div class="group-label">
    												<label class="badge badge-lg bg-info">5</label>
    												<label class="badge badge-lg bg-info">5</label>
    												<label class="badge badge-lg bg-info m-r-20">5</label>
    											</div>

    											/* use for medium size badge */

    											<div class="group-label">
    												<label class="badge badge-md bg-success">5</label>
    												<label class="badge badge-md bg-success">5</label>
    												<label class="badge badge-md bg-success m-r-20">5</label>
    											</div>

    											/* use for Default Size badge */

    											<div class="group-label">
    												<label class="badge bg-danger">5</label>
    												<label class="badge bg-danger">5</label>
    												<label class="badge bg-danger">5</label>
    											</div>

Use the `.badge-lg` class along with `.badge` for large badge and Use the `.badge-md` class along with `.badge` for medium badge.The`.badge` class use form small badge

5 5 5
5 5 5
5 5 5

##### Badges On Button

##### Code Explanation for Badges Button

    			                        /* Badges For General Button */

    			                        /* Badges For Primary Button */

    			                        /* Badges For Success Button */

    			                        /* Badges For Warning Button */

    			                        /* Badges For Danger Button */

    			                        /* Badges For Info Button */

##### Badges With Icon

Top Left badge

##### Code Explanation for Top Left Badge

    												/* Use For Badge Top Left */

    												<div class="label-icon">
    													<i class="icofont icofont-envelope"></i>
    														<label class="badge badge-default badge-top-left">5</label>
    												</div>

Use class `badge-top-left`

5
Top Right badge

##### Code Explanation for Top Right Badge

    												/* Use For Badge Top Right */

    												<div class="label-icon">
    													<i class="icofont icofont-envelope"></i>
    														<label class="badge bg-primary badge-top-right">9</label>
    												</div>

Use class `badge-top-right`

9
Bottom Left badge

##### Code Explanation for Bottom Left Badge

    												/* Use For Badge Bottom Left */

    												<div class="label-icon">
    													<i class="icofont icofont-envelope"></i>
    														<label class="badge bg-success badge-bottom-left">9</label>

    												</div>

Use class `badge-bottom-left`

9
Bottom Right badge

##### Code Explanation for Bottom Right Badge

    												/* Use For Badge Bottom Right */

    												<div class="label-icon">
    													<i class="icofont icofont-envelope"></i>
    														<label class="badge bg-warning badge-bottom-right">5</label>

    												</div>

Use class `badge-bottom-right`

5