| Clase |
Descripción |
Categoría |
| .active |
Agrega un color de texto blanco al enlace activo en una barra de navegación |
Navbar |
| .active |
Agrega un color de fondo azul al elemento de la lista activa en un grupo de listas |
Lista de grupos |
| .active |
Agrega un color de fondo azul oscuro para simular un botón «presionado» |
Botones |
| .active |
Agrega un color de fondo azul al elemento desplegable activo en un menú desplegable |
Dropdowns (Listas desplegables) |
| .active |
Agrega un color de fondo azul al enlace de paginación activo (para resaltar la página actual) |
Paginación |
| .active |
Muestra / muestra el elemento del carrusel actual |
Carrusel |
| .alert |
Crea un cuadro de mensaje de alerta. |
Alerts |
| .alert-danger |
Alerta roja. Indica una acción peligrosa o potencialmente negativa |
Alerts |
| .alert-dark |
Alerta oscura Cuadro de alerta gris oscuro |
Alerts |
| .alert-dismissible |
indica un cuadro de alerta que se puede cerrar. Junto con la clase .closed, esta clase se usa para cerrar la alerta (agrega relleno adicional) |
Alerts |
| .alert-heading |
Agrega color:inherid (heredado) al elemento especificado |
Alerts |
| .alert-info |
Teal alert. Indica un cambio o acción informativa neutral |
Alerts |
| .alert-light |
Alerta de luz. Cuadro de alerta gris claro |
Alerts |
| .alert-link |
Se usa en enlaces dentro de alertas para proporcionar enlaces de colores coincidentes |
Alerts |
| .alert-primary |
Alerta azul. Indica una acción importante. |
Alerts |
| .alert-secondary |
Alerta gris. Indica una acción «menos» importante |
Alerts |
| .alert-success |
Alerta verde. Indica una acción exitosa o positiva |
Alerts |
| .alert-warning |
Alerta amarilla. Indica precaución con esta acción. |
Alerts |
| .align-baseline |
El elemento está alineado con la línea base del padre. Esto es por defecto |
Utilidades |
| .align-bottom |
El elemento está alineado con el elemento más bajo de la línea. |
Utilidades |
| .align-middle |
El elemento se coloca en el medio del elemento padre |
Utilidades |
| .align-top |
El elemento está alineado con la parte superior del elemento más alto de la línea |
Utilidades |
| .align-text-top |
El elemento está alineado con la parte superior de la fuente del elemento principal |
Utilidades |
| .align-text-bottom |
El elemento está alineado con la parte inferior de la fuente del elemento principal. |
Utilidades |
| .align-content-around |
Alinea los elementos reunidos «alrededor» |
Flex |
| .align-content-*-around |
Alinee los elementos reunidos «alrededor» en diferentes pantallas |
Flex |
| .align-content-center |
Alinea los elementos reunidos en el centro. |
Flex |
| .align-content-*-center |
Alinee los elementos reunidos en el centro en diferentes pantallas. |
Flex |
| .align-content-end |
Alinea los elementos reunidos al final |
Flex |
| .align-content-*-end |
Alinea los elementos reunidos al final en diferentes pantallas |
Flex |
| .align-content-start |
Alinea elementos reunidos desde el principio |
Flex |
| .align-content-*-start |
Alinea los elementos reunidos desde el principio en diferentes pantallas |
Flex |
| .align-content-stretch |
Estira objetos reunidos |
Flex |
| .align-content-*-stretch |
Estira elementos reunidos en diferentes pantallas |
Flex |
| .align-items-start |
Alinea filas individuales de elementos desde el principio |
Flex |
| .align-items-*-start |
Alinea filas individuales de elementos desde el principio en diferentes pantallas |
Flex |
| .align-items-end |
Alinea filas individuales de elementos al final |
Flex |
| .align-items-*-end |
Alinea filas individuales de elementos al final en diferentes pantallas |
Flex |
| .align-items-center |
Alinea filas individuales de elementos en el centro |
Flex |
| .align-items-*-center |
Alinea filas individuales de elementos en el centro en diferentes pantallas |
Flex |
| .align-items-baseline |
Alinea filas individuales de elementos en la línea de base |
Flex |
| .align-items-*-baseline |
Alinea filas individuales de elementos en la línea de base en diferentes pantallas |
Flex |
| .align-items-stretch |
Estira filas individuales de artículos |
Flex |
| .align-items-*-stretch |
Estira filas individuales de elementos en diferentes pantallas |
Flex |
| .align-self-start |
Alinea un elemento flexible desde el principio |
Flex |
| .align-self-*-start |
Alinea un elemento flexible desde el principio en diferentes pantallas |
Flex |
| .align-self-end |
Alinea un elemento flexible al final |
Flex |
| .align-self-*-end |
Alinea un elemento flexible al final en diferentes pantallas |
Flex |
| .align-self-center |
Alinea un elemento flexible en el centro |
Flex |
| .align-self-*-center |
Alinea un elemento flexible en el centro en diferentes pantallas |
Flex |
| .align-self-baseline |
Alinea un elemento flexible en la línea de base |
Flex |
| .align-self-*-baseline |
Alinea un elemento flexible en la línea de base en diferentes pantallas |
Flex |
| .align-self-stretch |
Estira un elemento flexible |
Flex |
| .align-self-*-stretch |
Estira un elemento flexible en diferentes pantallas |
Flex |
| .badge |
Crea una insignia circular (círculo gris, a menudo utilizado como indicador numérico) |
Badges (Insignias) |
| .badge-danger |
Insignia roja Indica una acción peligrosa o potencialmente negativa |
Badges (Insignias) |
| .badge-dark |
Insignia oscura Cuadro de alerta gris oscuro |
Badges (Insignias) |
| .badge-info |
Insignia verde azulado. Indica un cambio o acción informativa neutra |
Badges (Insignias) |
| .badge-light |
Insignia de luz Cuadro de alerta gris claro |
Badges (Insignias) |
| .badge-pill |
Hace una insignia más redonda |
Badges (Insignias) |
| .badge-primary |
Insignia azul, indica una acción importante |
Badges (Insignias) |
| .badge-secondary |
Insignia gris, indica una acción menos importante |
Badges (Insignias) |
| .badge-success |
Insignia verde Indica una acción exitosa o positiva |
Badges (Insignias) |
| .badge-warning |
Insignia amarilla. Indica precaución con esta acción. |
Badges (Insignias) |
| .bg-danger |
Agrega un color de fondo rojo a un elemento. Representa peligro o una acción negativa |
Colores |
| .bg-dark |
Agrega un color de fondo gris oscuro a un elemento |
Colores |
| .bg-info |
dds un color de fondo verde azulado a un elemento. Representa alguna información |
Colores |
| .bg-light |
Agrega un color de fondo gris claro a un elemento |
Colores |
| .bg-primary |
Agrega un color de fondo azul a un elemento. Representa algo importante |
Colores |
| .bg-secondary |
Agrega un color de fondo gris a un elemento. Indica una acción «menos» importante |
Colores |
| .bg-success |
Agrega un color de fondo verde a un elemento. Indica éxito o una acción positiva |
Colores |
| .bg-warning |
Agrega un color de fondo amarillo / naranja a un elemento. Representa una advertencia o una acción negativa. |
Colores |
| .blockquote |
Estilos de bloques de contenido entregados de otra fuente (agrega un tamaño de fuente más grande (1.25rem) |
Tipografía |
| .blockquote-footer |
Diseña el título de la fuente dentro de la cita en bloque (texto gris claro con sangría |
Tipografía |
| .border |
Añade borde a un elemento |
Utilidades |
| .border-bottom-0 |
Elimina el borde inferior de un elemento |
Utilidades |
| .border-danger |
Agrega un borde rojo a un elemento (indica peligro |
Utilidades |
| .border-dark |
Agrega un borde oscuro a un elemento |
Utilidades |
| .border-info |
Agrega un borde verde azulado a un elemento (indica información |
Utilidades |
| .border-left-0 |
Elimina el borde izquierdo de un elemento |
Utilidades |
| .border-light |
Agrega un borde gris claro a un elemento |
Utilidades |
| .border-primary |
Añade un borde azul a un elemento |
Utilidades |
| .border-right-0 |
Elimina el borde derecho de un elemento |
Utilidades |
| .border-top-0 |
Elimina el borde superior de un elemento |
Utilidades |
| .border-secondary |
Añade un borde gris a un elemento |
Utilidades |
| .border-success |
Agrega un borde verde a un elemento (indicando satisfacción o éxito) |
Utilidades |
| .border-warning |
Agrega un borde naranja a un elemento (indica advertencia) |
Utilidades |
| .border-white |
Añade un borde blanco a un elemento |
Utilidades |
| .border-0 |
Elimina todos los bordes de un elemento |
Utilidades |
| .breadcrumb |
Una paginación. Indica la ubicación de la página actual dentro de una jerarquía de navegación |
Paginación |
| .breadcrumb-item |
Elementos de la lista de estilos o enlaces dentro de la ruta de exploración |
Paginación |
| .btn |
Crea un botón básico (fondo gris y esquinas redondeadas |
Botones |
| .btn-block |
Crea un botón de nivel de bloque que abarca todo el ancho del elemento primario |
Botones |
| .btn-dark |
Botón gris oscuro |
Botones |
| .btn-danger |
Botón rojo, indica peligro o acción negativa |
Botones |
| .btn-group |
Grupo de botones juntos en una única línea |
Grupo de botones |
| .btn-group-lg |
Grupo de botones grande (hace que todos los botones de un grupo de botones sean más grandes: mayor tamaño de fuente y relleno |
Grupo de botones |
| .btn-group-sm |
Pequeño grupo de botones (reduce todos los botones de un grupo de botones |
Grupo de botones |
| .btn-group-vertical |
Hace que un grupo de botones aparezca apilado verticalmente |
Grupo de botones |
| .btn-info |
Teal button. Representa un cambio o acción informativa neutral |
Botones |
| .btn-light |
Botón gris claro |
Botones |
| .btn-link |
Hace que un botón parezca un enlace (obtener el comportamiento del botón |
Botones |
| .btn-lg |
Botón grande |
Botones |
| .btn-outline-dark |
Botón gris oscuro con borde / contorneado |
Botones |
| .btn-outline-danger |
Botón rojo con borde / contorneado. Indica peligro o una acción negativa |
Botones |
| .btn-outline-info |
bordeado verdiazul / botón contorneado. Representa un cambio o acción informativa neutra |
Botones |
| .btn-outline-light |
Botón gris claro con borde / contorno |
Botones |
| .btn-outline-primary |
Botón con borde azul / contorneado |
Botones |
| .btn-outline-secondary |
Botón gris con borde / contorno. Indica una acción «menos» importante |
Botones |
| .btn-outline-success |
Botón con borde / contorno verde. Indica éxito o una acción positiva |
Botones |
| .btn-outline-warning |
Botón naranja con borde / contorno. Representa una advertencia o una acción negativa |
Botones |
| .btn-primary |
Botón azul. Indica algo importante |
Botones |
| .btn-sm |
Botón pequeño |
Botones |
| .btn-secondary |
Botón gris. Indica una acción «menos» importante |
Botones |
| .btn-success |
Botón verde. Indica éxito o una acción positiva |
Botones |
| .btn-toolbar |
Combina conjuntos de grupos de botones en barras de herramientas de botones para componentes más complejos |
Botones |
| .btn-warning |
Botón naranja. Representa una advertencia o una acción negativa |
Botones |
| .card |
Crea una card (tarjeta) |
Cards |
| .card-body |
Contenedor para contenido de tarjeta |
Cards |
| .card-columns |
Contenedor para crear una cuadrícula de tarjetas de mampostería |
Cards |
| .card-danger |
Agrega un color de fondo rojo a la tarjeta. Representa peligro o una acción negativa |
Cards |
| .card-dark |
Agrega un color de fondo gris a la tarjeta |
Cards |
| .card-deck |
Contenedor para crear una cuadrícula de tarjetas de igual altura y ancho |
Cards |
| .card-footer |
Pie de página de la tarjeta |
Cards |
| .card-group |
Contenedor para crear una cuadrícula de tarjetas de igual altura y ancho, sin márgenes laterales |
Cards |
| .card-header |
Encabezado de tarjeta |
Cards |
| .card-header-tabs |
Pestañas de navegación de estilos dentro del encabezado de la tarjeta |
Cards |
| .card-header-pills |
Pastillas de navegación de estilos dentro del encabezado de la tarjeta |
Cards |
| .card-img-bottom |
Colocar la imagen en la parte inferior dentro de una tarjeta |
Cards |
| .card-img-overlay |
Convierte una imagen en un fondo de tarjeta. A menudo se usa para agregar texto en la parte superior de la imagen |
Cards |
| .card-img-top |
Colocar la imagen en la parte superior dentro de una tarjeta |
Cards |
| .card-info |
Agrega un color de fondo verde azulado a la tarjeta. Representa alguna información |
Cards |
| .card-light |
Agrega un color de fondo gris claro a la tarjeta |
Cards |
| .card-link |
Agrega un color azul a cualquier enlace y un efecto de desplazamiento dentro de la tarjeta |
Cards |
| .card-primary |
Agrega un color de fondo azul a la tarjeta. Representa algo importante |
Cards |
| .card-secondary |
Agrega un color de fondo gris a la tarjeta. Representa algo «menos» importante |
Cards |
| .card-subtitle |
La clase .card-subtitle se usa después de la clase .card-title y agrega lo siguiente a un elemento: margin-top: -.375rem; marginado-bottom: 0 |
Cards |
| .card-success |
Agrega un color de fondo verde a la tarjeta. Indica éxito o una acción positiva |
Cards |
| .card-text |
Se usa para eliminar los márgenes inferiores de un elemento p si es el último hijo (o el único), dentro de .card-body |
Cards |
| .card-title |
Agrega un título a cualquier elemento de encabezado dentro del card |
Cards |
| .card-warning |
Agrega un color de fondo amarillo / naranja a la tarjeta. Representa una advertencia o una acción negativa |
Cards |
| .carousel |
Crea un carrusel (presentación de diapositivas) |
Carrusel |
| .carousel-caption |
Crea un texto de título para cada diapositiva en el carrusel |
Carrusel |
| .carousel-control-next |
Contenedor para el «siguiente» carrusel / enlace del artículo |
Carrusel |
| .carousel-control-next-icon |
Se usa junto con .carousel-control-next para crear un ícono / botón «siguiente» (flecha hacia la derecha |
Carrusel |
| .carousel-control-prev |
Contenedor para carrusel «anterior» / enlace de artículo |
Carrusel |
| .carousel-control-prev-icon |
Se usa junto con .carousel-control-prev para crear un ícono / botón «anterior» (flecha hacia la izquierda |
Carrusel |
| .carousel-indicators |
Agrega pequeños puntos / indicadores en la parte inferior de cada diapositiva (que indica cuántas diapositivas hay en el carrusel y qué diapositiva está viendo el usuario actualmente) |
Carrusel |
| .carousel-inner |
contenedor para elementos deslizantes |
Carrusel |
| .carousel-item |
Especifica el contenido de cada diapositiva |
Carrusel |
| .clearfix |
Limpia Floats |
Utilidades |
| .close |
Estilos de un icono de cierre. Esto se usa a menudo para alertas y modales. A menudo se usa junto con × símbolo para crear el ícono real (una «x» más atractiva). Flota a la derecha por defecto |
Utilidades |
| .col-auto |
Haga que las columnas del formulario se dimensionen automáticamente en función de su contenido |
Formularios |
| .col-* |
Crea un diseño de columna para dispositivos extra pequeños (y arriba / todos los dispositivos, si no se combina con otras clases de columnas). El * puede ser un número entre 1 y 12 |
Sistema Grid |
| .col-sm-* |
Crea un diseño de columna para dispositivos pequeños (y hasta, si no se combina con otras clases de columna). El * puede ser un número entre 1 y 12 |
Sistema Grid |
| .col-md-* |
Crea un diseño de columna para dispositivos medianos (y hasta, si no se combina con otras clases de columna). El * puede ser un número entre 1 y 12 |
Sistema Grid |
| .col-lg-* |
Crea un diseño de columna para dispositivos grandes (y hasta, si no se combina con otras clases de columna). El * puede ser un número entre 1 y 12 |
Sistema Grid |
| .col-xl-* |
Crea un diseño de columna para dispositivos extra grandes. El * puede ser un número entre 1 y 12 |
Sistema Grid |
| .collapse |
Indica contenido plegable, que puede ocultarse o mostrarse a pedido |
Collapse |
| .collapse show |
Muestra el contenido colapsable por defecto |
Collapse |
| .container |
Contenedor de ancho fijo con anchos determinados por sitios de pantalla. Margen igual a izquierda y derecha |
Contenedor |
| .container-fluid |
Un contenedor que abarca todo el ancho de la pantalla |
Contenedor |
| .container-* |
Contenedor Responsive |
Contenedor |
| .custom-checkbox |
Un contenedor para casillas de verificación personalizadas |
Formularios |
| .custom-control |
Un contenedor para formularios personalizados |
Formularios |
| .custom-control-input |
Formulario input personalizado |
Formularios |
| .custom-control-inline |
Controles de formulario personalizados en línea (horizontalmente – lado a lado |
Formularios |
| .custom-control-label |
Etiqueta personalizada, cuando se usa junto con un control de formulario personalizado |
Formularios |
| .custom-file |
Carga personalizada de archivos |
Formularios |
| .custom-file-input |
Carga personalizada de archivos |
Formularios |
| .custom-file-label |
Etiqueta de archivo personalizada |
Formularios |
| .custom-radio |
Contenedor personalizado para botones tipo radio |
Formularios |
| .custom-range |
Contenedor personalizado para input type range |
Formularios |
| .custom-select |
Contenedor personalizados para <select> |
Formularios |
| .custom-select-lg |
Amplio menú de selección personalizado |
Formularios |
| .custom-select-sm |
Pequeño menú de selección personalizado |
Formularios |
| .custom-switch |
Interruptor de palanca personalizado |
Formularios |
| .disabled |
Deshabilita un botón (agrega opacidad y un ícono de «señal de no estacionarse» al pasar el mouse |
Botones |
| .disabled |
Deshabilita un elemento desplegable (agrega un color de texto gris y un ícono de «señal de no estacionarse» al pasar el mouse |
Dropdowns |
| .disabled |
Inhabilita un enlace de paginación (no se puede hacer clic en él; agrega un color de texto gris y un ícono de «señal de no estacionarse» al pasar el mouse |
Paginación |
| .disabled |
Inhabilita un elemento de la lista en un grupo de la lista (no se puede hacer clic en él; agrega un color gris claro y elimina el efecto de desplazamiento sobre los enlaces del elemento de la lista |
Grupos de lista |
| .dropdown |
Crea un menú conmutable que permite al usuario elegir un valor de una lista predefinida |
Dropdowns |
| .dropdown-divider |
Se utiliza para separar enlaces en el menú desplegable con un borde horizontal delgado |
Dropdowns |
| .dropdown-header |
Se usa para agregar encabezados dentro del menú desplegable |
Dropdowns |
| .dropdown-item |
Crea un elemento desplegable (agregado a enlaces o botones dentro de .dropdown-menu |
Dropdowns |
| .dropdown-item-text |
Se usa para agregar texto sin formato a un elemento desplegable, o se usa en enlaces para el estilo de enlace predeterminado |
Dropdowns |
| .dropdown-menu |
Agrega los estilos predeterminados para el contenedor del menú desplegable |
Dropdowns |
| .dropdown-menu-right |
Alinea a la derecha un menú desplegable |
Dropdowns |
| .dropdown-toggle |
Se usa en el botón que debe ocultar y mostrar (alternar) el menú desplegable |
Dropdowns |
| .dropleft |
Alinea a la izquierda el menú desplegable |
Dropdowns |
| .dropright |
Alinea a la derecha el menú desplegable |
Dropdowns |
| .dropup |
Indica un menú desplegable (hacia arriba en lugar de hacia abajo |
Dropdowns |
| .d-block |
Crea un elemento de bloque (agrega display: block |
Utilidades |
| .d-*-block |
Crea un elemento de bloque en un ancho de pantalla específico |
Utilidades |
| .d-inline |
Hace a un elemento inline |
Utilidades |
| .d-*-inline |
Hace a un elemento inline en un ancho de pantalla específico |
Utilidades |
| .d-inline-block |
Hace a un elemento inline-block |
Utilidades |
| .d-*-inline-block |
Hace a un elemento inline-block en un ancho de pantalla específico |
Utilidades |
| .d-flex |
Crea un contenedor flexbox y transforma a los hijos directos en elementos flexibles |
Flex |
| .d-*-flex |
Crea un contenedor de flexbox en un tamaño de pantalla específico |
Flex |
| .d-inline-flex |
Crea un contenedor flexbox en línea |
Flex |
| .d-*-inline-flex |
Crea un contenedor flexbox en línea en un tamaño de pantalla específico |
Flex |
| .d-none |
Oculta un elemento |
Utilidades |
| .d-*-none |
Oculta un elemento en un tamaño de pantalla específico |
Utilidades |
| .d-table |
Hace que un elemento se muestre como una tabla |
Utilidades |
| .d-*-table |
Hace que un elemento se muestre como una tabla en un tamaño de pantalla específico |
Utilidades |
| .d-table-cell |
Hace que un elemento se muestre como una celda de tabla |
Utilidades |
| .d-*-table-cell |
Hace que un elemento se muestre como una celda de tabla en un tamaño de pantalla específico |
Utilidades |
| .d-table-row |
Hace que un elemento se muestre como una fila de tabla |
Utilidades |
| .d-*-table-row |
Hace que un elemento se muestre como una fila de tabla en un tamaño de pantalla específico |
Utilidades |
| .embed-responsive |
Contenedor para contenido incrustado. Hace que los videos o las presentaciones de diapositivas se escalen correctamente en cualquier dispositivo |
Imagen |
| .embed-responsive-16by9 |
Contenedor para contenido incrustado. Crea un contenido incrustado de relación de aspecto 16: 9 |
Imagen |
| .embed-responsive-3by4 |
Contenedor para contenido incrustado. Crea un contenido incrustado de relación de aspecto 3: 4 |
Imagen |
| .embed-responsive-item |
Utilizado dentro de .embed-responsive. Escala el video muy bien al elemento padre |
Imagen |
| .fade |
Agrega un efecto de desvanecimiento al cerrar un cuadro de alerta |
Alertas |
| .fade |
Agrega un efecto de desvanecimiento al mostrar el contenido de la pestaña / píldora |
Navs |
| .fade |
Agrega un efecto de desvanecimiento al abrir un modal |
Modal |
| .fixed-bottom |
Hace que un elemento permanezca en la parte inferior de la pantalla (fijo / fijo) |
Utilidades |
| .fixed-top |
Hace que un elemento permanezca en la parte superior de la pantalla (fijo / fijo) |
Utilidades |
| .flex-column |
Muestra elementos flexibles verticalmente |
Flex |
| .flex-*-column |
Muestra elementos flexibles verticalmente en diferentes tamaños de pantalla |
Flex |
| .flex-column-reverse |
Muestra elementos flexibles verticalmente, invertidos |
Flex |
| .flex-*-column-reverse |
Muestra elementos flexibles verticalmente, invertidos, en diferentes tamaños de pantalla |
Flex |
| .flex-fill |
Se usa en elementos flexibles para forzarlos en columnas de igual ancho |
Flex |
| .flex-*-fill |
Forzar elementos flexibles en anchos iguales en diferentes pantallas |
Flex |
| .flex-grow-0|1 |
Se usa en un solo elemento flexible para ocupar el resto del espacio disponible |
Flex |
| .flex-nowrap |
No envuelve artículos flexibles |
Flex |
| .flex-*-nowrap |
No envuelve artículos en diferentes pantallas |
Flex |
| .flex-shrink-0|1 |
Se usa en un solo elemento flexible para encogerlo si es necesario |
Flex |
| .flex-row |
Mostrar elementos flexibles horizontalmente (uno al lado del otro) |
Flex |
| .flex-*-row |
Mostrar elementos flexibles horizontalmente en un tamaño de pantalla específico |
Flex |
| .flex-row-reverse |
Mostrar elementos flexibles alineados a la derecha y horizontalmente |
Flex |
| .flex-*-row-reverse |
Muestre elementos flexibles alineados a la derecha y horizontalmente en un tamaño de pantalla específico |
Flex |
| .flex-wrap |
Envuelve artículos flexibles |
Flex |
| .flex-*-wrap |
Envuelve artículos flexibles en un tamaño de pantalla específico |
Flex |
| .flex-wrap-reverse |
Envuelva los artículos flexibles, en orden inverso |
Flex |
| .flex-*-wrap-reverse |
Envuelva elementos flexibles, en orden inverso en diferentes pantallas |
Flex |
| .float-left |
Flota un elemento a la izquierda |
Utilidades |
| .float-*-left |
Flota un elemento a la izquierda en diferentes pantallas |
Utilidades |
| .float-none |
Elimina los Floats de un elemento |
Utilidades |
| .float-right |
Flota un elemento a la derecha |
Utilidades |
| float-*-right |
Flota un elemento a la derecha en diferentes pantallas |
Utilidades |
| .font-italic |
Texto en itálica |
Tipografía |
| .font-weight-bold |
Texto en negrita |
Tipografía |
| .font-weight-bolder |
Texto en negrita (font-weight: bolder) |
Tipografía |
| .font-weight-light |
Texto ligero (font-weight: 300) |
Tipografía |
| .font-weight-lighter |
Texto ligero (font-weight: lighter) |
Tipografía |
| .font-weight-normal |
Texto normal (font-weight: 400) |
Tipografía |
| .form-check |
Contenedor para casillas de verificación. Agrega el relleno adecuado |
Formularios |
| .form-check-inline |
Hace que las casillas de verificación aparezcan en la misma línea (horizontalmente) |
Formularios |
| .form-check-input |
Casillas de verificación de estilos con márgenes adecuados |
Formularios |
| .form-check-label |
Garantiza márgenes adecuados para las etiquetas utilizadas junto con casillas de verificación |
Formularios |
| .form-control |
Se utiliza en elementos de entrada, área de texto y selección para abarcar todo el ancho de la página y hacer que responda |
Formularios |
| .form-control-file |
Añade display:block y width:100% a las casillas input type file |
Formularios |
| .form-control-lg |
Control de formulario grande |
Formularios |
| .form-control-plaintext |
Diseña un control de formulario como texto sin formato |
Formularios |
| .form-control-range |
Añade display:block y width:100% a las casillas input type range |
Formularios |
| .form-control-sm |
Control de formulario pequeño |
Formularios |
| .form-group |
Contenedor de formularios |
Formularios |
| .form-inline |
Hace que <form> esté alineado a la izquierda con controles de bloque en línea (esto solo se aplica a formularios dentro de ventanas gráficas que tienen al menos 768 px de ancho |
Formularios |
| .form-row |
Contenedor para columnas responsive (menos márgenes izquierdo y derecho que .row / anula los canales de columna predeterminados |
Formularios |
| .h1 – .h6 |
Hace que un elemento parezca un encabezado de la clase elegida (h1-h6) |
Tipografía |
| .h-25 |
Establece la altura de un elemento al 25% |
Utilidades |
| .h-50 |
Establece la altura de un elemento al 50% |
Utilidades |
| .h-75 |
Establece la altura de un elemento al 75% |
Utilidades |
| .h-100 |
Establece la altura de un elemento al 100% |
Utilidades |
| .img-fluid |
Imagen receptiva (agrega ancho máximo: 100% y altura: automático |
Imagen |
| .img-thumbnail |
Da forma a una imagen en miniatura (bordes finos de color gris claro |
Imagen |
| .initialism |
Muestra el texto dentro de un elemento <abbr> en un tamaño de fuente ligeramente más pequeño |
tipografía |
| .input-group |
Contenedor para mejorar una entrada agregando un icono, texto o un botón delante o detrás del campo de entrada como un «texto de ayuda |
Grupo Input |
| .input-group-append |
Contenedor de grupo de entrada para agregar texto de ayuda detrás de un campo de entrada |
Grupo Input |
| .input-group-lg |
Grupo de entrada grande |
Grupo Input |
| .input-group-prepend |
Contenedor de grupo de entrada para agregar texto de ayuda frente a un campo de entrada |
Grupo Input |
| .input-group-sm |
Grupo de entrada pequeño |
Grupo Input |
| .input-group-text |
Da estilo al texto de ayuda especificado en un grupo de entrada |
Grupo Input |
| .input-lg |
Casilla Input grande |
Input |
| .input-sm |
Casilla Input pequeña |
Input |
| .invalid-feedback |
Crea un mensaje de validación personalizado utilizado en formularios validados (color de texto rojo) |
Formularios |
| .invalid-tooltip |
Crea un mensaje de validación personalizado utilizado en formularios validados (información sobre herramientas roja) |
Formularios |
| .invisible |
Hace a un elemento invisibel |
Utilidades |
| .is-invalid |
Valida un elemento de formulario (agrega un borde rojo a los campos de entrada). Nota: para el lado del servidor |
Formularios |
| .is-valid |
Valida un elemento de formulario (agrega un borde verde a los campos de entrada). Nota: para el lado del servidor |
Formularios |
| .jumbotron |
Crea un encabezado / cuadro gris acolchado con esquinas redondeadas que amplía los tamaños de fuente del texto dentro de él. Se utiliza para llamar la atención sobre algún contenido o información especial |
Jumbotron |
| .jumbotron-fluid |
Crea un jumbotron de ancho completo (encabezado gris acolchado) sin bordes redondeado) |
Jumbotron |
| .justify-content-* |
Alinea elementos flexibles desde el principio, al final, centrados, en el medio y «alrededor» |
Flex |
| .justify-content-*-around |
Alinea elementos flexibles «alrededor» en diferentes tamaños de pantalla |
Flex |
| .justify-content-*-between |
Alinea elementos flexibles en «entre» en diferentes tamaños de pantalla |
Flex |
| .justify-content-*-center |
Alinea elementos flexibles en el centro en diferentes tamaños de pantalla |
Flex |
| .justify-content-*-end |
Alinea elementos flexibles al final en diferentes tamaños de pantalla |
Flex |
| .justify-content-*-start |
Alinea elementos flexibles desde el principio en diferentes tamaños de pantalla |
Flex |
| .lead |
Aumentar el tamaño de fuente y la altura de línea de un párrafo |
Tipografía |
| .list-group |
Crea un grupo de lista con bordes para elementos <li> |
Grupo de listas |
| .list-group-flush |
Elimina algunos bordes y esquinas redondeadas de los elementos de la lista en un grupo de listas |
Grupo de listas |
| .list-group-horizontal |
Mostrar elementos de la lista horizontalmente en lugar de verticalmente (uno al lado del otro en lugar de uno encima del otro) |
Grupo de listas |
| .list-group-horizontal-* |
Mostrar elementos de la lista horizontalmente en lugar de verticalmente en diferentes tamaños de pantalla |
Grupo de listas |
| .list-group-item |
Agregado a cada elemento <li> en el grupo de lista |
Grupo de listas |
| .list-group-item-danger |
Color de fondo rojo para un elemento de la lista en un grupo de listas |
Grupo de listas |
| .list-group-item-dark |
Color gris oscuro para un elemento de la lista en un grupo de listas |
Grupo de listas |
| .list-group-item-info |
Color de fondo azul claro para un elemento de la lista en un grupo de listas |
Grupo de listas |
| .list-group-item-light |
Color de fondo gris claro para un elemento de la lista en un grupo de listas |
Grupo de listas |
| .list-group-item-primary |
Color de fondo azul para un elemento de la lista en un grupo de listas |
Grupo de listas |
| .list-group-item-success |
Color de fondo verde para un elemento de la lista en un grupo de listas |
Grupo de listas |
| .list-group-item-warning |
Color de fondo amarillo para un elemento de la lista en un grupo de listas |
Grupo de listas |
| .list-inline |
Coloca todos los elementos de la lista en una sola línea (utilizada junto con .list-inline-item en cada elemento <li> |
Tipografía |
| .list-inline-item |
Coloca todos los elementos de la lista en una sola línea (utilizada junto con .list-inline en el elemento padre <ul> |
Tipografía |
| .list-unstyled |
Elimina todos los estilos predeterminados de estilo de lista (viñetas, margen izquierdo, etc.) de una lista <ul> o <ol> |
Tipografía |
| .mark |
Texto resaltado |
Tipografía |
| .media |
Alinea los objetos multimedia junto con el contenido (como imágenes o videos, a menudo utilizado para comentarios en una publicación de blog, etc.) |
Media |
| .media-body |
Contenedor para contenido multimedia |
Media |
| .modal |
Identifica el contenido como modal y lo enfoca |
Modal |
| .modal-body |
Define el estilo para el cuerpo del modal. Agrega cualquier marcado HTML aquí (p, img, etc.) |
Modal |
| .modal-content |
Estiliza el modal (borde, color de fondo, etc.). Dentro de esto, agregue el encabezado, el cuerpo y el pie de página del modal, si es necesario |
Modal |
| .modal-dialog-centered |
Centra el modal vertical y horizontalmente dentro de la página |
Modal |
| .modal-dialog-scrollable |
Agrega una barra de desplazamiento dentro del modal |
Modal |
| .modal-footer |
El pie de página del modal (a menudo contiene un botón de acción y un botón de cierre) |
Modal |
| .modal-header |
El encabezado del modal (a menudo contiene un título y un botón de cierre) |
Modal |
| .modal-lg |
Modal grande (más ancho que el predeterminado) |
Modal |
| .modal-sm |
Modal pequeño (más que el predeterminado) |
Modal |
| .modal-xl |
Modal extra grande |
Modal |
| .m-# / m-*-# |
Clases de margen Responsive. * puede ser sm, md, lg o xl. # puede ser un número entre 0 y 5 |
Utilidades |
| .mt-# / mt-*-# |
Clases de margen superior Responsive. * puede ser sm, md, lg o xl. # puede ser un número entre 0 y 5 |
Utilidades |
| .mb-# / mb-*-# |
Clases de margen inferior Responsive. * puede ser sm, md, lg o xl. # puede ser un número entre 0 y 5 |
Utilidades |
| .ml-# / ml-*-# |
Clases de margen izquierdo Responsive. * puede ser sm, md, lg o xl. # puede ser un número entre 0 y 5 |
Utilidades |
| .mr-# / mr-*-# |
Clases de margen derecho Responsive. * puede ser sm, md, lg o xl. # puede ser un número entre 0 y 5 |
Utilidades |
| .mx-# / mx-*-# |
Clases automáticas de margen izquierdo y derecho sensibles (horizontales). * puede ser sm, md, lg o xl. # puede ser un número entre 0 y 5 |
Utilidades |
| .my-# / my-*-# |
Clases de respuesta automática de margen superior e inferior (vertical). * puede ser sm, md, lg o xl. # puede ser un número entre 0 y 5 |
Utilidades |
| .mx-auto |
Centra un elemento horizontalmente |
Utilidades |
| .nav nav-tabs |
Crea un menú con pestañas |
Tabs |
| .nav nav-pills |
Crea un menú de píldoras / pastillas |
Tabs |
| .nav-justified |
Justifica los enlaces de pestañas / pastillas con el mismo ancho |
Tabs |
| .navbar |
Crea una barra de navegación |
Navbar |
| .navbar-nav |
Contenedor para enlaces de navegación dentro del contenedor .navbar |
Navbar |
| .navbar-brand |
Agregado a un enlace o un elemento de encabezado dentro de la barra de navegación para representar un logotipo o un encabezado |
Navbar |
| .navbar-collapse |
Contrae la barra de navegación (oculta y reemplazada por un icono de menú / hamburguesa en teléfonos móviles y tabletas pequeñas |
Navbar |
| .navbar-expand-* |
Clase plegable adaptable: apila la barra de navegación verticalmente en pantallas pequeñas (sm), medianas (md), grandes (lg) o extra grandes (xl) |
Navbar |
| .navbar-dark |
Agrega un color de texto blanco a todos los enlaces en la barra de navegación |
Navbar |
| .navbar-light |
Agrega un color de texto negro a todos los enlaces en la barra de navegación |
Navbar |
| .navbar-text |
Alinea verticalmente cualquier elemento dentro de la barra de navegación que no sea un enlace (asegura un relleno adecuado) |
Navbar |
| .navbar-toggler |
Estiliza el botón que debería abrir la barra de navegación en pantallas pequeñas. Diseñado automáticamente como una hamburguesa / tres barras |
Navbar |
| .nav-link |
Se usa para diseñar enlaces / anclas dentro de la barra de navegación |
Navbar |
| .nav-item |
Se usa para diseñar elementos de la lista dentro de la barra de navegación |
Navbar |
| .needs-validation |
Agrega estilos de validación a un formulario enviado |
Formularios |
| .no-gutters |
Eliminar canales / espacio extra de columnas |
Grid |
| .page-item |
Elementos de la lista de estilos dentro de una paginación |
Paginación |
| .page-link |
Enlaces de estilos dentro de una paginación |
Paginación |
| .pagination |
Crea una paginación (útil cuando tienes un sitio web con muchas páginas |
Paginación |
| .pagination-lg |
Paginación grande (cada enlace de paginación obtiene un tamaño de fuente más grande y más relleno) |
Paginación |
| .pagination-sm |
Pequeña paginación (cada enlace de paginación obtiene un tamaño de fuente más pequeño y menos relleno) |
Paginación |
| .pre-scrollable |
Hace que un elemento <pre> se pueda desplazar (altura máxima de 350 px y proporciona una barra de desplazamiento del eje y) |
Ayudantes |
| .progress |
Contenedor para una barra de progreso |
Barra de progreso |
| .progress-bar |
Crea una barra de progreso |
Barra de progreso |
| .progress-bar-animated |
Anima la barra de progreso (usada junto con rayas) |
Barra de progreso |
| .progress-bar-striped |
Agrega rayas a la barra de progreso |
Barra de progreso |
| .p-# / p-*-# |
Clases de relleno Responsive. * puede ser sm, md, lg o xl. # puede ser un número entre 0 y 5 |
Utilidades |
| .pt-# / pt-*-# |
Clases de relleno superior Responsive. * puede ser sm, md, lg o xl. # puede ser un número entre 0 y 5 |
Utilidades |
| .pb-# / pb-*-# |
Clases de relleno inferior Responsive. * puede ser sm, md, lg o xl. # puede ser un número entre 0 y 5 |
Utilidades |
| .pl-# / pl-*-# |
Responsive clases de relleno izquierdo. * puede ser sm, md, lg o xl. # puede ser un número entre 0 y 5 |
Utilidades |
| .pr-# / pr-*-# |
Clases de relleno correcto receptivo. * puede ser sm, md, lg o xl. # puede ser un número entre 0 y 5 |
Utilidades |
| .py-# / py-*-# |
Clases de relleno superior e inferior Responsive. * puede ser sm, md, lg o xl. # puede ser un número entre 0 y 5 |
Utilidades |
| .px-# / px-*-# |
Responsive clases de relleno izquierdo y derecho. * puede ser sm, md, lg o xl. # puede ser un número entre 0 y 5 |
Utilidades |
| .rounded |
Agrega esquinas redondeadas a un elemento |
Utilidades |
| .rounded-bottom |
Agrega esquinas redondeadas inferiores a un elemento |
Utilidades |
| .rounded-circle |
Da forma a un elemento en un círculo (no compatible con IE8 y versiones anteriores) |
Utilidades |
| .rounded-left |
Agrega esquinas redondeadas a la izquierda de un elemento |
Utilidades |
| .rounded-right |
Agrega esquinas redondeadas a la derecha de un elemento |
Utilidades |
| .rounded-top |
Agrega esquinas redondeadas superiores a un elemento |
Utilidades |
| .rounded-0 |
Elimina las esquinas redondeadas de un elemento |
Utilidades |
| .row |
Contenedor para columnas Responsive |
Grid |
| .row-cols-* |
Establecer el número de columnas que deben aparecer una al lado de la otra |
Grid |
| .shadow |
Añade una sombra a un elemento |
Utilidades |
| .shadow-lg |
Añade una sombra grande a un elemento |
Utilidades |
| .shadow-none |
Elimina la sombra de un elemento |
Utilidades |
| .shadow-sm |
Añade una pequeña sobra a un elemento |
Utilidades |
| .small |
Crea un texto secundario más claro en cualquier encabezado |
Tipografía |
| .spinner-border |
Crea una ruleta / cargador |
Spinners |
| .spinner-border-sm |
Cra una pequeña ruleta / cargador |
Spinners |
| .spinner-grow |
Crea una ruleta / cargador que «crece» |
Spinners |
| .spinner-grow-sm |
Crea un spinner / cargador más pequeño que «crece» |
Spinners |
| .sr-only |
Oculta un elemento en todos los dispositivos excepto en los lectores de pantalla |
Utilidades |
| .sr-only-focusable |
Oculta un elemento en todos los dispositivos excepto en los lectores de pantalla |
Utilidades |
| .sticky-top |
Hace que un elemento permanezca fijo / fijo en la parte superior de la página cuando te desplazas |
Utilidades |
| .stretched-link |
Se agregó a un enlace para hacer clic en su bloque contenedor (primario) (solo funciona para elementos primarios con posición: relativa) |
Utilidades |
| .tab-content |
Se usa junto con .tab-pane para crear pestañas / píldoras dinámicas / conmutables |
Tabs |
| .tab-pane |
Se usa junto con .tab-content para crear pestañas / píldoras dinámicas / conmutables |
Tabs |
| .table |
Agrega un estilo básico a una tabla (relleno, bordes inferiores, etc. |
Tables |
| .table-active |
Agrega un color de fondo gris a la fila de la tabla (<tr> o celda de la tabla (<td>) (el mismo color utilizado en el desplazamiento) |
Tables |
| .table-bordered |
Agrega bordes en todos los lados de la tabla y las celdas |
Tables |
| .table-borderless |
Elimina los bordes en una tabla |
Tables |
| .table-condensed |
Hace una tabla más compacta eliminando paddings y margins |
Tables |
| .table-dark |
Agrega un fondo negro con texto blanco a la tabla |
Tables |
| .table-hover |
Crea una tabla apilable (agrega un color de fondo gris en las filas de la tabla al pasar el mouse) |
Tables |
| .table-responsive-* |
Hace que una tabla responda (agrega una barra de desplazamiento horizontal cuando es necesario). De manera predeterminada, la barra de desplazamiento se agrega a la tabla en pantallas de menos de 992 píxeles de ancho (si es necesario). No hay diferencia al ver algo más grande que 992px de ancho. Sin embargo, puede usar sm | md | lg | xl para decidir CUANDO la tabla debería obtener una barra de desplazamiento, dependiendo del ancho de la pantalla |
Tables |
| .table-striped |
Agrega rayas de cebra a una tabla |
Tables |
| .text-break |
Evita que el texto largo rompa el diseño |
Tipografía |
| .text-capitalize |
Texto en mayúscula |
Tipografía |
| .text-center |
Texto alineado al centro |
Tipografía |
| .text-*-center |
Texto alineado al centro en diferentes pantallas |
Tipografía |
| .text-danger |
Texto de color rojo, indica peligro |
Tipografía |
| .text-dark |
Texto de color gris oscuro |
Tipografía |
| .text-decoration-none |
Remueve la línea de abajo del texto |
Tipografía |
| .text-hide |
Oculta texto (ayuda a reemplazar el contenido de texto de un elemento con una imagen de fondo) |
Tipografía |
| .text-info |
Color de texto azul claro. Indica información |
Tipografía |
| .text-light |
Texto de color gris claro |
Tipografía |
| .text-justify |
Indica texto justificado |
Tipografía |
| .text-left |
Texto alineado a la izquierda |
Tipografía |
| .text-*-left |
Alinea a la izquierda el texto en diferentes pantallas |
Tipografía |
| .text-lowercase |
Texto en minúsculas |
Tipografía |
| .text-muted |
Texto de color gris |
Tipografía |
| .text-nowrap |
Evita que el texto se ajuste |
Tipografía |
| .text-primary |
Color de texto azul Indica algo importante |
Tipografía |
| .text-secondary |
Color de texto gris Indica algo «menos» importante |
Tipografía |
| .text-reset |
Restablece el color de un texto o un enlace (hereda el color de su padre) |
Tipografía |
| .text-right |
Texto alineado a la derecha |
Tipografía |
| .text-*-right |
Texto alineado a la derecha en diferentes pantallas |
Tipografia |
| .text-success |
Color de texto verde Indica éxito |
Tipografía |
| .text-uppercase |
Texto en mayúsculas |
Tipografía |
| .text-warning |
Color de texto amarillo / naranja. Indica advertencia |
Tipografía |
| .text-white |
Texto de color blanco |
Tipografía |
| .thead-dark |
Agrega un color de fondo negro a los encabezados de la tabla |
Tables |
| .thead-light |
Agrega un color de fondo gris a los encabezados de la tabla |
Tables |
| .toast |
Crea un toas (cuadro de alerta que desaparece después de unos segundos) |
Toast |
| .toast-body |
Cuerpo del toast |
Toast |
| .toast-header |
Cabecera del toast |
Toast |
| .valid-feedback |
Crea un mensaje de validación personalizado utilizado en formularios validados (color de texto verde) |
Formularios |
| .valid-tooltip |
Crea un mensaje de validación personalizado utilizado en formularios validados (información sobre herramientas verde) |
Formularios |
| .visible |
Hace un elemento visible |
Utilidades |
| .was-validated |
Agrega estilos de validación a un elemento de formulario |
Formularios |
| .w-25 |
Establece el ancho de un elemento al 25% |
Utilidades |
| .w-50 |
Establece el ancho de un elemento al 50% |
Utilidades |
| .w-75 |
Establece el ancho de un elemento al 75% |
Utilidades |
| .w-100 |
Establece el ancho de un elemento al 100% |
Utilidades |