Bootstrap 4 tiene muchas clases de utilidad / ayuda para diseñar rápidamente elementos sin usar ningún código CSS.
Bordes
Usa las clases .border para agregar o quitar bordes de un elemento.
Ejm
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
Color de borde
Agregue un color al borde con cualquiera de las clases de color de borde contextual.
Ejm
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
Radio de borde (Border Radius)
Agrega esquinas redondeadas a un elemento con las clases redondeadas.
Ejm
<span class="rounded-sm"></span>
<span class="rounded"></span>
<span class="rounded-lg"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>
Float and Clearfix
Haz flotar un elemento hacia la derecha con la clase .float-right o hacia la izquierda con .float-left, y borra los floats con la clase .clearfix.
Ejm
El código es el siguiente:
<div class="clearfix">
<span class="float-left">Float left</span>
<span class="float-right">Float right</span>
</div>
Float Responsive
Haz un float a un elemento hacia la izquierda o hacia la derecha según el ancho de la pantalla, con las clases flotantes receptivas (.float – * – left | right – where * is sm (> = 576px), md (> = 768px), lg (> = 992 px) o xl (> = 1200 px)).
Ejm
<div class="float-sm-right">Float right on small screens or wider</div><br>
<div class="float-md-right">Float right on medium screens or wider</div><br>
<div class="float-lg-right">Float right on large screens or wider</div><br>
<div class="float-xl-right">Float right on extra large screens or wider</div><br>
<div class="float-none">Float none</div>
Alinear al centro
Centra un elemento con la clase .mx-auto (agrega margin-left y margin-right: auto):
Ejm
<div class="mx-auto bg-warning" style="width:150px">Centered</div>
Width (Anchura)
Establece el ancho de un elemento con las clases w- * (.w-25, .w-50, .w-75, .w-100, .mw-100):
Ejm
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="mw-100 bg-warning">Max Width 100%</div>
Height (Altura)
Establece la altura de un elemento con las clases h- * (.h-25, .h-50, .h-75, .h-100, .mh-100).
Ejm
<div style="height:200px;background-color:#ddd">
<div class="h-25 bg-warning">Height 25%</div>
<div class="h-50 bg-warning">Height 50%</div>
<div class="h-75 bg-warning">Height 75%</div>
<div class="h-100 bg-warning">Height 100%</div>
<div class="mh-100 bg-warning" style="height:500px">Max Height 100%</div>
</div>
Espaciado
Bootstrap 4 tiene una amplia gama de márgenes de respuesta y clases de utilidad de relleno. Funcionan para todos los puntos de interrupción: xs (<= 576px), sm (> = 576px), md (> = 768px), lg (> = 992px) o xl (> = 1200px)):
Las clases se usan en el formato: {propiedad} {lados} – {tamaño} para xs y {propiedad} {lados} – {punto de interrupción} – {tamaño} para sm, md, lg y xl.
Donde la propiedad es uno de:
m – sets marginp – sets padding
Donde los lados es uno de:
t – sets margin-top or padding-topb – sets margin-bottom or padding-bottoml – sets margin-left or padding-leftr – sets margin-right or padding-rightx – sets both padding-left and padding-right or margin-left and margin-righty – sets both padding-top and padding-bottom or margin-top and margin-bottom- blank – sets a
margin or padding on all 4 sides of the element
Donde el tamaño es uno de:
0 – sets margin or padding to 01 – sets margin or padding to .25rem (4px if font-size is 16px)2 – sets margin or padding to .5rem (8px if font-size is 16px)3 – sets margin or padding to 1rem (16px if font-size is 16px)4 – sets margin or padding to 1.5rem (24px if font-size is 16px)5 – sets margin or padding to 3rem (48px if font-size is 16px)auto – sets margin to auto
Nota: los márgenes también pueden ser negativos, agregando una «n» delante del tamaño:
n1 – sets margin to -.25rem (-4px if font-size is 16px)n2 – sets margin to -.5rem (-8px if font-size is 16px)n3 – sets margin to -1rem (-16px if font-size is 16px)n4 – sets margin to -1.5rem (-24px if font-size is 16px)n5 – sets margin to -3rem (-48px if font-size is 16px)
Sombras
Usa las clases .shadows para ensombrecer un elemento.
Ejm
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
Alineación vertical
Utiliza las clases de alineación para cambiar la alineación de los elementos (solo funciona en elementos en línea, bloque en línea, tabla en línea y celda de tabla).
Ejm
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
Embebidos Responsive
Cree incrustaciones de video o presentación de diapositivas Responsive en función del ancho del elemento primario.
Agrega el elemento .embed-responsive a cualquier elemento incrustado (como <iframe> o <video>) en un elemento padre con .embed-responsive y una relación de aspecto de tu elección.
Ejm
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Visibilidad
Use las clases .visible o .invisible para controlar la visibilidad de los elementos.
Nota: Estas clases no cambian el valor de visualización de CSS. Solo agregan visibilidad: visible o visibilidad: oculta:
Ejm
<div class="visible">I am visible</div>
<div class="invisible">I am invisible</div>
Posición
Usa la clase .fixed-top para hacer que cualquier elemento sea fijo / permanezca en la parte superior de la página.
Ejm
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
Usa la clase .fixed-bottom para hacer que cualquier elemento sea fijo / permanezca en la parte inferior de la página.
Ejm
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Usa la clase .sticky-top para hacer que cualquier elemento sea fijo / permanezca en la parte superior de la página cuando se desplace. Nota: Esta clase no funciona en IE11 y versiones anteriores (la tratará como position: relative).
Ejm
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>
Icono de cierre
Use la clase .close para diseñar un icono de cierre. Esto se usa a menudo para alertas y modales. Tenga en cuenta que usamos el símbolo × para crear el ícono real (una «x» más atractiva). También ten en cuenta que flota a la derecha por defecto.
Ejm
<button type="button" class="close">×</button>
Lectores de pantalla
Use la clase .sr-only para ocultar un elemento en todos los dispositivos, excepto los lectores de pantalla.
Ejm
<span class="sr-only">I will be hidden on all screens except for screen readers.</span>
Colores
Como se describe en el capítulo Colores, aquí hay una lista de todas las clases de texto y color de fondo:
Las clases para los colores de texto son: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (color de cuerpo predeterminado / a menudo negro) y .text-light.
Las clases de texto contextual también se pueden usar en enlaces, lo que agregará un color de desplazamiento más oscuro.
También puedes agregar un 50% de opacidad para texto en blanco o negro con las clases .text-black-50 o .text-white-50.
Colores de fondo
Las clases para los colores de fondo son: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark y .bg-light.
Ten en cuenta que los colores de fondo no establecen el color del texto, por lo que en algunos casos querrá usarlos junto con una clase .text– *.
Ejm
Clases para tipografías de texto
| Clase |
Descripción |
.display-* |
Los encabezados de pantalla se utilizan para destacar más que los encabezados normales (tamaño de fuente más grande y peso de fuente más ligero), y hay cuatro clases para elegir: .display-1, .display-2, .display-3, .display- 4 4 |
.font-weight-bold |
Texto en negrita |
.font-weight-bolder |
Bolder bold texto |
.font-weight-normal |
Texto normal |
.font-weight-light |
Light weight texto |
.font-weight-lighter |
Lighter weight texto |
.font-italic |
Texto en itálica |
.lead |
Hace que un párrafo se destaque |
.small |
indica texto más pequeño (establecido en el 85% del tamaño del padre) |
.text-break |
Evita que el texto largo rompa el diseño |
.text-center |
Indica texto alineado al centro |
.text-decoration-none |
Remueve la linea de abajo de un link |
.text-left |
Texto alineado a la derech |
.text-justify |
Texto justificad |
.text-monospace |
Texto monoespaciado |
.text-nowrap |
Texto no ajustado |
.text-lowercase |
Texto en minúsculas |
.text-reset |
Restablece el color de un texto o un enlace (hereda el color de su elemento primario) |
.text-right |
Texto alineado a la derecha |
.text-uppercase |
Texto en mayúsculas |
.text-capitalize |
Texto capitalizado |
.initialism |
muestra el texto dentro de un elemento <abbr> en un tamaño de fuente ligeramente más pequeño |
.list-unstyled |
Elimina el estilo de lista predeterminado y el margen izquierdo en los elementos de la lista (funciona tanto en <ul> como en <ol>). Esta clase solo se aplica a los elementos de la lista secundaria inmediata (para eliminar el estilo de lista predeterminado de cualquier lista anidada, aplique esta clase también a cualquier lista anidada) |
.list-inline |
Coloca todos los elementos de la lista en una sola línea (utilizada junto con .list-inline-item en cada elemento <li>) |
.pre-scrollable |
Hace que un elemento <pre> se pueda desplazar |
Bloque de elementos
Para convertir un elemento en un elemento de bloque, agrega la clase .d-block. Utiliza cualquiera de las clases de bloque d – * – para controlar CUANDO el elemento debe ser un elemento de bloque en un ancho de pantalla específico.
Ejm
<span class="d-block bg-success">d-block</span>
<span class="d-sm-block bg-success">d-sm-block</span>
<span class="d-md-block bg-success">d-md-block</span>
<span class="d-lg-block bg-success">d-lg-block</span>
<span class="d-xl-block bg-success">d-xl-block</span>
Otras clases de visualización
| Clase |
Descripción |
.d-none |
Oculta un elemento |
.d-*-none |
Oculta un elemento en un tamaño de pantalla específico |
.d-inline |
Hace a un elemento inline |
.d-*-inline |
Hace que un elemento esté en línea en un tamaño de pantalla específico |
.d-inline-block |
Hace un elemento bloque en línea |
.d-*-inline-block |
Crea un bloque en línea de elemento en un tamaño de pantalla específico |
.d-table |
Hace que un elemento se muestre como una tabla |
.d-*-table |
Hace que un elemento se muestre como una tabla en un tamaño de pantalla específico |
.d-table-cell |
Hace que un elemento se muestre como una celda de tabla |
.d-*-table-cell |
Hace que un elemento se muestre como una celda de tabla en un tamaño de pantalla específico |
.d-table-row |
Hace que un elemento se muestre como una fila de tabla |
.d-*-table-row |
Hace que un elemento se muestre como una fila de tabla en un tamaño de pantalla específico |
.d-flex |
Crea un contenedor flexbox y transforma a los hijos directos en elementos flexibles |
.d-*-flex |
Crea un contenedor de flexbox en un tamaño de pantalla específico |
.d-inline-flex |
Crea un contenedor flexbox en línea |
.d-*-inline-flex |
Crea un contenedor flexbox en línea en un tamaño de pantalla específico |
Flex
Usa las clases .flex- * para controlar el diseño con flexbox.