Bootstrap 5 es el último lanzamiento importante de Bootstrap en el que han renovado la interfaz de usuario y han realizado varios cambios. Las insignias se utilizan para crear etiquetas. Las insignias se escalan para coincidir con el tamaño del elemento principal inmediato mediante el uso de tamaños de fuente relativos.
Sintaxis:
<div class="badge bg-type"> Contents... <div>
Tipos: Los siguientes son los ocho tipos de fondos disponibles en Bootstrap 5.
- bg-primario
- bg-secundario
- bg-éxito
- bg-peligro
- bg-advertencia
- bg-info
- bg-luz
- bg-oscuro
Ejemplo 1: este ejemplo demuestra el funcionamiento de los primeros cuatro tipos de insignias en Bootstrap 5.
HTML
<!DOCTYPE html> <html> <head> <!-- Load Bootstrap --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> </head> <body> <div style="text-align: center;width: 600px;"> <h1 style="color: green;"> GeeksforGeeks </h1> </div> <div id="canvas" style="width: 600px; height: 200px;margin:20px;"> <h4> Hello World <span class="badge bg-primary"> GeeksforGeeks </span> </h4> <h4> Hello World <span class="badge bg-secondary"> GeeksforGeeks </span> </h4> <h4> Hello World <span class="badge bg-success"> GeeksforGeeks </span> </h4> <h4> Hello World <span class="badge bg-danger"> GeeksforGeeks </span> </h4> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo demuestra el funcionamiento de los últimos cuatro tipos de insignias en Bootstrap 5.
HTML
<!DOCTYPE html> <html> <head> <!-- Load Bootstrap --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> </head> <body> <div style="text-align: center;width: 600px;"> <h1 style="color: green;"> GeeksforGeeks </h1> </div> <div id="canvas" style="width: 600px; height: 200px;margin:20px;"> <h4> Hello World <span class="badge bg-warning"> GeeksforGeeks </span> </h4> <h4> Hello World <span class="badge bg-info"> GeeksforGeeks </span> </h4> <h4> Hello World <span class="badge bg-light text-dark"> GeeksforGeeks </span> </h4> <h4> Hello World <span class="badge bg-dark"> GeeksforGeeks </span> </h4> </div> </body> </html>
Producción:
Ejemplo 3: Este ejemplo muestra el funcionamiento de las insignias de notificaciones en Bootstrap 5.
HTML
<!DOCTYPE html> <html> <head> <!-- Load Bootstrap --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> </head> <body style="text-align:center;"> <div class="container mt-3"> <h1 style="color:green;"> GeeksforGeeks </h1> <button type="button" class="btn btn-primary"> Notifications <span class="badge bg-secondary"> 10 </span> </button> </div> </body> </html>
Producción:
Ejemplo 4: Este ejemplo muestra el funcionamiento de Pill Badges en Bootstrap 5.
HTML
<!DOCTYPE html> <html> <head> <!-- Load Bootstrap --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> </head> <body style="text-align:center;"> <div class="container mt-3"> <h1 style="color:green;"> GeeksforGeeks </h1> <span class="badge rounded-pill bg-primary"> Primary </span> <span class="badge rounded-pill bg-secondary"> Secondary </span> <span class="badge rounded-pill bg-success"> Success </span> <span class="badge rounded-pill bg-danger"> Danger </span> <span class="badge rounded-pill bg-warning text-dark"> Warning </span> <span class="badge rounded-pill bg-info"> Info </span> <span class="badge rounded-pill bg-light text-dark"> Light </span> <span class="badge rounded-pill bg-dark"> Dark </span> </div> </body> </html>
Producción:
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari