Bootstrap Badge Related Classes
Notes:
Bootstrap – Badge Related Classes:
Badge indicates the additional information about the content
Ex: How many times a button has been clicked, how many notifications are pending to review etc.
badge:
- converts the element to inline block, displays text little bit darker in color, smaller in size, adds some padding, adds some rounded corners etc.
<span class="badge">0</span>
Badge Color Related Classes:
badge-primary:
- Sets the text color to white and background color to blue color
<span class="badge badge-primary">0</span>
badge-secondary:
- Sets the text color to white and background color to mid gray color
<span class="badge badge-secondary">0</span
badge-success:
- Sets the text color to white and background color to green color
<span class="badge badge-success">0</span>
badge-info:
- Sets the text color to white and background color to pale blue color
<span class="badge badge-info">0</span>
badge-warning:
- Sets the text color to dark gray and background color to yellow color
<span class="badge badge-danger">0</span>
badge-danger:
- Sets the text color to white and background color to red color
<span class="badge badge-danger">0</span>
badge-dark:
- Sets the text color to light gray and background color to dark gray color
<span class="badge badge-dark">0</span>
badge-light:
- Sets the text color to dark gray and background color to light gray color
<span class="badge badge-light">0</span>
badge-pill:
- increases the size of rounded corners to little bit more
<span class="badge badge-primary badge-pill ">0</span>
Note: Badge is used to add the additional information to the content
Ex: How many times a button has been clicked, how many notifications are pending to review etc.
<button class="btn btn-primary">
Like <span class="badge badge-light badge-pill ">0</span>
</button>
Interview Questions:
