Crear un modal con Boostrap

Tiempo de lectura: 2 minutos

Para crear un modal con Bootstrap y HTML, sigue estos pasos:

• Incluye la hoja de estilos de Bootstrap en tu archivo HTML. Puedes hacerlo descargando el archivo CSS desde el sitio web de Bootstrap o incluyendo un enlace a una versión en línea en tu archivo HTML.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

Agrega el código HTML para tu modal en cualquier lugar dentro del cuerpo de tu página. El código HTML debe incluir un contenedor para el contenido del modal, un botón o enlace para abrir el modal y un botón para cerrarlo.

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

<!-- Contenedor del modal -->
<div class="modal" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Título del modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Contenido del modal</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary">Guardar cambios</button>
      </div>
    </div>
  </div>
</div>

Incluye la librería de JavaScript de Bootstrap en tu archivo HTML para habilitar la funcionalidad del modal. Puedes hacerlo descargando el archivo JavaScript desde el sitio web de Bootstrap o incluyendo un enlace a una versión en línea en tu archivo HTML.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Opcionalmente, puedes personalizar la apariencia del modal utilizando CSS. Bootstrap incluye clases predefinidas que te permiten modificar el tamaño, la posición y otros aspectos del modal.

Nota: Es importante recordar que para utilizar Bootstrap necesitas tener conexión a internet, ya que utiliza archivos externos. Si deseas utilizar Bootstrap sin conexión a internet, puedes descargar los archivos CSS y JavaScript y alojarlos en tu servidor o proyecto local.