Buttons

Buttons

<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-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<button type="button" class="btn btn-primary btn-icon"><i class="material-icons">check</i></button>

Outline Buttons

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

Buttons Sizes



<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary">Regular button</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<br/>
<br/>
<button type="button" class="btn btn-primary w-100">Block level button</button>

Buttons States

<button type="button" class="btn btn-primary active">Active button</button>
<button type="button" class="btn btn-primary disabled">Disabled button</button>

Disabled button

<button type="button" class="btn btn-primary disabled">Primary</button>
<button type="button" class="btn btn-secondary disabled">Secondary</button>
<button type="button" class="btn btn-success disabled">Success</button>
<button type="button" class="btn btn-danger disabled">Danger</button>
<button type="button" class="btn btn-warning disabled">Warning</button>
<button type="button" class="btn btn-info disabled">Info</button>
<button type="button" class="btn btn-light disabled">Light</button>
<button type="button" class="btn btn-dark disabled">Dark</button>
<button type="button" class="btn btn-link disabled">Link</button>
<button type="button" class="btn btn-primary btn-icon disabled"><i class="material-icons">check</i></button>