how to add button next to a text in a modal header using bootstrap

Question

I have this modal header and wish to add the \"download\" button to the right of the text \"Optimize data\". Here is my code for the same but everytime it aligns to the below of

Answer 1

The modal-header in Bootstrap 4 is display:flex. Use ml-auto to push the button to the right...

<div class="modal-header">
      <h3>Title</h3>
      <div class="ml-auto">
          <button type="button" class="btn btn-info" id="downloadLog" translate>Download Log</button>
      </div>
</div>

https://www.codeply.com/go/qPMA41arJV

Answer 2

bootstrap it self has class "input-group"

You can use that as below.

<div class="input-group">
   <span>
     <a href="#" />
   </span>
</div>

Answer 3

<h3> is an element that use the entire line so you should add an row, and two columns and then you will can do that

 <div class="row">
   <div class="col-8">
    <h3>Text</h3>
   </div>
   <div class="col-4">
    <button>Button here</button>
   </div>
 </div>