html - Stop button from moving to line below

Question

I'm adding buttons to a site and one of the buttons is moving to the line below, how can i correct this? id like the buttons to be aligned with the sides of the card above but remain on the same line.

this is how the buttons currently display

this is my code:

<div class="container">
    <div class="row">
        <div class="col-sm-10 mx-auto">
            <div class="col-sm-2">
                <button class="btn-dark" (click) ="previousPage()">
                    Previous
                </button>
            </div>
            <div class="col-sm-12 text-right">
                <button class="btn-dark" (click) ="nextPage()">
                    Next
                </button>
            </div>
        </div>
    </div>
</div>

Answer 1

Your second set of columns need to be a child of a row div, and should not total more than 12 (yours total 14). So make it like this:

<div class="container">
  <div class="row">
    <div class="col-sm-10 mx-auto">
      <div class="row">
        <div class="col-sm-2">
          <button class="btn-dark" (click)="previousPage()">Previous</button>
        </div>
        <div class="col-sm-10 text-right">
          <button class="btn-dark" (click)="nextPage()">Next</button>
        </div>
      </div>
    </div>
  </div>
</div>

Codeply example