Previous & Forward Buttons

Best Practices

• Often used on conjunction with Progress Indicators.
• Use when users must complete a sequential process.
• 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 Back button is atop the Forward button.

Usage

<div class="btns-previous-forward">
  <hr class="major">
  <div class="container-fluid">
    <div class="row justify-content-between">
      <div class="col-6 col-md-3 col-lg-2">
        <a href="#" class="btn btn-outline-ui btn-lg btn-block" role="button" id="btnPrev">
          <span class="fas fa-arrow-left fa-xs" 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 col-lg-2 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" aria-hidden="true"></span>
        </a>
      </div>
    </div>
  </div>
</div>

Resources

• Bootstrap Documentation - Buttons