Snackcode
Docs

Bootstrap

🧾 Chuleta de Bootstrap

Guía rápida y visual de las clases más importantes de Bootstrap, organizadas por categoría. Cada clase incluye una descripción clara y un ejemplo funcional.

🧩 Accordion

.accordion-body

Contenedor del contenido interno del acordeón. Aquí se coloca el texto o elementos visibles cuando se despliega.

<div class="accordion-body">Ejemplo de .accordion-body</div>

.accordion-button

Botón interactivo que permite abrir o cerrar una sección del acordeón. Se usa dentro del encabezado.

<button class="accordion-button">Ejemplo de .accordion-button</button>

.accordion-collapse

Sección que colapsa o se expande. Encierra el contenido desplegable que se muestra cuando se activa el botón del acordeón.

<div class="accordion-collapse collapse show">Ejemplo de .accordion-collapse</div>

🧩 Alerts

.alert-danger

Cuadro de alerta con estilo rojo. Se usa para mostrar errores, advertencias críticas o mensajes de peligro.

<div class="alert alert-danger" role="alert">¡Error crítico detectado!</div>

.alert-info

Cuadro de alerta con estilo celeste. Se usa para mostrar información útil o mensajes neutrales.

<div class="alert alert-info" role="alert">Este es un mensaje informativo.</div>

.alert-light

Alerta de estilo suave con fondo gris claro. Ideal para mensajes neutros o poco intrusivos.

<div class="alert alert-light" role="alert">Este es un mensaje muy suave 🌫️</div>

.alert-success

Alerta verde que indica éxito o una acción completada correctamente.

<div class="alert alert-success" role="alert">¡Guardado con éxito! ✅</div>

.alert-warning

Alerta amarilla para advertencias o precauciones importantes.

<div class="alert alert-warning" role="alert">⚠ Atención: Revisa los campos obligatorios</div>

🧩 Badges

.badge

Clase base para crear insignias pequeñas y destacadas que acompañan a texto, botones o iconos.

<span class="badge bg-secondary">Nuevo</span>

.badge-danger

Insignia de color rojo, ideal para advertencias, errores o cantidades críticas.

<span class="badge bg-danger">¡Urgente! 🔥</span>

.badge-dark

Insignia con fondo oscuro. Útil para interfaces sobrias o neutras.

<span class="badge bg-dark text-white">Modo oscuro 🕶️</span>

.badge-info

Insignia con fondo celeste. Se usa para información adicional o neutra.

<span class="badge bg-info text-dark">Info ℹ️</span>

.badge-primary

Insignia de color azul Bootstrap. Ideal para destacar estados principales o elementos nuevos.

<span class="badge bg-primary">Primario ✨</span>

.badge-success

Insignia verde para indicar que algo ha ido bien o está activo.

<span class="badge bg-success">Correcto ✅</span>

.badge-warning

Insignia amarilla para advertencias leves o elementos importantes que requieren atención.

<span class="badge bg-warning text-dark">¡Atento! ⚠️</span>

🧩 Borders

.border

Añade un borde gris claro alrededor del elemento.

<div class="border p-2">Elemento con borde 🧱</div>

.border-1

Define un grosor fino de borde. Se debe combinar con .border y color si se desea personalizar más.

<div class="border border-1 p-2">Borde fino 📏</div>

.rounded-circle

Convierte el elemento en un círculo perfecto (si el alto y ancho son iguales).

<img src="https://via.placeholder.com/100" class="rounded-circle" alt="Avatar redondo">

🧩 Buttons

.btn

Clase base para todos los botones en Bootstrap. Se debe combinar con variantes como .btn-primary, .btn-success, etc.

<button class="btn btn-secondary">Botón básico 🖱️</button>

.btn-danger

Botón rojo, usado para acciones destructivas o importantes como eliminar o cancelar.

<button class="btn btn-danger">Eliminar ❌</button>

.btn-dark

Botón con fondo oscuro. Ideal para interfaces oscuras o sobrias.

<button class="btn btn-dark">Modo oscuro 🕶️</button>

.btn-light

Botón claro con fondo gris suave. Perfecto para interfaces limpias y minimalistas.

<button class="btn btn-light">Botón claro 💡</button>

.btn-outline-danger

Botón con borde rojo y fondo transparente. Ideal para acciones destructivas sin un estilo visual agresivo.

<button class="btn btn-outline-danger">Cancelar ❌</button>

.btn-outline-dark

Botón con borde oscuro y fondo transparente. Funciona bien en diseños minimalistas o neutros.

<button class="btn btn-outline-dark">Modo sobrio 🖤</button>

.btn-outline-info

Botón con borde celeste claro, ideal para acciones informativas o neutras.

<button class="btn btn-outline-info">Más info ℹ️</button>

.btn-outline-light

Botón con borde gris claro. Funciona bien sobre fondos oscuros para crear contraste.

<button class="btn btn-outline-light">Claro sobre oscuro 💡</button>

.btn-outline-success

Botón con borde verde. Indica acciones positivas o confirmaciones con un estilo más discreto.

<button class="btn btn-outline-success">Confirmar ✅</button>

.btn-primary

Botón principal con fondo azul Bootstrap. Se usa para la acción más importante de la interfaz.

<button class="btn btn-primary">Enviar 📤</button>

🧩 Cards

.card

Contenedor visual con borde, sombra y padding. Se usa para presentar contenido agrupado como productos, perfiles o secciones.

<div class="card" style="width: 18rem;"><div class="card-body">Contenido de la tarjeta 🃏</div></div>

.card-body

Sección interior de una tarjeta .card. Aquí se colocan el texto, botones u otros elementos.

<div class="card"><div class="card-body">Texto dentro de la tarjeta 📄</div></div>

.list-group

Contenedor para listas visuales estilizadas. Se suele usar con .list-group-item.

<ul class="list-group"><li class="list-group-item">Elemento 1</li><li class="list-group-item">Elemento 2</li></ul>

🧩 Carousel

Componente deslizante para mostrar imágenes o contenido en secuencia. Requiere configuración adicional para funcionar.

<div id="demo" class="carousel slide" data-bs-ride="carousel"><div class="carousel-inner"><div class="carousel-item active">Slide 1 🎠</div></div></div>

Elemento individual dentro de un .carousel. Representa cada ‘diapositiva’.

<div class="carousel-item active"><img src="https://via.placeholder.com/300x150" class="d-block w-100" alt="Ejemplo" /></div>

🧩 Collapse

.collapse

Clase que permite ocultar o mostrar contenido dinámicamente (por ejemplo, al hacer clic en un botón).

<div class="collapse show">Contenido visible 🔽</div>

🧩 Colors

.bg-danger

Aplica un fondo rojo al elemento. Ideal para alertas o destacar errores.

<div class="bg-danger text-white p-2">Fondo rojo de alerta ❌</div>

.bg-primary

Aplica el color de fondo principal del tema (azul Bootstrap). Se usa para encabezados, botones, secciones destacadas, etc.

<div class="bg-primary text-white p-2">Fondo azul principal 🔷</div>

.bg-success

Aplica un fondo verde, ideal para indicar éxito, confirmaciones o elementos completados.

<div class="bg-success text-white p-2">Fondo de éxito ✅</div>

.text-danger

Aplica color rojo al texto. Se usa para errores o alertas.

<p class="text-danger">Este es un error ❌</p>

.text-primary

Aplica el color azul principal de Bootstrap al texto.

<p class="text-primary">Texto azul 🌊</p>

.text-success

Aplica el color verde de éxito al texto.

<p class="text-success">Correcto ✅</p>

.text-warning

Aplica el color amarillo de advertencia al texto.

<p class="text-warning">Atención ⚠️</p>

🧩 Componentes

.img-fluid

Hace que una imagen se escale de forma responsive dentro de su contenedor.

<img src="https://via.placeholder.com/150" class="img-fluid" alt="Imagen responsive">

🧩 Dropdowns

Contenedor principal para un menú desplegable. Debe incluir un botón y una lista .dropdown-menu para funcionar correctamente.

<div class="dropdown"><button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">Menú ▼</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Opción 1</a></li></ul></div>

Lista de elementos que se muestra al hacer clic en un botón .dropdown-toggle. Funciona dentro de un contenedor .dropdown.

<ul class="dropdown-menu show"><li><a class="dropdown-item" href="#">Opción 1</a></li></ul>

🧩 Flexbox

.align-items-center

Centra verticalmente todos los elementos hijos dentro de un contenedor con display flex.

<div class="d-flex align-items-center" style="height: 100px;"><div>🎯 Elemento centrado verticalmente</div></div>

.align-self-center

Centra verticalmente un solo elemento dentro de un contenedor con flexbox.

<div class="d-flex" style="height: 100px;"><div class="align-self-center">🧩 Solo yo me centro</div></div>

.align-self-end

Alinea un solo elemento al fondo del eje vertical en un contenedor flex.

<div class="d-flex" style="height: 100px;"><div class="align-self-end">🔽 Estoy abajo</div></div>

.align-self-start

Alinea un solo elemento al inicio del eje vertical en un contenedor flex.

<div class="d-flex" style="height: 100px;"><div class="align-self-start">🔼 Estoy arriba</div></div>

.d-flex

Convierte un contenedor en un flexbox. Es el punto de partida para usar utilidades como .justify-content-* o .align-items-*.

<div class="d-flex gap-3"><div>🍓</div><div>🍇</div><div>🍉</div></div>

.flex-column

Organiza los elementos hijos en una columna vertical dentro de un contenedor con display flex.

<div class="d-flex flex-column gap-2"><div>🔼 Arriba</div><div>⬇️ Abajo</div></div>

.flex-row

Organiza los elementos hijos en una fila horizontal dentro de un contenedor con display flex. Es el valor por defecto en .d-flex.

<div class="d-flex flex-row gap-3"><div>⬅️</div><div>➡️</div></div>

.justify-content-center

Centra horizontalmente los elementos en un contenedor flex.

<div class="d-flex justify-content-center border"><div>🎯 Centrado</div></div>

🧩 Forms

.form-control

Estiliza campos de formulario como input, textarea o select para que se vean consistentes con el diseño Bootstrap.

<input type="text" class="form-control" placeholder="Escribe tu nombre">

.form-label

Aplica estilos consistentes a las etiquetas (label) en formularios.

<label for="nombre" class="form-label">Nombre:</label>

🧩 Grid

.col-6

Columna de 6/12 (50%) en el sistema de grid de Bootstrap. Se utiliza dentro de un .row.

<div class="row"><div class="col-6 bg-light p-2">Mitad de la fila 📏</div><div class="col-6 bg-secondary text-white p-2">Otra mitad</div></div>

.order-#

Cambia el orden visual de un elemento en un contenedor con flexbox. # puede ir de 0 a 5.

<div class="d-flex"><div class="order-2">Segundo</div><div class="order-1">Primero</div></div>

.order-lg-#

Modifica el orden visual del elemento en pantallas grandes (lg) o superiores.

<div class="d-flex"><div class="order-lg-2">Columna 2</div><div class="order-lg-1">Columna 1</div></div>

.row

Contenedor para columnas en el sistema de grid. Debe contener .col-* dentro.

<div class="row"><div class="col">Columna 1</div><div class="col">Columna 2</div></div>

🧩 List group

.list-group-flush

Elimina los bordes y el padding alrededor de los elementos en una lista para integrarla con tarjetas o contenedores.

<ul class="list-group list-group-flush"><li class="list-group-item">Sin bordes extra</li></ul>

.list-group-item

Elemento individual dentro de una lista .list-group.

<li class="list-group-item">Elemento con estilo de lista</li>

.list-group-item-action

Convierte un .list-group-item en un elemento interactivo, como enlace o botón.

<a href="#" class="list-group-item list-group-item-action">Haz clic aquí</a>

🧩 Misc

.overflow-auto

Agrega scroll automático si el contenido desborda el contenedor.

<div class="overflow-auto border" style="max-height: 60px;">Contenido muy largo que activará scroll si es necesario 📜</div>

.shadow

Agrega una sombra suave alrededor del elemento.

<div class="shadow p-3 bg-white">Sombra suave ☁️</div>

.shadow-lg

Aplica una sombra grande al elemento.

<div class="shadow-lg p-3 bg-white">Sombra grande 🌥️</div>

.shadow-sm

Aplica una sombra pequeña y sutil.

<div class="shadow-sm p-3 bg-white">Sombra pequeña 🕳️</div>

🧩 Modal

Contenedor principal de un cuadro de diálogo emergente en Bootstrap.

<pre><code>&lt;div class="modal fade" tabindex="-1"&gt;
  &lt;div class="modal-dialog"&gt;
    &lt;div class="modal-content"&gt;
      Contenido del modal
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>

.modal-content

Caja blanca con padding y sombra donde se coloca el contenido del modal.

<div class="modal-content p-3">Contenido del modal 🧾</div>

Contenedor del modal que controla su anchura y alineación.

<div class="modal-dialog"><div class="modal-content">Contenido centrado</div></div>

Sección inferior del modal, usada normalmente para botones de acción como ‘Aceptar’ o ‘Cancelar’.

<div class="modal-footer"><button class="btn btn-secondary">Cerrar</button></div>

Encabezado del modal. Suele contener el título y el botón de cerrar.

<div class="modal-header"><h5 class="modal-title">Título</h5><button class="btn-close"></button></div>

Estilo aplicado al texto del título dentro del encabezado del modal.

<h5 class="modal-title">Título del modal 🗨️</h5>

🧩 Navbar

Elemento individual dentro de una barra de navegación.

<li class="nav-item"><a href="#" class="nav-link">Inicio</a></li>

Estilo aplicado a los enlaces dentro de .nav-item.

<a class="nav-link active" href="#">Activa 💡</a>

Aplica estilo tipo ‘píldora’ a los botones de navegación.

<ul class="nav nav-pills"><li class="nav-item"><a class="nav-link active" href="#">Activa</a></li></ul>

Estilo para crear pestañas de navegación.

<ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active" href="#">Pestaña</a></li></ul>

Contenedor principal de la barra de navegación de Bootstrap.

<nav class="navbar bg-light"><div class="container-fluid">Navbar 🧭</div></nav>

Elemento usado para mostrar el logo o nombre de la marca dentro de .navbar.

<a class="navbar-brand" href="#">MiMarca 🚀</a>

Estilo oscuro para la navbar (se usa junto con bg-dark). Cambia el color del texto a claro.

<nav class="navbar navbar-dark bg-dark"><div class="container-fluid"><a class="navbar-brand" href="#">DarkNav</a></div></nav>

Estilo claro para la navbar. Ideal para usar con fondos blancos o suaves.

<nav class="navbar navbar-light bg-light"><a class="navbar-brand" href="#">LightNav</a></nav>

Botón que activa el menú responsive en dispositivos pequeños.

<button class="navbar-toggler" type="button"><span class="navbar-toggler-icon"></span></button>

🧩 Pagination

.page-item

Elemento individual dentro de una paginación.

<li class="page-item"><a class="page-link" href="#">1</a></li>

.pagination

Contenedor de paginación. Agrupa los .page-item para moverse entre páginas.

<ul class="pagination"><li class="page-item active"><a class="page-link" href="#">1</a></li></ul>

🧩 Positioning

.position-relative

Establece el posicionamiento relativo para el elemento. Necesario si vas a posicionar hijos con position-absolute.

<div class="position-relative border" style="height: 100px;"><div class="position-absolute top-0 end-0">📌</div></div>

.sticky-top

Hace que el elemento quede fijo en la parte superior al hacer scroll.

<div class="sticky-top bg-light p-2">Soy sticky 🔝</div>

🧩 Spacing

.m-3

Aplica un margen uniforme en todos los lados del elemento (espaciado 3).

<div class="bg-light border m-3">Con margen alrededor 📦</div>

.mb-0

Elimina el margen inferior de un elemento.

<p class="mb-0">Sin margen debajo 👇</p>

.mt-5

Agrega un margen superior (top) grande. Útil para separar secciones verticalmente.

<div class="bg-light mt-5 p-2">Separado hacia abajo 🔽</div>

.mx-auto

Centra horizontalmente un elemento usando margen automático en los lados.

<div class="bg-light w-50 mx-auto p-2">Centrado horizontal 🧲</div>

.p-3

Agrega padding (relleno interno) uniforme en todos los lados (nivel 3).

<div class="bg-light p-3 border">Con padding interno 📦</div>

.w-100

Hace que el elemento ocupe el 100% del ancho disponible.

<div class="w-100 bg-light">Ancho completo 📏</div>

🧩 Spinner

.spinner-border

Muestra un spinner circular animado para indicar carga o espera.

<div class="spinner-border" role="status"><span class="visually-hidden">Cargando...</span></div>

.spinner-grow

Muestra un spinner que se expande. Alternativa a .spinner-border.

<div class="spinner-grow" role="status"><span class="visually-hidden">Cargando...</span></div>

🧩 Tables

.table

Aplica estilo básico a tablas: bordes claros y formato limpio.

<table class="table"><thead><tr><th>Col</th></tr></thead><tbody><tr><td>Dato</td></tr></tbody></table>

.table-bordered

Agrega bordes a todas las celdas de la tabla.

<table class="table table-bordered"><tr><td>Con borde</td></tr></table>

.table-striped

Aplica bandas de color alternas a las filas de la tabla.

<table class="table table-striped"><tr><td>Fila 1</td></tr><tr><td>Fila 2</td></tr></table>

.thead-dark

(Bootstrap 4) Aplica fondo oscuro y texto claro a los encabezados de tabla.

<table class="table"><thead class="thead-dark"><tr><th>Encabezado</th></tr></thead></table>

.thead-light

(Bootstrap 4) Aplica fondo claro al encabezado de una tabla.

<table class="table"><thead class="thead-light"><tr><th>Encabezado</th></tr></thead></table>

🧩 Text

.text-capitalize

Convierte la primera letra de cada palabra en mayúscula.

<div class="text-capitalize">texto en mayúsculas iniciales</div>

.text-center

Centra horizontalmente el texto.

<div class="text-center">Texto centrado 🧭</div>

.text-decoration-none

Elimina subrayados u otras decoraciones del texto.

<a href="#" class="text-decoration-none">Enlace sin subrayado</a>

.text-lowercase

Convierte todo el texto a minúsculas.

<div class="text-lowercase">TEXTO MINÚSCULO</div>

.text-nowrap

Evita que el texto se divida en varias líneas (no hace salto de línea).

<div class="text-nowrap">Texto muy largo sin saltos ➡️</div>

.text-uppercase

Convierte el texto a MAYÚSCULAS.

<div class="text-uppercase">todo en mayúsculas</div>

🧩 Typography

.fs-1

Tamaño de fuente más grande de Bootstrap. Ideal para títulos principales.

<div class="fs-1">Texto muy grande 🔠</div>

.fs-2

Tamaño de fuente grande, ligeramente menor que .fs-1.

<div class="fs-2">Texto grande 🔡</div>

.fs-3

Tamaño de fuente mediano-alto, ideal para subtítulos destacados.

<div class="fs-3">Texto destacado 📢</div>

.fs-4

Tamaño de fuente moderadamente grande. Útil para encabezados pequeños.

<div class="fs-4">Subtítulo 🔤</div>

.fs-5

Tamaño de fuente ligeramente más grande que el texto base.

<div class="fs-5">Texto con énfasis ✍️</div>

.fs-6

Tamaño de fuente más pequeño de la serie .fs-*.

<div class="fs-6">Texto discreto 📄</div>

.fst-italic

Aplica estilo en cursiva al texto.

<div class="fst-italic">Texto en cursiva ✒️</div>

.fst-normal

Elimina la cursiva de un elemento que la tenga aplicada.

<div class="fst-normal">Texto normal 📝</div>

.fw-bold

Aplica negrita al texto.

<div class="fw-bold">Texto en negrita 💪</div>

.fw-light

Aplica un peso de fuente más delgado. Ideal para diseños más elegantes o minimalistas.

<div class="fw-light">Texto con peso ligero ✨</div>

.fw-normal

Restaura el peso de fuente al valor normal por defecto.

<div class="fw-normal">Texto normal 📝</div>

.h-100

Hace que el elemento ocupe el 100% de la altura disponible de su contenedor.

<div class="h-100 border p-2" style="min-height: 100px;">Altura completa 🔝</div>

.lh-1

Reduce la altura de línea (line-height) para texto más compacto.

<p class="lh-1">Texto<br>con altura<br>de línea compacta</p>

.lh-lg

Aplica una altura de línea más amplia, ideal para mejorar la legibilidad.

<p class="lh-lg">Texto<br>con más espacio<br>entre líneas</p>

.lh-sm

Reduce la altura de línea respecto al valor por defecto.

<p class="lh-sm">Texto<br>más ajustado<br>verticalmente</p>

.text-break

Permite que una palabra larga se divida en varias líneas si es necesario.

<div class="text-break">Supercalifragilisticoespialidoso</div>

.text-decoration-line-through

Muestra el texto con una línea tachada.

<span class="text-decoration-line-through">Tachado 📝</span>

.text-decoration-underline

Subraya el texto.

<span class="text-decoration-underline">Subrayado ✔️</span>

.text-wrap

Fuerza el salto de línea cuando el contenido sobrepasa el ancho del contenedor.

<div class="text-wrap" style="width: 150px;">Este texto se ajusta al contenedor</div>

🔗 Consulta la documentación oficial de Bootstrap

Prev
Google Dorks