Button Container

Best Practices

• Insert Button Container after the other content, but before any footers.
• See Buttons for guidance on styling and writing buttons.
• If there is only 1 cautionary button, such as a .btn-warning or btn-danger, then add the class ml-auto to it.
• If there are 2 or more cautionary buttons, such as a .btn-warning or btn-danger, then add the class ml-auto to the first.
• Consider buttons’ action hierarchy when assigning button styles.
• Put Warning and Danger buttons to the right of the Button Bar by adding the class ml-md-auto added to the first of those buttons.

Usage

<div class="btn-container">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <button type="button" class="btn btn-primary">
          <span class="fas fa-check mr-1" aria-hidden="true"></span>Primary Action
        </button>
        <button type="button" class="btn btn-accent">
          <span class="fas fa-check mr-1" aria-hidden="true"></span>Next Action
        </button>
        <button type="button" class="btn btn-outline-ui">
          Third
        </button>
        <button type="button" class="btn btn-outline-ui">
          Third
        </button>
        <button type="button" class="btn btn-link">
          Last
        </button>
        <button type="button" class="btn btn-link">
          Last
        </button>
        <button type="button" class="btn btn-warning ml-auto">
          <span class="fas fa-exclamation-triangle mr-1" aria-hidden="true"></span>Warning
        </button>
        <button type="button" class="btn btn-danger">
          <span class="fas fa-trash-alt mr-1" aria-hidden="true"></span>Danger
        </button>
      </div>
    </div>
  </div>	
</div>

Resources

• Bootstrap Documentation - Buttons