Left & right align modal footer buttons in Bootstrap 4

 https://stackoverflow.com/questions/43042262/left-right-align-modal-footer-buttons-in-bootstrap-4


Now that the modal-footer is "display:flex" in Bootstrap 4, it would be easiest to use the auto-margins. Use mr-auto on the left button.

<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

Also see: Left align and right align within div in Bootstrap


Follow-up to comment "What if I need the button on the right to occupy all the space left?" - Use the btn-block class:

<div class="modal-footer">
     <button type="button" class="btn btn-primary text-nowrap">Save changes</button>
     <button type="button" class="btn btn-secondary btn-block ml-1" data-dismiss="modal">Close</button>
</div>

Không có nhận xét nào:

StaticImage

  import React , { useEffect , useRef } from "react" import { StaticImage } from "gatsby-plugin-image" impor...