Documentación de Bootstrap 5

<!-- CSS de Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JavaScript de Bootstrap (colócalo antes del cierre del body) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

npm install bootstrap

<!-- Contenedor responsive con ancho máximo -->
<div class="container">
  <!-- Contenido -->
</div>

<!-- Contenedor fluido (ancho completo) -->
<div class="container-fluid">
  <!-- Contenido -->
</div>

<!-- Contenedor responsivo a partir de md -->
<div class="container-md">
  <!-- Contenido -->
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="p-3 bg-primary text-white">Columna 1</div>
    </div>
    <div class="col-sm-4">
      <div class="p-3 bg-primary text-white">Columna 2</div>
    </div>
    <div class="col-sm-4">
      <div class="p-3 bg-primary text-white">Columna 3</div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">
      <div class="p-3 bg-primary text-white">col-12 col-md-8</div>
    </div>
    <div class="col-6 col-md-4">
      <div class="p-3 bg-primary text-white">col-6 col-md-4</div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col">
      <div class="p-3 bg-primary text-white">1 de 3</div>
    </div>
    <div class="col">
      <div class="p-3 bg-primary text-white">2 de 3</div>
    </div>
    <div class="col">
      <div class="p-3 bg-primary text-white">3 de 3</div>
    </div>
  </div>
</div>

<div class="row align-items-start" style="height: 100px;">
  <div class="col">Arriba</div>
  <div class="col">Arriba</div>
</div>

<div class="row align-items-center" style="height: 100px;">
  <div class="col">Centro</div>
  <div class="col">Centro</div>
</div>

<div class="row align-items-end" style="height: 100px;">
  <div class="col">Abajo</div>
  <div class="col">Abajo</div>
</div>

<div class="container">
  <div class="row g-3">
    <div class="col-6">
      <div class="p-3 bg-primary text-white">Columna con gutter</div>
    </div>
    <div class="col-6">
      <div class="p-3 bg-primary text-white">Columna con gutter</div>
    </div>
    <div class="col-6">
      <div class="p-3 bg-primary text-white">Columna con gutter</div>
    </div>
    <div class="col-6">
      <div class="p-3 bg-primary text-white">Columna con gutter</div>
    </div>
  </div>
</div>

<div class="alert alert-primary" role="alert">
  Esta es una alerta primaria
</div>
<div class="alert alert-success" role="alert">
  Esta es una alerta de éxito
</div>
<div class="alert alert-danger" role="alert">
  Esta es una alerta de peligro
</div>
<div class="alert alert-warning" role="alert">
  Esta es una alerta de advertencia
</div>
<div class="alert alert-info" role="alert">
  Esta es una alerta informativa
</div>

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">¡Bien hecho!</h4>
  <p>Has completado correctamente esta tarea.</p>
  <hr>
  <p class="mb-0">Asegúrate de revisar las instrucciones para la siguiente tarea.</p>
</div>

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>¡Atención!</strong> Esta alerta puede ser cerrada.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>

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

<button type="button" class="btn btn-primary" disabled>Botón desactivado</button>
<button type="button" class="btn btn-primary active">Botón activo</button>

<div class="btn-group" role="group" aria-label="Grupo de botones básico">
  <button type="button" class="btn btn-primary">Izquierda</button>
  <button type="button" class="btn btn-primary">Centro</button>
  <button type="button" class="btn btn-primary">Derecha</button>
</div>

<div class="card" style="width: 18rem;">
  <img src="imagen.jpg" class="card-img-top" alt="Imagen de ejemplo">
  <div class="card-body">
    <h5 class="card-title">Título de la card</h5>
    <p class="card-text">Un ejemplo de texto rápido para colocar en la card y hacer de su título.</p>
    <a href="#" class="btn btn-primary">Ir a algún lado</a>
  </div>
</div>

<div class="card">
  <div class="card-header">
    Cabecera
  </div>
  <div class="card-body">
    <h5 class="card-title">Título especial</h5>
    <p class="card-text">Con texto de apoyo a continuación como introducción natural a contenido adicional.</p>
    <a href="#" class="btn btn-primary">Ir a algún lado</a>
  </div>
  <div class="card-footer text-muted">
    Hace 2 días
  </div>
</div>

<div class="card-group">
  <div class="card">
    <img src="imagen1.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Título de la card 1</h5>
      <p class="card-text">Contenido de la card 1.</p>
    </div>
  </div>
  <div class="card">
    <img src="imagen2.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Título de la card 2</h5>
      <p class="card-text">Contenido de la card 2.</p>
    </div>
  </div>
  <div class="card">
    <img src="imagen3.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Título de la card 3</h5>
      <p class="card-text">Contenido de la card 3.</p>
    </div>
  </div>
</div>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Enlace</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Acción</a></li>
            <li><a class="dropdown-item" href="#">Otra acción</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Algo más aquí</a></li>
          </ul>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Buscar" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Buscar</button>
      </form>
    </div>
  </div>
</nav>

<!-- Botón para abrir el modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Abrir modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Título del modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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>

<div class="p-3">Padding de 1rem (16px) en todos los lados</div>
    <div class="pt-3">Padding-top de 1rem</div>
    <div class="pb-3">Padding-bottom de 1rem</div>
    <div class="ps-3">Padding-left de 1rem</div>
    <div class="pe-3">Padding-right de 1rem</div>
    <div class="px-3">Padding horizontal de 1rem</div>
    <div class="py-3">Padding vertical de 1rem</div>
    <div class="m-3">Margin de 1rem en todos los lados</div>
    
    <!-- Ejemplo de me-auto -->
    <div class="d-flex justify-content-between">
      <div class="me-auto">me-auto: Empuja a la izquierda</div>
      <div>Elemento derecho</div>
    </div>

<p class="text-primary">.text-primary</p>
    <p class="text-secondary">.text-secondary</p>
    <p class="text-success">.text-success</p>
    <p class="text-danger">.text-danger</p>
    <p class="text-warning">.text-warning</p>
    <p class="text-info">.text-info</p>
    <p class="text-light bg-dark">.text-light</p>
    <p class="text-dark">.text-dark</p>
    <p class="text-muted">.text-muted</p>
    <p class="text-white bg-dark">.text-white</p>

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
    <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
    <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
    <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
    <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
    <div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
    <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
    <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
    <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

<div class="d-flex p-2">Soy un contenedor flexbox</div>
    <div class="d-inline-flex p-2">Soy un contenedor flexbox inline</div>

<div class="d-flex flex-row">
      <div class="p-2">Flex item 1</div>
      <div class="p-2">Flex item 2</div>
      <div class="p-2">Flex item 3</div>
    </div>
    
    <div class="d-flex flex-row-reverse">
      <div class="p-2">Flex item 1</div>
      <div class="p-2">Flex item 2</div>
      <div class="p-2">Flex item 3</div>
    </div>
    
    <div class="d-flex flex-column">
      <div class="p-2">Flex item 1</div>
      <div class="p-2">Flex item 2</div>
      <div class="p-2">Flex item 3</div>
    </div>

<div class="d-flex justify-content-start">...</div>
    <div class="d-flex justify-content-end">...</div>
    <div class="d-flex justify-content-center">...</div>
    <div class="d-flex justify-content-between">...</div>
    <div class="d-flex justify-content-around">...</div>

<div class="d-flex align-items-start" style="height: 100px;">
      <div class="p-2">Flex item</div>
      <div class="p-2">Flex item</div>
      <div class="p-2">Flex item</div>
    </div>
    
    <div class="d-flex align-items-center" style="height: 100px;">
      <div class="p-2">Flex item</div>
      <div class="p-2">Flex item</div>
      <div class="p-2">Flex item</div>
    </div>
    
    <div class="d-flex align-items-end" style="height: 100px;">
      <div class="p-2">Flex item</div>
      <div class="p-2">Flex item</div>
      <div class="p-2">Flex item</div>
    </div>

<div class="d-inline p-2 bg-primary text-white">d-inline</div>
    <div class="d-inline p-2 bg-dark text-white">d-inline</div>
    
    <span class="d-block p-2 bg-primary text-white">d-block</span>
    <span class="d-block p-2 bg-dark text-white">d-block</span>
    
    <div class="d-flex p-2 bg-primary text-white">d-flex</div>
    
    <div class="d-none p-2 bg-dark text-white">d-none (este elemento está oculto)</div>

<div class="d-none d-sm-block">Oculto en xs, visible en sm y superiores</div>
    <div class="d-block d-md-none">Visible en xs y sm, oculto en md y superiores</div>

<div class="position-static">Posición estática</div>
    <div class="position-relative">Posición relativa</div>
    <div class="position-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">Posición absoluta (centrado)</div>
    <div class="position-sticky" style="top: 0;">Posición sticky</div>

<div class="position-relative">
      <div class="position-absolute top-0 start-0">top-0 start-0</div>
      <div class="position-absolute top-0 end-0">top-0 end-0</div>
      <div class="position-absolute top-50 start-50">top-50 start-50</div>
      <div class="position-absolute bottom-0 start-0">bottom-0 start-0</div>
      <div class="position-absolute bottom-0 end-0">bottom-0 end-0</div>
    </div>

<p class="text-start">Texto alineado a la izquierda.</p>
    <p class="text-center">Texto centrado.</p>
    <p class="text-end">Texto alineado a la derecha.</p>

<p class="text-lowercase">TEXTO EN MINÚSCULAS.</p>
    <p class="text-uppercase">texto en mayúsculas.</p>
    <p class="text-capitalize">texto capitalizado.</p>

<p class="fw-bold">Texto en negrita.</p>
    <p class="fw-bolder">Texto más negrita.</p>
    <p class="fw-normal">Texto normal.</p>
    <p class="fw-light">Texto ligero.</p>
    <p class="fw-lighter">Texto más ligero.<
    <p class="fw-lighter">Texto más ligero.</p>
<p class="fst-italic">Texto en cursiva.</p>
<p class="fst-normal">Texto con estilo normal.</p>

<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

<span class="border rounded"></span>
<span class="border rounded-top"></span>
<span class="border rounded-end"></span>
<span class="border rounded-bottom"></span>
<span class="border rounded-start"></span>
<span class="border rounded-circle"></span>
<span class="border rounded-pill"></span>

<div class="shadow-none p-3 mb-3 bg-light rounded">Sin sombra</div>
<div class="shadow-sm p-3 mb-3 bg-white rounded">Sombra pequeña</div>
<div class="shadow p-3 mb-3 bg-white rounded">Sombra regular</div>
<div class="shadow-lg p-3 mb-3 bg-white rounded">Sombra grande</div>

<div class="w-25">Ancho 25%</div>
<div class="w-50">Ancho 50%</div>
<div class="w-75">Ancho 75%</div>
<div class="w-100">Ancho 100%</div>
<div class="w-auto">Ancho auto</div>

<div class="h-25">Altura 25%</div>
<div class="h-50">Altura 50%</div>
<div class="h-75">Altura 75%</div>
<div class="h-100">Altura 100%</div>
<div class="h-auto">Altura auto</div>

<form>
  <div class="mb-3">
    <label for="exampleInput1" class="form-label">Dirección de email</label>
    <input type="email" class="form-control" id="exampleInput1" placeholder="name@example.com">
    <div class="form-text text-muted">Nunca compartiremos tu email con nadie más.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInput2" class="form-label">Contraseña</label>
    <input type="password" class="form-control" id="exampleInput2">
  </div>
  <div class="mb-3">
    <label for="exampleSelect" class="form-label">Ejemplo de select</label>
    <select class="form-select" id="exampleSelect">
      <option selected>Selecciona una opción</option>
      <option value="1">Uno</option>
      <option value="2">Dos</option>
      <option value="3">Tres</option>
    </select>
  </div>
  <div class="mb-3">
    <label for="exampleTextarea" class="form-label">Ejemplo de textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
</form>

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Checkbox por defecto
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checkbox marcado
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Radio por defecto
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Radio seleccionado por defecto
  </label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Switch por defecto</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Switch marcado</label>
</div>

<input class="form-control form-control-lg" type="text" placeholder="Input grande">
<input class="form-control" type="text" placeholder="Input normal">
<input class="form-control form-control-sm" type="text" placeholder="Input pequeño">

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="validationCustom01" class="form-label">Nombre</label>
    <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
    <div class="valid-feedback">
      ¡Se ve bien!
    </div>
  </div>
  <div class="mb-3">
    <label for="validationCustom02" class="form-label">Apellido</label>
    <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
    <div class="valid-feedback">
      ¡Se ve bien!
    </div>
  </div>
  <div class="mb-3">
    <label for="validationCustomUsername" class="form-label">Usuario</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="inputGroupPrepend">@</span>
      <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
      <div class="invalid-feedback">
        Por favor, elige un nombre de usuario.
      </div>
    </div>
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Acepto los términos y condiciones
      </label>
      <div class="invalid-feedback">
        Debes estar de acuerdo antes de enviar.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Enviar formulario</button>
</form>

<script>
// Ejemplo de JavaScript para deshabilitar el envío del formulario si hay campos inválidos
(function () {
  'use strict'

  // Obtener todos los formularios a los que queremos aplicar estilos de validación de Bootstrap personalizados
  var forms = document.querySelectorAll('.needs-validation')

  // Bucle sobre ellos y prevenir el envío
  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })
})()
</script>

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nombre</th>
      <th scope="col">Apellido</th>
      <th scope="col">Usuario</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<!-- Tabla oscura -->
<table class="table table-dark">
  <!-- Contenido de la tabla -->
</table>

<!-- Tabla con filas alternas -->
<table class="table table-striped">
  <!-- Contenido de la tabla -->
</table>

<table class="table table-bordered">
  <!-- Contenido de la tabla -->
</table>

<div class="table-responsive">
  <table class="table">
    <!-- Contenido de la tabla -->
  </table>
</div>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Inicio</a></li>
    <li class="breadcrumb-item"><a href="#">Biblioteca</a></li>
    <li class="breadcrumb-item active" aria-current="page">Datos</li>
  </ol>
</nav>

<nav aria-label="Ejemplo de paginación">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Anterior</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <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>

<!-- Tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Activo</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Desactivado</a>
  </li>
</ul>

<!-- Pills -->
<ul class="nav nav-pills">
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Activo</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Desactivado</a>
  </li>
</ul>

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Elemento de acordeón #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Este es el cuerpo del primer elemento de acordeón.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Elemento de acordeón #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Este es el cuerpo del segundo elemento de acordeón.
      </div>
    </div>
  </div>
</div>

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Anterior</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Siguiente</span>
  </button>
</div>

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Enlace con data-bs-target
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Botón con data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Algún contenido de marcador de posición para el componente de colapso.
  </div>
</div>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Botón Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Acción</a></li>
    <li><a class="dropdown-item" href="#">Otra acción</a></li>
    <li><a class="dropdown-item" href="#">Algo más aquí</a></li>
  </ul>
</div>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip en la parte superior">
  Tooltip en top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip en la derecha">
  Tooltip en right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip en la parte inferior">
  Tooltip en bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip en la izquierda">
  Tooltip en left
</button>

<script>
// Inicializar todos los tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Título del Popover" data-bs-content="Y aquí hay contenido sorprendente. Es muy atractivo.">Haz clic para activar</button>

<script>
// Inicializar todos los popovers
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

<button type="button" class="btn btn-primary" id="liveToastBtn">Mostrar toast en vivo</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <div class="rounded me-2 bg-primary" style="width: 20px; height: 20px;"></div>
      <strong class="me-auto">Bootstrap</strong>
      <small>Hace 11 minutos</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      ¡Hola, mundo! Este es un mensaje de toast.
    </div>
  </div>
</div>

<script>
var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var toast = new bootstrap.Toast(toastLiveExample)
    toast.show()
  })
}
</script>

<!-- Incluir la biblioteca de Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<!-- Usar iconos como elementos i -->
<i class="bi bi-alarm"></i>
<i class="bi bi-cloud-download"></i>
<i class="bi bi-calendar-date"></i>
<i class="bi bi-camera"></i>
<i class="bi bi-envelope"></i>
<i class="bi bi-geo-alt"></i>
<i class="bi bi-heart"></i>
<i class="bi bi-house"></i>
<i class="bi bi-pencil"></i>
<i class="bi bi-person"></i>
<i class="bi bi-search"></i>
<i class="bi bi-star"></i>

<i class="bi bi-alarm fs-1"></i> <!-- Extra grande -->
<i class="bi bi-alarm fs-2"></i> <!-- Grande -->
<i class="bi bi-alarm fs-3"></i> <!-- Mediano -->
<i class="bi bi-alarm fs-4"></i> <!-- Pequeño -->
<i class="bi bi-alarm fs-5"></i> <!-- Extra pequeño -->

<div class="clearfix">
  <button type="button" class="btn btn-secondary float-start">Botón flotante a la izquierda</button>
  <button type="button" class="btn btn-secondary float-end">Botón flotante a la derecha</button>
</div>

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

<h2 class="visually-hidden">Título oculto (solo visible para lectores de pantalla)</h2>

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card con stretched link</h5>
    <p class="card-text">Un ejemplo de cómo usar la clase stretched-link en un enlace dentro de una card.</p>
    <a href="#" class="btn btn-primary stretched-link">Ir a algún lado</a>
  </div>
</div>

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>

<div class="opacity-100">Opacidad 100%</div>
<div class="opacity-75">Opacidad 75%</div>
<div class="opacity-50">Opacidad 50%</div>
<div class="opacity-25">Opacidad 25%</div>

<div class="float-start">Float start en todos los tamaños de viewport</div>
<div class="float-end">Float end en todos los tamaños de viewport</div>
<div class="float-none">Sin float en todos los tamaños de viewport</div>

<!-- Responsive floats -->
<div class="float-sm-start">Float start en viewports sm o más grandes</div>
<div class="float-md-start">Float start en viewports md o más grandes</div>
<div class="float-lg-start">Float start en viewports lg o más grandes</div>
<div class="float-xl-start">Float start en viewports xl o más grandes</div>

<p class="user-select-all">Este texto será seleccionado completamente cuando el usuario haga clic en él.</p>
<p class="user-select-none">Este texto no se puede seleccionar.</p>
<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">Este enlace</a> no se puede clicar (pe-none).</p>
<p><a href="#" class="pe-auto">Este enlace</a> se puede clicar (pe-auto).</p>

/* Sobrescribir variables CSS de Bootstrap */
:root {
  --bs-blue: #0073e6;
  --bs-primary: #0073e6;
  --bs-border-radius: 0.5rem;
  --bs-body-font-family: 'Open Sans', sans-serif;
}

// Personalizar variables de Sass de Bootstrap
$primary: #0073e6;
$border-radius: 0.5rem;
$font-family-base: 'Open Sans', sans-serif;

// Importar Bootstrap
@import "bootstrap/scss/bootstrap";

/* Sobrescribir el estilo de los botones */
.btn-primary {
  background-color: #0073e6;
  border-color: #0073e6;
}

.btn-primary:hover {
  background-color: #0059b3;
  border-color: #0059b3;
}