¿Cómo configurar el ancho modal en Bootstrap?

Bootstrap Modal: es una ventana de diálogo que se abre dentro de la ventana del navegador al activar ciertos eventos. Es una forma realmente conveniente de mejorar la representación del contenido del sitio web según los requisitos. 
En este artículo, nos centraremos en ajustar el ancho/alto del cuadro modal.
Método 1: uso de clases predefinidas de Bootstrap 
Bootstrap tiene clases predefinidas para cambiar los atributos de dimensión modal que se usarán con el elemento div que contiene .modal-dialog . Estos se enumeran a continuación: 
 

  • Modal de pequeño tamaño: . modal-sm
  • Modal mediano: . modal-md
  • Modal de gran tamaño: . modal-lg

html

<!-- Small Bootstrap Modal Example -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" 
     content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
  </head>
  
  <body>
    <div class="container-fluid">
      <h2>Small Modal</h2>
  
      <p>
        Other classes mentioned above are 
        also implemented in the same manner.
      </p>
  
      <button
        type="button"
        class="btn btn-success"
        data-toggle="modal"
        data-target="#modal"
      >
        Open Small-modal
      </button>
      <!-- Modal Code -->
      <div class="modal fade" id="modal" role="dialog">
        <div class="modal-dialog modal-sm">
          <!-- .modal-sm here makes a small modal
       Can be replaced with '.modal-md' & '.modal-lg'
    -->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">
                ×
              </button>
              <h4 class="modal-title">GeeksforGeeks</h4>
            </div>
            <div class="modal-body">
              <p>GeeksforGeeks - A computer science portal for geeks</p>
            </div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-default"
                data-dismiss="modal"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Salida
 

Método 2: Usar dimensiones personalizadas manipulando los atributos CSS predeterminados 
También podemos personalizar el ancho/alto del modal cambiando las propiedades CSS para el div que contiene la clase .modal-dialog . A continuación se muestra la solución para el mismo. 
Solución
 

html

<!-- Changing CSS properties for the div 
containing '.modal-dialog' class -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" 
     content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
    <style>
      .custom {
        width: 600px;
        min-height: 400px;
      }
    </style>
  </head>
  
  <body>
    <div class="container-fluid">
      <h2>Custom-sized Modal</h2>
  
      <p>
        We are changing CSS properties of div containing 
        the '.modal-dialog' to do the same.
      </p>
  
      <button
        type="button"
        class="btn btn-success"
        data-toggle="modal"
        data-target="#modal"
      >
        Open Custom-sized modal
      </button>
  
      <!-- Modal Code -->
      <div class="modal fade" id="modal" role="dialog">
        <div class="modal-dialog">
          <!-- '.custom' class added here to do the same -->
          <div class="modal-content custom">
            <div class="modal-header">
              <button type="button" 
               class="close" data-dismiss="modal">
                ×
              </button>
              <h4 class="modal-title">GeeksforGeeks</h4>
            </div>
            <div class="modal-body">
              <p>GeeksforGeeks - A computer science 
                 portal for geeks</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Salida
 

Publicación traducida automáticamente

Artículo escrito por devproductify y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *