Buttons

Default Buttons

                    
  <div class="button-group">
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-secondary">Secondary</button>
      <button type="button" class="btn btn-success">Success</button>
      <button type="button" class="btn btn-info">Info</button>
      <button type="button" class="btn btn-warning">Warning</button>
      <button type="button" class="btn btn-danger">Danger</button>
      <button type="button" class="btn btn-light">Light</button>
      <button type="button" class="btn btn-dark">Dark</button>
  </div>
                    
                  

Light Buttons

                    
  <div class="button-group">
    <button type="button" class="btn bg-primary-subtle text-primary">Primary</button>
    <button type="button" class="btn bg-secondary-subtle text-secondary">Secondary</button>
    <button type="button" class="btn bg-success-subtle text-success">Success</button>
    <button type="button" class="btn bg-info-subtle text-info">Info</button>
    <button type="button" class="btn bg-warning-subtle text-warning">Warning</button>
    <button type="button" class="btn bg-danger-subtle text-danger">Danger</button>
  </div>
                      
                    

Rounded Light Buttons

                    
  <div class="button-group">
    <button type="button" class="btn rounded-pill bg-primary-subtle text-primary">Primary</button>
    <button type="button" class="btn rounded-pill bg-secondary-subtle text-secondary">Secondary</button>
    <button type="button" class="btn rounded-pill bg-success-subtle text-success">Success</button>
    <button type="button" class="btn rounded-pill bg-info-subtle text-info">Info</button>
    <button type="button" class="btn rounded-pill bg-warning-subtle text-warning">Warning</button>
    <button type="button" class="btn rounded-pill bg-danger-subtle text-danger">Danger</button>
  </div>