Referencia de clase Bootstrap 4
Lista completa de todas las clases Bootstrap 4
Lista completa de todas las clases CSS de Bootstrap 4 con lo que hace cada una de ellas.
| 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 |