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