Chuleta de Bootstrap
Una referencia de Bootstrap 5.3 imprimible y con búsqueda — cuadrícula, espaciado, tipografía, colores, utilidades flex, botones, formularios y componentes. Gratis.
Grid y maquetación
12<div class="container">
Contenedor responsive de ancho fijo
<div class="container-fluid">
Contenedor de ancho completo en cada breakpoint
<div class="container-md">
100% de ancho hasta el breakpoint md
<div class="row">
Fila de grid, contiene columnas
<div class="col">
Columna automática de ancho igual
<div class="col-6">
Ocupa 6 de 12 columnas
<div class="col-md-4">
4 columnas a partir del breakpoint md
<div class="col-auto">
Columna ajustada a su contenido
<div class="offset-md-2">
Empujar la columna 2 columnas a la derecha
<div class="row g-3">
Espaciado de canaleta entre columnas
<div class="row row-cols-3">
Forzar 3 columnas iguales por fila
<div class="order-2">
Reordenar una columna flex/grid
Utilidades de espaciado
12m-3
Margen en todos los lados (escala 0-5)
mt-2
Margen superior
mx-auto
Márgenes horizontales automáticos para centrar
p-4
Relleno en todos los lados
py-2
Relleno vertical (arriba y abajo)
ms-3
Margen inicial (izquierda en LTR, compatible con RTL)
me-3
Margen final (derecha en LTR, compatible con RTL)
ps-2
Relleno inicial, compatible con RTL
pe-2
Relleno final, compatible con RTL
gap-3
Espacio entre elementos flex/grid
m-n1
Margen negativo
p-md-5
Relleno responsive a partir de md
Tipografía
14<h1>..<h6>
Niveles de encabezado con estilo por defecto
<p class="display-1">
Encabezado display grande (display-1..6)
<p class="lead">
Párrafo de entrada destacado
fw-bold
Grosor de fuente negrita
fw-semibold
Grosor de fuente seminegrita
fst-italic
Estilo de fuente cursiva
text-center
Alinear el texto al centro
text-start
Alinear el texto al inicio, compatible con RTL
text-end
Alinear el texto al final, compatible con RTL
text-truncate
Truncar el desbordamiento con puntos suspensivos
text-uppercase
Transformar el texto a mayúsculas
fs-1
Tamaño de fuente responsive (fs-1..6)
lh-base
Altura de línea base (lh-1, lh-sm, lh-lg)
font-monospace
Familia de fuente monoespaciada
Colores y fondo
10text-primary
Color de texto primario
bg-primary
Color de fondo primario
bg-primary-subtle
Tinte de fondo primario sutil
text-primary-emphasis
Texto primario enfatizado, según el tema
text-bg-primary
Fondo primario con texto de contraste automático
link-primary
Ayudante de enlace con color
bg-opacity-50
Aplicar 50% de opacidad de fondo
text-body-secondary
Texto de cuerpo secundario atenuado
text-body-emphasis
Texto de cuerpo con mucho énfasis
border-primary-subtle
Color de borde primario sutil
Utilidades flex
10d-flex
Crea un contenedor flex
flex-row
Disponer los elementos en una fila
flex-column
Disponer los elementos en una columna
justify-content-between
Espaciar los elementos a lo largo del eje principal
align-items-center
Centrar los elementos en el eje transversal
flex-wrap
Permite que los ítems se ajusten
flex-grow-1
Permitir que un elemento crezca para llenar el espacio
flex-fill
Forzar anchos flexibles iguales
align-self-end
Alinear un solo elemento al final
flex-md-row
Dirección flex responsive a partir de md
Display y posición
12d-none
Ocultar el elemento
d-md-block
Mostrar como bloque a partir del breakpoint md
position-relative
Posicionamiento relativo
position-absolute
Posicionamiento absoluto
position-fixed
Posicionamiento fijo
position-sticky
Posicionamiento sticky
top-0 start-0
Fijar arriba a la izquierda, compatible con RTL
translate-middle
Centrar mediante transform translate
fixed-top
Fijar el elemento en la parte superior del viewport
sticky-top
Pegar arriba al hacer scroll
z-3
Establecer z-index (z-0..3)
invisible
Ocultar pero conservar el espacio en la maquetación
Tamaño y bordes
12w-100
Ancho del 100% del padre
w-50
Ancho del 50% del padre
h-100
Altura del 100% del padre
mw-100
Ancho máximo del 100%
vh-100
Altura del 100% del viewport
border
Añadir un borde por defecto en todos los lados
border-0
Eliminar todos los bordes
border-primary
Colorear el borde
rounded
Radio de borde por defecto
rounded-pill
Forma de píldora completamente redondeada
rounded-circle
Radio de borde circular
shadow-sm
Sombra de caja pequeña (shadow, shadow-lg)
Botones
9<button class="btn btn-primary">
Botón primario sólido
<button class="btn btn-outline-primary">
Variante de botón con contorno
<button class="btn btn-lg">
Botón grande (también btn-sm)
<button class="btn btn-link">
Botón con estilo de enlace
<button class="btn-close">
Botón genérico de cierre (×)
<button class="btn disabled">
Estado de botón deshabilitado
<button class="btn active">
Estado de botón activo
<div class="d-grid"><button class="btn">
Botón de bloque de ancho completo vía d-grid
<div class="btn-group">
Agrupar botones juntos
Formularios
11<input class="form-control">
Input de texto con estilo
<label class="form-label">
Etiqueta de campo de formulario
<select class="form-select">
Desplegable select con estilo
<div class="form-check">
Envoltorio de checkbox/radio
<input class="form-check-input">
Input de checkbox o radio con estilo
<div class="form-check form-switch">
Componente de interruptor toggle
<input class="form-control-lg">
Input grande (también form-control-sm)
<div class="input-group">
Agrupar inputs con complementos
is-invalid
Estado de validación inválido (is-valid)
<div class="form-floating">
Input con etiqueta flotante
col-form-label
Etiqueta alineada para formularios horizontales
Componentes
14<div class="card">
Tarjeta de contenido flexible
<nav class="navbar navbar-expand-lg">
Barra de navegación responsive
data-bs-toggle="modal" data-bs-target="#m"
Disparar un cuadro de diálogo modal
data-bs-toggle="dropdown"
Alternar un menú desplegable
data-bs-toggle="collapse"
Alternar un elemento colapsable
<div class="accordion">
Paneles colapsables apilados
<div class="alert alert-dismissible">
Mensaje de alerta descartable
<span class="badge text-bg-primary">
Insignia de recuento o etiqueta pequeña
<ul class="list-group">
Lista de elementos con estilo
<ul class="nav nav-tabs">
Navegación con pestañas
<div class="toast">
Notificación toast ligera
<div class="offcanvas">
Panel lateral off-canvas
<div class="spinner-border">
Indicador spinner de carga
<nav><ul class="pagination">
Enlaces de navegación paginados
Ayudantes y varios
11data-bs-theme="dark"
Habilitar el modo de color oscuro en un ámbito
<div class="ratio ratio-16x9">
Caja de relación de aspecto responsive
visually-hidden
Ocultar visualmente, conservar para lectores de pantalla
visually-hidden-focusable
Oculto hasta enfocar (skip links)
stretched-link
Hacer que un padre sea totalmente clicable
clearfix
Limpiar los hijos flotados
<div class="vstack gap-2">
Pila vertical de elementos
<div class="hstack gap-2">
Pila horizontal de elementos
<a class="icon-link">
Enlace alineado con un icono inline
<div class="progress">
Contenedor de barra de progreso
<nav class="breadcrumb">
Rastro de navegación de migas de pan
Ninguna entrada coincide con “:q”.
¿Necesitas ayuda?
¿Encontraste un problema con esta herramienta? Avísanos.