CHULETAS YISUS - BOOTSTRAP

Estructura Bootstrap

INSTALACIÓN

CDN Bootstrap → Añade Bootstrap desde la web, sin instalar nada. Ejemplo:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Documentación oficial: Bootstrap Oficial

Estructura básica

.container → Contenedor con ancho fijo que cambia según el tamaño de pantalla. Ejemplo:
<div class="container">
Contenido aquí
</div>

.container-fluid → Contenedor que ocupa siempre el 100% del ancho disponible. Ejemplo:
<div class="container-fluid">
Contenido a todo el ancho
</div>

.row → Define una fila en el sistema de rejilla.
.col → Columna que se ajusta automáticamente dentro de la fila. Ejemplo:
<div class="row">
<div class="col">Columna 1</div>
<div class="col">Columna 2</div>
</div>

Columnas con tamaños fijos y responsive → Bootstrap divide el ancho en 12 columnas. Ejemplo tamaños fijos:
.col-12 → ocupa todo el ancho
.col-6 → ocupa la mitad
.col-4 → ocupa un tercio

Ejemplo responsive:
.col-md-6 → en pantallas medianas ocupa 6 columnas
.col-lg-4 → en pantallas grandes ocupa 4 columnas

Ejemplo completo:
<div class="row">
<div class="col-12 col-md-6 col-lg-4">Columna adaptable</div>
<div class="col-12 col-md-6 col-lg-8">Otra columna adaptable</div>
</div>

Tipografía y textos

Clases de títulos (.h1 a .h6) → Permiten aplicar estilos de encabezados a cualquier elemento. Ejemplo:
<p class="h1">Título grande</p>
<span class="h3">Subtítulo mediano</span>

.lead → texto destacado, más grande y con más espacio. Ejemplo:
<p class="lead">Texto destacado</p>

.small → texto más pequeño. Ejemplo:
<p class="small">Texto pequeño</p>

.fw-bold → texto en negrita. Ejemplo:
<p class="fw-bold">Texto en negrita</p>

.text-muted → texto apagado/gris. Ejemplo:
<p class="text-muted">Texto apagado</p>

Colores de texto → Cambian el color del texto. Ejemplo:
<p class="text-primary">Texto azul</p>
<p class="text-danger">Texto rojo</p>
<p class="text-success">Texto verde</p>
<p class="text-warning">Texto amarillo</p>
<p class="text-info">Texto celeste</p>

Alineación de texto → Controla cómo se alinea el contenido. Ejemplo:
<p class="text-start">Texto a la izquierda</p>
<p class="text-center">Texto centrado</p>
<p class="text-end">Texto a la derecha</p>

Transformación de texto → Cambia el estilo de escritura. Ejemplo:
<p class="text-lowercase">todo en minúsculas</p>
<p class="text-uppercase">TODO EN MAYÚSCULAS</p>
<p class="text-capitalize">Primera letra en mayúscula</p>

Peso y estilo de fuente → Cambia grosor y estilo del texto. Ejemplo:
<p class="fw-light">Texto ligero</p>
<p class="fw-normal">Texto normal</p>
<p class="fw-bold">Texto en negrita</p>
<p class="fst-italic">Texto en cursiva</p>

Altura de línea (line-height) → Ajusta la separación vertical entre líneas. Ejemplo:
<p class="lh-1">Altura mínima</p>
<p class="lh-sm">Altura pequeña</p>
<p class="lh-base">Altura normal</p>
<p class="lh-lg">Altura grande</p>

.font-monospace → Aplica tipografía estilo consola (monoespaciada). Ejemplo:
<p class="font-monospace">Texto estilo consola</p>

Colores y utilidades básicas

Colores de texto

Colores de texto (.text-*) → Cambian el color del texto según la paleta de Bootstrap.

Ejemplo:
<p class="text-primary">TEXTO AZUL (primary)</p>
<p class="text-success">TEXTO VERDE (success)</p>
<p class="text-danger">TEXTO ROJO (danger)</p>
<p class="text-warning">TEXTO AMARILLO (warning)</p>
<p class="text-info">TEXTO CELESTE (info)</p>
<p class="text-dark">TEXTO OSCURO (dark)</p>
<p class="text-light bg-dark">TEXTO CLARO (light)</p>
<p class="text-muted">TEXTO ATENUADO (muted)</p>
<p class="text-white bg-dark">TEXTO BLANCO (white)</p>
<p class="text-black-50">TEXTO NEGRO 50% (black-50)</p>
<p class="text-white-50 bg-dark">TEXTO BLANCO 50% (white-50)</p>

Colores de fondo

Colores de fondo (.bg-*) → Aplican un color de fondo según la paleta de Bootstrap.

Ejemplo:
<p class="bg-primary text-white">FONDO AZUL (primary)</p>
<p class="bg-success text-white">FONDO VERDE (success)</p>
<p class="bg-danger text-white">FONDO ROJO (danger)</p>
<p class="bg-warning text-dark">FONDO AMARILLO (warning)</p>
<p class="bg-info text-dark">FONDO CELESTE (info)</p>
<p class="bg-dark text-white">FONDO OSCURO (dark)</p>
<p class="bg-light text-dark">FONDO CLARO (light)</p>
<p class="bg-body text-dark">FONDO BODY (body)</p>
<p class="bg-white text-dark">FONDO BLANCO (white)</p>
<p class="bg-transparent text-dark">FONDO TRANSPARENTE (transparent)</p>

Utilidades de espaciado en Bootstrap

Clases de margen (m) y padding (p)

Utilidades de espaciado (margin y padding) → Controlan el espacio interno (padding) y externo (margen) de los elementos.

Ejemplo:
<div class="m-3">Margen en todos lados (m-3)</div>
<div class="mt-2">Margen arriba (mt-2)</div>
<div class="ms-4">Margen izquierda/start (ms-4)</div>
<div class="me-5">Margen derecha/end (me-5)</div>
<div class="mx-auto w-50">Margen automático centrado (mx-auto)</div>
<div class="p-3">Padding en todos lados (p-3)</div>
<div class="py-2 px-4">Padding vertical 2 + horizontal 4</div>

Direcciones de espaciado

Direcciones de espaciado → Se aplican con margin (m) o padding (p).

Ejemplo:
<div class="mt-3">Margen arriba (top)</div>
<div class="mb-3">Margen abajo (bottom)</div>
<div class="ms-3">Margen inicio (start - izquierda LTR)</div>
<div class="me-3">Margen final (end - derecha LTR)</div>
<div class="mx-3">Margen horizontal (izq + der)</div>
<div class="my-3">Margen vertical (arriba + abajo)</div>
<div class="m-3">Margen en todos los lados</div>

Valores de espaciado (0–5 y auto)

Valores de espaciado → Se aplican con margin (m) o padding (p) junto a la dirección.

Ejemplo: Margin (m-)
<div class="m-0">Espaciado 0 (0rem)</div>
<div class="m-1">Espaciado 1 (0.25rem)</div>
<div class="m-2">Espaciado 2 (0.5rem)</div>
<div class="m-3">Espaciado 3 (1rem)</div>
<div class="m-4">Espaciado 4 (1.5rem)</div>
<div class="m-5">Espaciado 5 (3rem)</div>
<div class="mx-auto">Espaciado automático (solo margin)</div>

Padding (p-) → Funciona exactamente igual que las clases de margen (m-), pero en lugar de crear espacio externo genera espacio interno dentro del elemento. Solo hay que cambiar la m por una p y se aplican las mismas direcciones (t, b, s, e, x, y, o sin letra) y los mismos valores (0–5). Ejemplo: mt-3 → margen arriba, mientras que pt-3 → padding arriba.

Utilidades de tamaño

Anchura (w-) → Controlan el ancho de un elemento en porcentaje o automático.

Ejemplo:
<div class="w-25">Ancho al 25% del contenedor padre</div>
<div class="w-50">Ancho al 50% del contenedor padre</div>
<div class="w-75">Ancho al 75% del contenedor padre</div>
<div class="w-100">Ancho al 100% del contenedor padre</div>
<div class="w-auto">Ancho automático según el contenido</div>
<div class="mw-100">Ancho máximo 100% del contenedor padre</div>

Altura (h-) → Controlan la altura de un elemento en porcentaje o automática.

Ejemplo:
<div class="h-25">Altura al 25% del contenedor padre</div>
<div class="h-50">Altura al 50% del contenedor padre</div>
<div class="h-75">Altura al 75% del contenedor padre</div>
<div class="h-100">Altura al 100% del contenedor padre</div>
<div class="h-auto">Altura automática según el contenido</div>
<div class="mh-100">Altura máxima 100% del contenedor padre</div>

Viewport (vw / vh) → Controlan ancho y alto en relación al tamaño visible de la pantalla.

Ejemplo:
<div class="min-vw-100">Mínimo ancho 100% del viewport (no puede ser más pequeño)</div>
<div class="min-vh-100">Mínimo alto 100% del viewport (no puede ser más pequeño)</div>
<div class="vw-100">Ancho igual al 100% del viewport (ocupa todo el ancho visible)</div>
<div class="vh-100">Alto igual al 100% del viewport (ocupa todo el alto visible)</div>

display y visibilidad

Display (d-) → Controlan el tipo de visualización de un elemento.

Ejemplo:
<div class="d-none">Oculto (no se muestra en la página)</div>
<div class="d-inline">Inline (en línea, no empieza en nueva fila)</div>
<div class="d-inline-block">Inline-block (en línea pero con ancho/alto)</div>
<div class="d-block">Block (ocupa todo el ancho, empieza en nueva fila)</div>
<div class="d-flex">Flex (usa contenedor flexible)</div>
<div class="d-inline-flex">Inline-flex (flex en línea)</div>
<div class="d-grid">Grid (usa contenedor de cuadrícula)</div>
<div class="d-table">Table (se comporta como tabla)</div>
<div class="d-table-row">Table-row (se comporta como fila de tabla)</div>
<div class="d-table-cell">Table-cell (se comporta como celda de tabla)</div>

Visibilidad → Controlan si un elemento es visible u oculto, pero ocupando el mismo espacio en la página.

Ejemplo:
<div class="visible">Elemento visible (se muestra normalmente)</div>
<div class="invisible">Elemento invisible (no se ve, pero conserva el espacio que ocuparía)</div>

Bordes en bootstrap

Bordes básicos

Bordes básicos → Permiten añadir o quitar bordes en todos los lados o en lados específicos.

Ejemplo:
<div class="border">Borde en todos los lados</div>
<div class="border-0">Sin borde</div>
<div class="border-top">Borde solo arriba</div>
<div class="border-end">Borde solo a la derecha (end)</div>
<div class="border-bottom">Borde solo abajo</div>
<div class="border-start">Borde solo a la izquierda (start)</div>

Colores de bordes

Colores de borde → Cambian el color del borde usando la paleta de Bootstrap.

Ejemplo:
<div class="border border-primary">Borde azul (primary)</div>
<div class="border border-secondary">Borde gris (secondary)</div>
<div class="border border-success">Borde verde (success)</div>
<div class="border border-danger">Borde rojo (danger)</div>
<div class="border border-warning">Borde amarillo (warning)</div>
<div class="border border-info">Borde celeste (info)</div>
<div class="border border-light">Borde claro (light)</div>
<div class="border border-dark">Borde oscuro (dark)</div>
<div class="border border-white">Borde blanco (white)</div>

Grosor del borde

Grosor de borde → Ajustan el ancho del borde de un elemento.

Ejemplo:
<div class="border border-1">Borde fino (border-1)</div>
<div class="border border-2">Borde medio (border-2)</div>
<div class="border border-3">Borde grueso (border-3)</div>
<div class="border border-4">Borde más grueso (border-4)</div>
<div class="border border-5">Borde muy grueso (border-5)</div>

Bordes redondeados

Bordes redondeados → Permiten aplicar diferentes radios de redondeo a las esquinas.

Ejemplo:
<div class="rounded">Redondeado estándar (.rounded)</div>
<div class="rounded-0">Sin redondeo (.rounded-0)</div>
<div class="rounded-1">Redondeo pequeño (.rounded-1)</div>
<div class="rounded-2">Redondeo medio (.rounded-2)</div>
<div class="rounded-3">Redondeo grande (.rounded-3)</div>

<div class="rounded-circle">Círculo (.rounded-circle)</div>

<div class="rounded-pill">Forma de pastilla (.rounded-pill)</div>

Sombras en bootstrap

Sombras (shadow-) → Aplican distintos niveles de sombra alrededor de un elemento.

Ejemplo:
<div class="shadow-none">Sin sombra (.shadow-none)</div>
<div class="shadow-sm">Sombra pequeña (.shadow-sm)</div>
<div class="shadow">Sombra normal (.shadow)</div>
<div class="shadow-lg">Sombra grande (.shadow-lg)</div>

overflow en Bootstrap

Overflow (overflow-) → Controlan el comportamiento del contenido que se desborda del contenedor.

Ejemplo:
<div class="overflow-auto">Scroll automático si se desborda</div>
<div class="overflow-hidden">El contenido extra se oculta</div>
<div class="overflow-visible">El contenido se muestra aunque se desborde</div>
<div class="overflow-scroll">Siempre con scroll, haya desborde o no</div>

Posicionamiento en Bootstrap

Posicionamiento (position-)

Posicionamiento (position-) → Controlan cómo se coloca un elemento dentro de su contenedor.

Ejemplo:
<div class="position-static">Posición estática (por defecto, sin posición especial)</div>

<div class="position-relative">Posición relativa (puede moverse con top, left, etc., respecto a su lugar original)</div>

<div class="position-absolute">Posición absoluta (se coloca respecto al primer contenedor con posición distinta a static)</div>

<div class="position-fixed">Posición fija (queda fijo en la ventana, aunque se haga scroll)</div>

<div class="position-sticky">Posición sticky (se comporta como relativa hasta que llega al límite definido, luego se queda fijo)</div>

Flotado (float-)

Flotado (float-) → Controlan la alineación flotante de un elemento dentro de su contenedor.

Ejemplo:
<div class="float-start">Flotado a la izquierda (start)</div>
<div class="float-end">Flotado a la derecha (end)</div>
<div class="float-none">Sin flotado (valor por defecto)</div>

Opacidad (opacity-)

Opacidad (opacity-) → Controlan la transparencia de un elemento.

Ejemplo:
<div class="opacity-0">Totalmente transparente (0%)</div>
<div class="opacity-25">Opacidad 25%</div>
<div class="opacity-50">Opacidad 50%</div>
<div class="opacity-75">Opacidad 75%</div>
<div class="opacity-100">Opacidad completa (100%, visible normal)</div>

Componentes interactivos de Bootstrap con JS

componentes interactivos Alerts

Alerts (alert-) → Muestran mensajes de aviso o notificación con diferentes estilos.

Ejemplo:

<div class="alert alert-primary" role="alert">Alerta azul (primary)</div>

Alerta azul (primary)

<div class="alert alert-success" role="alert">Alerta verde (success)</div>

Alerta verde (success)

<div class="alert alert-danger" role="alert">Alerta roja (danger)</div>

Alerta roja (danger)

<div class="alert alert-warning" role="alert">Alerta amarilla (warning)</div>

Alerta amarilla (warning)

<div class="alert alert-info" role="alert">Alerta celeste (info)</div>

Alerta celeste (info)

<div class="alert alert-light" role="alert">Alerta clara (light)</div>

Alerta clara (light)

<div class="alert alert-dark" role="alert">Alerta oscura (dark)</div>

Alerta oscura (dark)

Badges (Insignias / Etiquetas pequeñas)

Badges (badge-) → Pequeños contadores o etiquetas, se suelen usar en botones o títulos.

Ejemplo:

<span class="badge bg-primary">Primary</span>
Primary

<span class="badge bg-success">Success</span>
Success

<span class="badge bg-danger">Danger</span>
Danger

<span class="badge bg-warning text-dark">Warning</span>
Warning

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

<span class="badge bg-light text-dark">Light</span>
Light

<span class="badge bg-dark">Dark</span>
Dark

Botones

Botones básicos (btn-)

Botones (btn-) → Estilos de botones con diferentes colores y variantes.

Ejemplo:

<button class="btn btn-primary">Primary</button>

<button class="btn btn-success">Success</button>

<button class="btn btn-danger">Danger</button>

<button class="btn btn-warning text-dark">Warning</button>

<button class="btn btn-info text-dark">Info</button>

<button class="btn btn-light text-dark">Light</button>

<button class="btn btn-dark">Dark</button>

<button class="btn btn-link">Link</button>

Botones (btn-group)

Grupos de botones (btn-group) → Permiten agrupar varios botones en línea como si fueran un bloque.

Ejemplo:

<div class="btn-group" role="group">
<button class="btn btn-primary">Izquierda</button>
<button class="btn btn-primary">Centro</button>
<button class="btn btn-primary">Derecha</button>
</div>

Botones (btn-outline-)

Botones outline (btn-outline-) → Botones con borde coloreado y fondo transparente.

Ejemplo:

<button class="btn btn-outline-primary">Primary</button>

<button class="btn btn-outline-success">Success</button>

<button class="btn btn-outline-danger">Danger</button>

<button class="btn btn-outline-warning">Warning</button>

<button class="btn btn-outline-dark">Dark</button>

Botones con tamaños (btn-lg, btn-sm)

Botones: tamaños → Cambian el tamaño del botón.

Ejemplo:

<button class="btn btn-primary btn-lg">Botón grande</button>

<button class="btn btn-primary">Botón normal</button>

<button class="btn btn-primary btn-sm">Botón pequeño</button>

Botones: estados

Botones: estados → Muestran diferentes estados de interacción.

Ejemplo:

<button class="btn btn-primary active">Activo</button>

<button class="btn btn-primary">Normal</button>

<button class="btn btn-primary disabled">Deshabilitado</button>

<button class="btn btn-primary" disabled>Deshabilitado (atributo)</button>

Componentes desplegables: Collapse & Dropdowns

Collapse

Collapse → Permite mostrar u ocultar contenido al hacer clic en un botón o enlace.

Ejemplo:

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#demoCollapse">
Mostrar/Ocultar
</button>
<div class="collapse" id="demoCollapse">
<div class="card card-body">Contenido oculto que se despliega</div>
</div>

Contenido oculto que se despliega

Dropdowns

Dropdowns → Menús desplegables que se abren al hacer clic en un botón.

Ejemplo:

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

Modal (ventana emergente)

Modal → Ventana emergente superpuesta que se abre sobre el contenido principal.

Ejemplo:


<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#demoModal">
  Abrir Modal
</button>


<div class="modal fade" id="demoModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Título del Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">Contenido del modal</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary">Guardar cambios</button>
      </div>
    </div>
  </div>
</div>

Navbar (barra de navegación responsive)

Navbar → Barra de navegación responsive con menú colapsable.

Ejemplo:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MiWeb</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link active" href="#">Inicio</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Características</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Precios</a></li>
        <li class="nav-item"><a class="nav-link disabled">Deshabilitado</a></li>
      </ul>
    </div>
  </div>
</nav>

Offcanvas (menú lateral que aparece/desaparece)

Offcanvas → Menú lateral que se abre y cierra desde un botón.

Ejemplo:


<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demoOffcanvas">
  Abrir menú lateral
</button>


<div class="offcanvas offcanvas-start" tabindex="-1" id="demoOffcanvas">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Menú</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    Contenido del menú lateral
  </div>
</div>

Contenido del menú lateral

Pagination Navegación con enlaces numerados

Pagination → Navegación con enlaces numerados para moverse entre páginas.

Ejemplo:

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Anterior</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Siguiente</a></li>
  </ul>
</nav>

Popovers Ventanas flotantes con texto

Popovers → Ventanas flotantes con texto que aparecen al hacer clic en un elemento.

Ejemplo:

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Título" data-bs-content="Este es el contenido del popover.">
Haz clic para ver popover
</button>

Progress (barras de progreso)

Progress → Barras que muestran el progreso de una tarea.

Ejemplo:

<div class="progress">
<div class="progress-bar" style="width: 25%;">25%</div>
</div>

25%

<div class="progress">
<div class="progress-bar bg-success" style="width: 50%;">50%</div>
</div>

50%

<div class="progress">
<div class="progress-bar bg-info" style="width: 75%;">75%</div>
</div>

75%

<div class="progress">
<div class="progress-bar bg-danger" style="width: 100%;">100%</div>
</div>

100%

Spinners (iconos de carga)

Spinners → Iconos animados que indican carga o procesamiento.

Ejemplo:

<div class="spinner-border text-primary" role="status"></div>

<div class="spinner-border text-success" role="status"></div>

<div class="spinner-border text-danger" role="status"></div>

<div class="spinner-grow text-warning" role="status"></div>

<div class="spinner-grow text-info" role="status"></div>

<div class="spinner-grow text-dark" role="status"></div>

Toast (notificaciones flotantes)

Toast → Notificaciones flotantes que aparecen en pantalla de forma ligera.

Ejemplo:

<button type="button" class="btn btn-primary" id="liveToastBtn">Mostrar Toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert">
    <div class="toast-header">
      <strong class="me-auto">Bootstrap</strong>
      <small>Hace 1 min</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">Hola, este es un toast.</div>
  </div>
</div>

Hola, este es un toast.

Tooltips (Pequeños mensajes flotantes)

Tooltips → Pequeños mensajes flotantes que aparecen al pasar el ratón sobre un elemento.

Ejemplo:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip arriba">
Arriba</button>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip derecha">
Derecha</button>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip abajo">
Abajo</button>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip izquierda">
Izquierda</button>

Formularios (Forms) en Bootstrap

Formulario básico (estructura con .form-label, .form-control)

Formulario básico → Campos de entrada con etiquetas y controles de texto.

Ejemplo:

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="nombre@ejemplo.com">
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Contraseña</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
</form>

Selects y Textarea

Selects y Textarea → Campos de selección y áreas de texto.

Ejemplo:

<div class="mb-3">
  <label for="exampleSelect" class="form-label">Selecciona una opción</label>
  <select class="form-select" id="exampleSelect">
    <option>Opción 1</option>
    <option>Opción 2</option>
    <option>Opción 3</option>
  </select>
</div>

Selecciona una opción

<div class="mb-3">
<label for="exampleTextarea" class="form-label">Comentario</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>

Comentario

Checks y Radios

Checks y Radios → Casillas de verificación y botones de opción.

Ejemplo:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1">
<label class="form-check-label" for="check1">Aceptar términos</label>
</div>

Aceptar términos

<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="radio1">
<label class="form-check-label" for="radio1">Opción 1</label>
</div>

Opción 1

<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="radio2">
<label class="form-check-label" for="radio2">Opción 2</label>
</div>

Opción 2

Validación de formularios

Validación de formularios → Bootstrap añade estilos para inputs válidos e inválidos.

Ejemplo:

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="validationEmail" class="form-label">Email</label>
    <input type="email" class="form-control" id="validationEmail" required>
    <div class="valid-feedback">Correcto!</div>
    <div class="invalid-feedback">Introduce un email válido.</div>
  </div>
  <button class="btn btn-primary" type="submit">Enviar</button>
</form>

Switches (interruptores) y Range (sliders)

Switches (interruptores)

Switches → Interruptores visuales que funcionan como checkboxes.

Ejemplo:

<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="switch1">
<label class="form-check-label" for="switch1">Activar opción</label>
</div>

Activar opción

Range (sliders)

Range (sliders) → Barra deslizante para seleccionar un valor dentro de un rango.

Ejemplo:

<label for="customRange1" class="form-label">Nivel</label>
<input type="range" class="form-range" id="customRange1">

Nivel

Input groups y Floating labels

Input groups

Input groups → Permiten añadir texto o botones antes o después de un campo de entrada.

Ejemplo:

<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Usuario">
</div>

<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Buscar">
<button class="btn btn-outline-secondary" type="button">Ir</button>
</div>

Floating labels (etiquetas flotantes dentro del input)

Floating labels → Etiquetas que flotan dentro del campo de entrada al escribir.

Ejemplo:

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="nombre@ejemplo.com">
<label for="floatingInput">Email</label>
</div>

<div class="form-floating">
<textarea class="form-control" placeholder="Escribe un comentario" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Comentario</label>
</div>

Comentario

Layout avanzado Bootstrap

Alineación de columnas

Alineación de columnas → Controlan la alineación horizontal y vertical dentro del grid.

Ejemplo:

<div class="row justify-content-start">...</div>

Inicio

<div class="row justify-content-center">...</div>

Centro

<div class="row justify-content-end">...</div>

Final

<div class="row justify-content-between">...</div>

Entre

<div class="row justify-content-around">...</div>

Alrededor

<div class="row justify-content-evenly">...</div>

Evenly

<div class="row align-items-start">...</div>

Arriba

<div class="row align-items-center">...</div>

Centro

<div class="row align-items-end">...</div>

Abajo

Orden de columnas (order-*)

Orden de columnas (order-) → Permiten cambiar el orden de las columnas sin modificar el HTML.

Ejemplo:

<div class="row">
  <div class="col order-3 bg-primary text-white">Primera en HTML, tercera en pantalla</div>
  <div class="col order-1 bg-success text-white">Segunda en HTML, primera en pantalla</div>
  <div class="col order-2 bg-danger text-white">Tercera en HTML, segunda en pantalla</div>
</div>

Primera en HTML, tercera en pantalla

Segunda en HTML, primera en pantalla

Tercera en HTML, segunda en pantalla

Offsets (offset-*)

Offsets (offset-) → Añaden espacio a la izquierda de una columna para desplazarla dentro de la fila.

Ejemplo:

<div class="row">
<div class="col-4 bg-primary text-white">Columna normal</div>
<div class="col-4 offset-4 bg-success text-white">Columna desplazada 4</div>
</div>

Columna normal

Columna desplazada 4

<div class="row">
<div class="col-3 offset-3 bg-danger text-white">Columna desplazada 3</div>
<div class="col-3 offset-3 bg-warning text-dark">Columna desplazada 3</div>
</div>

Columna desplazada 3

Anidamiento de columnas (nested rows)

Anidamiento de columnas → Se pueden meter filas (.row) dentro de columnas para crear estructuras más complejas.

Ejemplo:

<div class="row">
  <div class="col-6 bg-primary text-white">
    Columna principal
    <div class="row">
      <div class="col-6 bg-success text-white">Anidada 1</div>
      <div class="col-6 bg-danger text-white">Anidada 2</div>
    </div>
  </div>
  <div class="col-6 bg-warning text-dark">Columna normal</div>
</div>

Columna principal

Anidada 1

Anidada 2

Columna normal

Helpers útiles

Ratio

Ratio → Mantiene proporciones (aspect ratio) en iframes, videos o elementos embebidos.

Ejemplo:

<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8" title="YouTube video" allowfullscreen></iframe>
</div>

ratio ratio-1x1 → Mantiene proporción cuadrada (1:1).

ratio ratio-4x3 → Mantiene proporción clásica de pantalla (4:3).

ratio ratio-16x9 → Mantiene proporción panorámica estándar (16:9).

ratio ratio-21x9 → Mantiene proporción ultra panorámica (21:9).

Visually hidden

Visually hidden → Texto invisible en pantalla pero accesible para lectores de pantalla (útil en accesibilidad).

Ejemplo:

<button class="btn btn-primary">
🔍 Buscar
<span class="visually-hidden">en la página</span>
</button>

Stretched link

Stretched link → Expande un enlace para que toda la caja del contenedor sea clicable.

Ejemplo:

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Título</h5>
    <p class="card-text">Texto dentro de la tarjeta.</p>
    <a href="#" class="stretched-link">Ir al enlace</a>
  </div>
</div>

Título

Texto dentro de la tarjeta.

Ir al enlace

Clearfix

Clearfix → Fuerza a que un contenedor reconozca elementos flotantes (float) en su interior.

Ejemplo:

<div class="bg-light border clearfix">
<div class="float-start bg-primary text-white p-2">Izquierda</div>
<div class="float-end bg-success text-white p-2">Derecha</div>
</div>

Izquierda

Derecha

Helpers de enlaces (.link-*)

Helpers de enlaces (link-*) → Cambian el color de los enlaces usando la paleta de Bootstrap.

Ejemplo:

<a href="#" class="link-primary">Enlace primary</a>
Enlace primary

<a href="#" class="link-success">Enlace success</a>
Enlace success

<a href="#" class="link-danger">Enlace danger</a>
Enlace danger

<a href="#" class="link-warning">Enlace warning</a>
Enlace warning

<a href="#" class="link-info">Enlace info</a>
Enlace info

<a href="#" class="link-dark">Enlace dark</a>
Enlace dark

Helpers de posición

Helpers de posición → Permiten colocar elementos fácilmente con clases de posición.

Ejemplo:

<div class="position-relative bg-light border" style="height:150px;">
  <div class="position-absolute top-0 start-0 bg-primary text-white p-1">Arriba izquierda</div>
  <div class="position-absolute top-0 end-0 bg-success text-white p-1">Arriba derecha</div>
  <div class="position-absolute bottom-0 start-0 bg-danger text-white p-1">Abajo izquierda</div>
  <div class="position-absolute bottom-0 end-0 bg-warning text-dark p-1">Abajo derecha</div>
</div>

Arriba izquierda

Arriba derecha

Abajo izquierda

Abajo derecha