How to align button left and right in the same line?

Question

I want to display my previous button and next button sit on the same line, how do I fix it ? My button currently sit like this

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="col-md-12 text-left">
  <button type="button" id="pre_button" class="btn btn-md btn-primary ml-2 button-icon rounded-small" data-toggle="tooltip" data-placement="top" title="previous">Previous</button>
</div>

<div class="col-md-12 text-right">
  <button type="button" id="next_button" class="btn btn-md btn-primary ml-2 button-icon rounded-small" data-toggle="tooltip" data-placement="top" title="Next">Next</button>
</div>

adds a new line...so try to put them in one
with some spacing — thirdeye, Aug 28 '21 at 15:45
Use the correct [bootstrap directives](https://stackoverflow.com/questions/18672452/left-align-and-right-align-within-div-in-bootstrap) — mplungjan, Aug 28 '21 at 15:48

score 3 · Accepted Answer · answered Aug 28 '21 at 15:44

Use float css rule

.f-l {
    float: left;
}
    
.f-r {
    float: right;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12 text-left f-l">
   <button type="button" id="pre_button" class="btn btn-md btn-primary ml-2 button-icon rounded-small" data-toggle="tooltip" data-placement="top" title="previous" >Previous</button>
</div>
                                                                    
<div class="col-md-12 text-right f-r">
    <button type="button" id="next_button" class="btn btn-md btn-primary ml-2 button-icon rounded-small" data-toggle="tooltip" data-placement="top" title="Next" >Next</button>
</div>

https://stackoverflow.com/questions/18672452/left-align-and-right-align-within-div-in-bootstrap — mplungjan, Aug 28 '21 at 15:51

How to align button left and right in the same line?

1 Answers1