Previous & Next Page Buttons

Best Practices

• Place at the bottom, but above the footer, of each page in the process.
• Be sure to customize the value in the aria-label="..." for each project.
• 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" role="region" aria-label="Move Along This Process">
  <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">
          <span class="icon fas fa-arrow-left fa-xs me-1" aria-hidden="true"></span>Previous
        </a>
      </div>
      <div class="col-6 col-md-3 text-end">
        <a href="#" class="btn btn-primary btn-lg">
          Next
          <span class="icon fas fa-arrow-right fa-xs ms-1" aria-hidden="true"></span>
        </a>
      </div>
    </div>
  </div>
</div>

Resources

• Bootstrap Documentation - Buttons