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

Resources

• Bootstrap Documentation - Buttons