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 ms-auto to it.
• If there are 1 or more cautionary buttons, such as a .btn-warning or btn-danger, then add the class ms-md-auto to the first one in the source.
• Consider buttons’ action hierarchy when assigning button styles.

Usage

<div class="btn-container">
  <div>
    <div class="row">
      <div class="col-12">
        <button type="button" class="btn btn-primary">
          <span class="icon fas fa-check me-1" aria-hidden="true"></span>Primary Action
        </button>
        <button type="button" class="btn btn-secondary">
          <span class="icon fas fa-arrow-right me-1" aria-hidden="true"></span>Secondary 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 ms-auto">
          <span class="icon fas fa-exclamation-circle me-1" aria-hidden="true"></span>Warning
        </button>
        <button type="button" class="btn btn-danger">
          <span class="icon fas fa-trash-alt me-1" aria-hidden="true"></span>Danger
        </button>
      </div>
    </div>
  </div>	
</div>

Resources

• Bootstrap Documentation - Buttons