badge Archives - scmGalaxy https://www.scmgalaxy.com/tutorials/tag/badge/ A Platform for Software Engineers Fri, 20 Aug 2021 10:13:55 +0000 en-US hourly 1 https://wordpress.org/?v=7.1 Bootstrap: Component “Badge” https://www.scmgalaxy.com/tutorials/php-component-badge/ https://www.scmgalaxy.com/tutorials/php-component-badge/#respond Wed, 18 Aug 2021 09:53:26 +0000 https://www.scmgalaxy.com/tutorials/?p=8078 Badges are similar to labels; the primary difference is that the corners are more rounded. Badges are mainly used to highlight […]

The post Bootstrap: Component “Badge” appeared first on scmGalaxy.

]]> Badges are similar to labels; the primary difference is that the corners are more rounded. Badges are mainly used to highlight new or unread items. Example:-

<h1>Example heading <span class=" badge-secondary">New</span></h1>

Contextual Badges:

Contextual classes use to change the color of a badge. Example:-

<span class="badge badge-primary">Primary</span>

Pill Badges:-

Use the .badge-pill class to make the badges more round. Example:-

<span class="badge badge-pill badge-primary">Primary</span>

Badge inside an Element(button):-

An example of using a badge inside a button.

<button type="button" class="btn btn-primary">
  create button <span class="badge badge-light">1</span>
</button>

The post Bootstrap: Component “Badge” appeared first on scmGalaxy.

]]> https://www.scmgalaxy.com/tutorials/php-component-badge/feed/ 0