Comment augmenter la largeur modale de Bootstrap?

j'ai essayé mais j'ai mal tourné

voici le css

body .modal-ku {
width: 750px;
}

et voici le résultat raté

Dans votre code, pour le modal-dialogdiv, ajoutez une autre classe modal-lg,:

<div class="modal-dialog modal-lg">

Ou si vous souhaitez centrer votre boîte de dialogue modale, utilisez:

.modal-ku {
  width: 750px;
  margin: auto;
}

Le moyen le plus simple peut être le style en ligne sur modal-dialogdiv:

<div class="modal" id="myModal">
   <div class="modal-dialog" style="width:1250px;">
      <div class="modal-content">
            ...

        </div>
     </div>
 </div>

Dans mon cas,

1. Donner une largeur statique au modal nuit à la réactivité.
2. La modal-lgclasse n'était pas assez large.

donc la solution était

@media (min-width: 1200px) {
   .modal-xlg {
      width: 90%; 
   }
}

et utilisez la classe ci-dessus au lieu de la modal-lgclasse

Dans Bootstrap 3, vous devez changer la boîte de dialogue modale. Donc, dans ce cas, vous pouvez ajouter la classe modal-admin à l'endroit où se trouve modal-dialog.

@media (min-width: 768px) {
  .modal-dialog {
    width: 600;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
}

Vous pouvez choisir entre modal-lget modal-xlclasses ou si vous voulez une largeur personnalisée, définissez la propriété max-width avec css en ligne. Par exemple,

<div class="modal-dialog modal-xl" role="document">

ou

<div class="modal-dialog" style="max-width: 80%;" role="document">

Dans Bootstrap, la largeur par défaut de modal-dialogest 600px. Mais vous pouvez modifier explicitement sa largeur. Par exemple, si vous souhaitez maximiser sa largeur à la valeur de votre choix, 800pxpar exemple, procédez comme suit:

.modal-dialog {
    width: 800px;
    margin: 30px auto;
}

Remarque : cette modification s'applique à toutes les boîtes de dialogue modales que vous utilisez dans votre application. De plus, ma suggestion est qu'il est préférable de définir vos propres règles CSS et de ne pas toucher au cœur du framework.

Si vous souhaitez qu'il ne soit défini que pour une boîte de dialogue modale spécifique, utilisez votre propre nom de classe accrocheur modal-800dont la largeur est définie 800pxcomme suit:

HTML

<div class="modal">
   <div class="modal-dialog modal-800">
      <div class="modal-content">

      </div>
   </div>
</div>

CSS

.modal-dialog.modal-800 {
    width: 800px;
    margin: 30px auto;
}

De même, vous pouvez avoir le nom de la classe en fonction de la taille de la largeur, comme celle de modal-700la largeur 700px.

J'espère que c'est utile!

J'avais une grande grille qui devait être affichée dans le modal et le simple fait d'appliquer la largeur sur le corps ne fonctionnait pas correctement car la table débordait bien qu'elle contienne des classes bootstrap. J'ai fini par appliquer la même largeur sur modal-bodyet modal-content:

<!--begin::Modal-->
<div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content" style="width:980px;">
            <div class="modal-header">
                <h5 class="modal-title" id="">Title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="la la-remove"></span>
                </button>
            </div>
            <form class="m-form m-form--fit m-form--label-align-right">
                <div class="modal-body" style="width:980px;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-brand m-btn" data-dismiss="modal">Close</button>

                </div>
            </form>
        </div>
    </div>
</div>

<!--end::Modal-->

Si vous souhaitez conserver la réactivité modale, utilisez le% de la largeur au lieu des pixels. Vous pouvez le faire en ligne (voir ci-dessous) ou avec CSS.

<div class="modal fade" id="phpModal" role="dialog">
            <div class="modal-dialog modal-lg" style="width:80%;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">HERE YOU TITLE</h4>
                    </div>
                    <div class="modal-body helpModal phpModal">
                        HERE YOUR CONTENT
                    </div>
                </div>
            </div>
        </div>

Si vous utilisez CSS, vous pouvez même faire des% différents pour modal-sm et modal-lg.

J'ai également rencontré le même problème lors de l'augmentation de la largeur du modal, la fenêtre ne s'affiche pas au centre. Après le travail, j'ai trouvé la solution ci-dessous.

.modal-dialog {
    max-width: 850px;
    margin: 2rem auto;
}

En fait, vous appliquez CSS sur un div modal.

vous devez appliquer CSS sur .modal-dialog

Par exemple, consultez le code suivant.

<div class="modal" id="myModal">
 <div class="modal-dialog" style="width:xxxpx;"> <!-- Set width of div which you want -->
      <div class="modal-content">
           Lorem Ipsum some text...content 

        </div>
     </div>
 </div>

Bootstrap fournit également des classes pour définir la largeur div.

Pour une petite utilisation modale modal-sm

Et pour le gros modal modal-lg

La façon la plus simple de le faire est:

$(".modal-dialog").css("width", "80%");

où nous pouvons spécifier la largeur du modal en termes de pourcentage de l'écran.

Voici un exemple de travail pour démontrer la même chose:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <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>
  <script type="text/javascript">
  $(document).ready(function () {
  		$(".modal-dialog").css("width", "90%");
  });
  </script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</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>

n votre code, pour le div de dialogue modal, ajoutez une autre classe, modal-lg:

utiliser modal-xl

Je suppose que cela se produit en raison du fait que la largeur maximale d'un modal est définie sur 500px et que la largeur maximale de modal-lg est de 800px.Je suppose que le régler sur auto rendra votre modal réactif

.your_modal {
    width: 800px;
    margin-left: -400px; 
 }

La valeur de la marge gauche correspond à la moitié de la largeur du modal. J'utilise ceci avec le thème Maruti Admin car il n'a pas de classe.modal-lg .modal-sm