Badge

Ejemplos

Ejemplo de título New

Ejemplo de título New

Ejemplo de título New

Ejemplo de título New

Ejemplo de título New
Ejemplo de título New

<h1>Ejemplo de título <span class="badge badge-primary">New</span></h1>

<h2>Ejemplo de título <span class="badge badge-primary">New</span></h2>

<h3>Ejemplo de título <span class="badge badge-primary">New</span></h3>

<h4>Ejemplo de título <span class="badge badge-primary">New</span></h4>

<h5>Ejemplo de título <span class="badge badge-primary">New</span></h5>

<h6>Ejemplo de título <span class="badge badge-primary">New</span></h6>

Badges: colores semánticos

Primary Secondary Success Danger Warning Info Light Dark White 

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

<span class="badge badge-secondary">Secondary</span>

<span class="badge badge-success">Success</span>

<span class="badge badge-danger">Danger</span>

<span class="badge badge-warning">Warning</span>

<span class="badge badge-info">Info</span>

<span class="badge badge-light">Light</span>

<span class="badge badge-dark">Dark</span>

<span class="badge badge-white">White</span>

Badges: Pills

Primary Secondary Success Danger Warning Info Light Dark White 

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

<span class="badge badge-pill badge-secondary">Secondary</span>

<span class="badge badge-pill badge-success">Success</span>

<span class="badge badge-pill badge-danger">Danger</span>

<span class="badge badge-pill badge-warning">Warning</span>

<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-white">White</span>

Badges: En botones


<button type="button" class="btn btn-secondary">

    Notificaciones <span class="badge badge-white">4</span>

</button>

Uso para mostrar datos y etiquetas de marketing

  • Para mostrar datos class="badge"
  • Para mostrar etiquetas de marketing class="badge badge-pill"
  • + 00:05 Diferencia de tiempo en ranking
  • 12:00 Horario de sesión en curso
  • 13:15 Horario general
  • Certificado
  • No Controlable
  • L Ligas
  • R Carreras
  • M Encuentros en grupo
Pos. Nombre Equipo Tiempo Dif.
1 CountryJavier Toledo Bkool Pro 2 00:35:00
2 CountryKazimsku Turikish Bkool Pro 2 00:35:05 + 00:05
3 CountryMobutu Sese Seko Bkool Pro 2 00:35:10 + 00:10
4 CountryKunta Kinte Bkool Pro 2 00:35:15 + 00:15
5 CountryVoldemor Bkool Pro 2 00:35:20 + 00:20
6 CountryGandalf Bkool Pro 2 00:35:25 + 00:25
7 CountryElpidio Valdés Bkool Pro 2 00:35:30 + 00:30
8 CountryOscar Carballido Bkool Pro 2 00:35:35 + 00:35
9 CountryGeneral Resoplez Bkool Pro 2 00:35:40 + 00:40
10 CountryTom Bkool Pro 2 00:35:45 + 00:45
Event
Event
LMovistar Virtual Cycling

Hoy
Movistar Virtual Cycling

12:00 13:15 15:00 16:00 18:30

Únete al campeonato de ciclismo virtual patrocinado por Movistar.

Unirme
Unirme