Geek Answers Handbook

Bootstrap modal-body compressed in modal-footer

I am creating some modals with Bootstrap .

I use different div as shown in the Bootstrap Component Explanation .

What I'm experiencing is that when the screen size is larger than x (the average value is unknown), the div containing my modal-body pushes up (empty) and the div containing my modal-footer absorbs the elements modal-body .

This image is to explain what I am saying:

Regular modal normal bootstrap modal

Compressed modal enter image description here

To compose it, just change the screen size.

 <HTML> <head> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <div id='modal' class='modal-dialog'> <div class='modal-content'> <div class='modal-header'> <button type='button' class='close' data-dismiss='modal' aria-label='Close'> <span aria-hidden='true'>&times;</span> </button> <h4 class='modal-title'>Change name</h4> </div> <div class='modal-body'> <form id='formModal' method='post' action='giocatori.php'> <div class='form-group col-md-12'> <label>Name</label> <input id='nome_iscrizione' type='text' class='form-control' name='name' value='New name'> </div> </form> </div> <div class='modal-footer'> <button type='button' class='btn btn-default' data-dismiss='modal'>Chiudi</button> <button type='button' class='btn btn-primary'>Salva</button> </div> </div> </div> </body> </HTML>

If you want to experience a compressed modal, run the snippet, and then click the Full page button.

How can I avoid a compressible body?

+7
html twitter-bootstrap modal-dialog bootstrap-modal
source share
1 answer

Bootstrap column classes are for use with row classes and are not combined with other elements / classes. Row and column classes work together to provide float cleanup. Try the following:

 <HTML> <head> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <div id='modal' class='modal-dialog'> <div class='modal-content'> <div class='modal-header'> <button type='button' class='close' data-dismiss='modal' aria-label='Close'> <span aria-hidden='true'>&times;</span> </button> <h4 class='modal-title'>Change name</h4> </div> <div class='modal-body'> <form id='formModal' method='post' action='giocatori.php'> <!-- use a row class --> <div class='row'> <!-- keep the col class by itself --> <div class='col-md-4'> <div class='form-group'> <label>Name</label> <input id='nome_iscrizione' type='text' class='form-control' name='name' value='New name'> </div> </div> </div> </form> </div> <div class='modal-footer'> <button type='button' class='btn btn-default' data-dismiss='modal'>Chiudi</button> <button type='button' class='btn btn-primary'>Salva</button> </div> </div> </div> </body> </HTML>
+13
source share

More articles:


All Articles