Left & right align modal footer buttons in Bootstrap 4

Question

Bootstrap 4 uses flex-box for it's modal footers. If I want two buttons, one on the left and one on the right, how do I get it to work properly?

The code below tries to use a div.row with col-sm-6 but doesn't work.

<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>

Carol Skelly · Accepted Answer · 2020-05-03T12:35:41.743

240

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>

edited May 03 '20 at 12:35

answered Mar 27 '17 at 11:05

Carol Skelly

351,302
90
710
624

1

Thanks, that's great. One last thing - what happens if I have a `fieldset` thrown in the mix? http://www.codeply.com/go/5WyUT4VA4n – Sean Mar 27 '17 at 14:32
1

Then I would use the `w-100` to make it full width and float-right: http://www.codeply.com/go/Eu0O9Lev5p – Carol Skelly Mar 27 '17 at 14:41
2

`mr-auto` is the solution. Nice and easy usage of a single class. Thanks! – Matt Komarnicki Feb 27 '19 at 06:06
What if I need the button on the right to occupy all the space left? – Andres SK May 02 '20 at 18:48
@Codeply-er thanks for the quick answer, but that doesn't quite work. The `btn-block` button ends up occupying 100% of the parent's width, and the first button stays alone above it. – Andres SK May 03 '20 at 15:04
@Codeply-er that's strange. I see your example works just fine, but if I use the same approach I get this: https://i.ibb.co/C2Yb3f0/Screen-Shot-2020-05-04-at-10-04-11-AM.png - will look more into this, thanks. – Andres SK May 04 '20 at 15:05
@Codeply-er found the issue. I'm using Bootstrap 4.4.1, in this version (higher than the one used in your example), the .modal-footer class is using `flex-wrap: wrap;`, which won't allow to solve the issue. In this new version, your solution works as long as you add the `flex-nowrap` class to the `modal-footer` div. – Andres SK May 04 '20 at 15:13
1

2022 update, for bootstrap 5 this fix works with a caveat: Instead of `mr-auto` us `me-auto`, for `ml-auto` use `ms-auto`. In some cases, I had to additionally add `float-right` and `float-left` classes. – DemitryT Mar 04 '22 at 02:48

score 22 · Answer 2 · answered Jan 30 '18 at 22:15

The modal-footer is display:flex;. So the better way to align its elements (e.g. buttons) is by using flex rules. Bootstrap 4 provides new utilities classes to modify those flex rules (e.g. .justify-content-[modifier]). So I think a better option should be as follows:

<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>

If the issue involves also using IE, this is a better solution than the others. — cristiancajiaos, Mar 09 '18 at 16:48

score 8 · Answer 3 · answered Mar 14 '19 at 16:12

For anyone that wants 3 buttons, for example 2 on the right and 1 on the left:

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

score 7 · Answer 4 · answered Oct 24 '17 at 04:53

The only way it works in IE is using w-100. mx-auto and mr and ml-auto all seems to overflow the buttons from the containing element.

<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>

score 7 · Answer 5 · answered Oct 11 '19 at 13:56

Totally agree with @Zim and @jmboiton

If both of these methods are used together, it fixes the issue for everyone (including IE users :P )

Overall best solution is to combine .justify-content-between and the .mr-auto classes like this:

<div class="modal-footer justify-content-between">
  <button type="button" class="btn btn-secondary mr-auto" type="button">Left Button</button>
  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save changes</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-secondary mr-auto" type="button">Left Button</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

score 3 · Answer 6 · answered Jan 31 '21 at 15:31

3

This works for me

 <div class="modal-footer">
     <button type="button" class="btn btn-primary d-flex flex-grow-1">Save changes</button>
     <button type="button" class="btn btn-secondary d-flex flex-grow-1" data-dismiss="modal">Close</button>
</div>

answered Jan 31 '21 at 15:31

Emsea

31
1

Hi Emsea, Welcome to SO. In general when answering it's always good to explain the _why_ rather than just giving some code (or markdown in this case) with no explanation. Also, when answering an old question with an accepted answer it's always good to indicate why your answer is suddenly relevant, e.g. if the accepted answer now deprecated etc. – mdmjsh Jan 31 '21 at 16:35

score 3 · Answer 7 · answered Feb 16 '22 at 12:43

`<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>`.

you can create a div tag (<div class="col-md-12 text-right></div>) and put your button tags inside that div section.. This will center the buttons.. if you want to move the to any other position and css style float: left or right to a class in our new div tag.

upvoting because your code example allowed me to align three buttons left, center, right in a bootstrap 4 modal footer - thanks — cloudxix, Jul 13 '22 at 07:55

score 1 · Answer 8 · answered Jan 22 '18 at 23:12

  <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>

Gonen09 · Answer 9 · 2018-04-13T18:30:59.743

For Bootstrap 4

We use Spacing, Bootstrap includes a wide range of abbreviated and padded response margin utility classes to modify the appearance of an element. The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

more info here: 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>

score 0 · Answer 10 · answered Nov 29 '17 at 01:31

0

This is simple and helped me

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

answered Nov 29 '17 at 01:31

KimboSlice

37
8

score 0 · Answer 11 · answered Jan 14 '19 at 13:40

For IE you can use .justify-content-between helper class form bootstrap for the parent element. In this case for the .modal-footer.

For Example:

<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>

score 0 · Answer 12 · answered Feb 18 '23 at 15:17

if you want to position two buttons on the left, and one button on the right, you can use this code:

<!-- Modal footer -->
  <div class="modal-footer">
  
  <div class="mr-auto" style="float: left;">
     <button type="button" class="btn btn-primary" >First</button>
    <button type="button" class="btn btn-primary" >Second</button>
    
    </div>
    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
    
  </div>

<!DOCTYPE html>
<html>
<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/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>
<!-- Modal footer -->
      <div class="modal-footer">
      
      <div class="mr-auto" style="float: left;">
         <button type="button" class="btn btn-primary" > Add to new note</button>
        <button type="button" class="btn btn-primary" >Add to existing note</button>
        
        </div>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        
      </div>
      
</body>
</html>

Left & right align modal footer buttons in Bootstrap 4

12 Answers12

Linked