Previous & Next Section Buttons

Previous & Next Section buttons allow users to navigate related form fields.

Edit on GitHub
On this page:

Best Practices

  • Previous & Next Section buttons are used when user is asked to fill in a long page of form fields
  • Group related fields into fieldsets and use Previous & Next Section buttons to navigate to the nearest form field

Usage

Previous Section Next Section 
<div class="row">
  <div class="col-12 col-md-6">
    <a href="#" class="btn btn-link btn-prev-next-section" role="button">
      <span class="fas fa-arrow-circle-up" aria-hidden="true"></span> Previous
      <span class="d-none d-md-inline">Section</span>
    </a>
    <a href="#" class="btn btn-link btn-prev-next-section" role="button">Next
      <span class="d-none d-md-inline">Section</span>
      <span class="fas fa-arrow-circle-down" aria-hidden="true"></span>
    </a>
  </div>
</div>

Resources

Previous
Next