modal example ejemplos div derecha close boton bootstrap alinear twitter-bootstrap bootstrap-4 twitter-bootstrap-4

twitter-bootstrap - example - modal bootstrap ejemplos



Izquierda y derecha alinean los botones del pie de página modal en Bootstrap 4 (6)

Ahora que el modal-footer es "display: flex" en Bootstrap 4, sería más fácil usar los márgenes automáticos. Utilice mr-auto en el botón izquierdo.

<div class="modal-footer"> <button type="button" class="btn btn-primary mr-auto">Save changes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div>

Demo

Ver también: alinear a la izquierda y alinear a la derecha dentro de div en Bootstrap

Bootstrap 4 usa flex-box para sus pies de página modales. Si quiero dos botones, uno a la izquierda y otro a la derecha, ¿cómo puedo hacer que funcione correctamente?

El siguiente código intenta usar un div.row con col-sm-6 pero no funciona.

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <div class="row"> <div class="col-sm-6 text-left"> <button type="button" class="btn btn-primary">Save changes</button> </div> <div class="col-sm-6 text-right"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div>


El modal-footer es display:flex; . Así que la mejor manera de alinear sus elementos (por ejemplo, los botones) es mediante el uso de reglas flexibles. Bootstrap 4 proporciona nuevas clases de utilidades para modificar esas reglas flexibles (por ejemplo, .justify-content-[modifier] ). Así que creo que una mejor opción debería ser la siguiente:

<div class="modal-footer justify-content-between"> <button type="button" class="btn btn-primary">Save changes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div>

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer justify-content-between"> <button type="button" class="btn btn-primary">Save changes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>


Esto es simple y me ayudó.

<div class="modal-footer"> <button id="pagePrintBtn" type="button" class="btn btn-primary" style= "float: left;">Print</button> </div>


La única forma en que funciona en IE es usando w-100. mx-auto y mr y ml-auto parecen desbordar los botones del elemento contenedor.

<div class="modal-footer"> <div class="w-100"> <button type="button" class="btn btn-default">Cancel</button> <button type="button" class="btn btn-primary float-right">Save</button> </div> </div>


Para Bootstrap 4

Usamos Spacing, Bootstrap incluye una amplia gama de clases de utilidad de margen de respuesta abreviadas y acolchadas para modificar la apariencia de un elemento. Las clases se nombran usando el formato {propiedad} {lados} - {tamaño} para xs y {propiedad} {lados} - {punto de interrupción} - {tamaño} para sm, md, lg y xl.

Más información aquí: https://getbootstrap.com/docs/4.1/utilities/spacing/

<!--Footer--> <div class="modal-footer"> <button type="submit" class="btn btn-primary ml-auto">Enviar</button> <button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button> </div>


<div class="modal-footer justify-content-start"> <input type="hidden" value="" name=""> <button id="pagePrintBtn" type="button" class="btn btn-primary">Print</button> <button type="button" class="btn btn-secondary ml-auto" data-dismiss="modal">Delete</button> <button type="button" class="btn btn-primary" id=asd>Save</button> </div>