Float button right in modal header next to close button

Question

I have a modal and wanted to add some details and buttons in the header. I have a title and close button. I also want to add another button to the left of the close button. The button keeps floating left even though I have a float-right set up.

My Code:

<div class="modal-header">
                      <h5 class="modal-title"></h5>
                      <div class="float-right">
                        <a id='modal_csv'><i class="fas fa-camera"></i></a>
                      </div>

                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>

My output:

How do I float the

<div class="float-right">
   <a id='modal_csv'><i class="fas fa-camera"></i></a>
</div>

to the right next to the close button. What am I doing wrong?

Answer 1

I think this is the layout is as you wanted...

I believe you wanted to use pull-right

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="modal-header">
    <h5 class="modal-title pull-left">Title</h5>

    <div class="pull-right">
        <a id='modal_csv'><i class="fas fa-camera"></i></a>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div> 
</div>