Previous & Next Page Buttons

Best Practices

• Place at the bottom, but above the footer, of each page in the process.
• Buttons should be side by side at small sizes, when the button labels are short.
• Buttons can be centered at small sizes when the buttons labels are too long for side by side arrangement.
• When button labels are long enough to require centering, ensure that Previous button is atop the Next button.
• To assign equal emphasis to Previous and Next, change btn-outline-ui on the Previous button to btn-primary.
• Consider the guidance in Buttons.

Usage

<div class="btns-previous-next">
  <hr class="major">
  <div class="container-fluid">
    <div class="row justify-content-between">
      <div class="col-6 col-md-3">
        <a href="#" class="btn btn-outline-ui btn-lg btn-block" role="button" id="btnPrev">
          <span class="fas fa-arrow-left fa-xs mr-1" aria-hidden="true"></span><span class="sr-only">Go to </span>Previous<span class="sr-only"> screen</span>
        </a>
      </div>
      <div class="col-6 col-md-3 text-right">
        <a href="#" class="btn btn-primary btn-lg btn-block" role="button" id="btnNext">
          <span class="sr-only">Go to </span>Next<span class="sr-only"> screen</span><span class="fas fa-arrow-right fa-xs ml-1" aria-hidden="true"></span>
        </a>
      </div>
    </div>
  </div>
</div>

Resources

• Bootstrap Documentation - Buttons