Bootstrap es una colección de herramientas gratuitas y de código abierto para crear sitios web y aplicaciones web receptivos. Si es nuevo en Bootstrap, le recomendamos encarecidamente que consulte nuestra introducción a Bootstrap 4 .
Las píldoras son una especie de insignia de Bootstrap con esquinas más redondeadas. Por defecto, las píldoras actuarán como un elemento de bloque en línea . Este comportamiento se define en una de las hojas de estilo principales de Bootstrap ( _badge.scss ).
Dado que la píldora es un elemento de bloque en línea, la alineación de una píldora se decide por la alineación mencionada en el contenedor principal de la píldora . Si el contenedor principal no tiene ninguna regla de alineación, los estilos se heredarán del ancestro más cercano de la píldora.
Podemos usar el centro de texto de clase de alineación de texto incorporado de Bootstrap para centrar una píldora o un grupo de píldoras. Si agregamos la clase text-center al contenedor principal de la píldora, podemos centrar las píldoras de alineación .
HTML
<p> Center aligned pills in a div by adding <i>text-center</i> class </p> <div class="text-center"> <span class="badge badge-pill badge-primary"> Primary </span> <span class="badge badge-pill badge-danger"> Danger </span> </div>
Código HTML: el código HTML completo se verá a continuación. Puede verificar el funcionamiento del siguiente código en nuestro IDE
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <!-- Bootstrap CSS library --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity= "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /> <!-- jQuery library --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <!-- JS library --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity= "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"> </script> <!-- Latest compiled JavaScript library --> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity= "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"> </script> </head> <body> <div class="container"> <h1>GeeksforGeeks</h1> <p>A computer science portal for geeks</p> <!-- Add pills --> <p> Center aligned pills in a div by adding <i>text-center</i> class </p> <div class="text-center"> <span class="badge badge-pill badge-primary"> Primary </span> <span class="badge badge-pill badge-danger"> Danger </span> </div> </div> </body> </html>
Producción:
Píldora de arranque
Del mismo modo, podemos usar text-right para alinear las pastillas a la derecha y text-left para alinearlas a la izquierda.
Hay algunos escenarios en los que no es posible agregar la clase text-center al padre, ya que afectará a otros estilos del padre. En estos escenarios, la forma recomendada es envolver las píldoras con una etiqueta de nivel de bloque como div o una etiqueta de párrafo .