Dado un documento HTML que tiene insignias de píldora (en caso de que no sepa qué es una insignia de píldora, consulte esto ) y la tarea es aumentar el tamaño de la insignia. Puede haber tres enfoques para hacer eso. Los enfoques se discuten a continuación: –
Enfoque 1: uso de estilo en línea: simplemente puede agregar un atributo de estilo a la etiqueta de intervalo que tiene badge-pill como clase y cambiar el tamaño de fuente de acuerdo con su deseo.
Ejemplo:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"> </head> <body> <h3> Size of Pill badge Simple Bootstrap Code </h3> <span class="badge badge-pill badge-primary"> </span> <h3> Size of Pill badge after using Approach 1st </h3> <span class="badge badge-pill badge-primary" style="font-size:2rem;"> </span> </body> </html>
Producción:
Enfoque 2: incrustar la insignia dentro de la etiqueta de encabezado: también podemos envolver la etiqueta de extensión de la insignia en etiquetas de encabezado diferentes para lograr el resultado deseado.
Ejemplo:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"> </head> <body> <div class="example"> <h3> Size of Pill badge Simple Bootstrap Code </h3> <span class="badge badge-pill badge-primary"> </span> <h3> Different Sizes of Pill badge after using Approach 2nd </h3> <h4>h1 tag</h4> <h1><span class="badge badge-pill badge-primary"> </span> </h1> <h4>h2 tag</h4> <h2><span class="badge badge-pill badge-primary"> </span> </h2> <h4>h3 tag</h4> <h3><span class="badge badge-pill badge-primary"> </span> </h3> <h4>h4 tag</h4> <h4><span class="badge badge-pill badge-primary"> </span> </h4> <h4>h5 tag</h4> <h5><span class="badge badge-pill badge-primary"> </span> </h5> <h4>h6 tag</h4> <h6><span class="badge badge-pill badge-primary"> </span> </h6> </div> </body> </html>
Producción:
Enfoque 3: anulando la clase usando CSS interno/externo: también podemos agregar nuestro propio nombre de clase personalizado para la insignia y en el archivo CSS, podemos actualizar la propiedad de tamaño de fuente para lograr el resultado deseado.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<style>
.increase-size {
font-size: 2rem;
}
</style>
</head>
<body>
<div class="example">
<h3>
Size of Pill badge Simple
Bootstrap Code
</h3>
<span class="badge badge-pill
badge-primary">
</span>
<h3>
Size of Pill badge after
using Approach 3nd
</h3>
<span class="badge badge-pill
badge-primary increase-size">
</span>
</div>
</body>
</html>
Producción:
