Buttons
Button Shapes
<> show code
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-rounded">Rounded</button>
<button type="button" class="btn btn-primary btn-pill">Pill Button</button>
Example:
Button Types
<> show code
<!-- Fill Button -->
<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-warning">warning</button>
<button type="button" class="btn btn-danger">danger</button>
<!-- Outline Button -->
<button type="button" class="btn btn-outline-primary mb-2 mr-3">primary</button>
<button type="button" class="btn btn-outline-secondary mb-2 mr-3">secondary</button>
Example: Fill Button
Example: Outlined Button
Buttons Sizes
<> show code
<!-- Large Button -->
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-outline-primary btn-lg btn-rounded">Large</button>
<button type="button" class="btn btn-primary btn-lg btn-pill">Large</button>
<!-- Default Button -->
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-outline-primary btn-rounded">Default</button>
<button type="button" class="btn btn-primary btn-pill">Default</button>
<!-- Small Button -->
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-outline-primary btn-sm btn-rounded">Small</button>
<button type="button" class="btn btn-primary btn-sm btn-pill">Small
Example: btn-lg
Example: Default
Example: btn-sm
Social buttons
<> show code
<!-- Large Button -->
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-outline-primary btn-lg btn-rounded">Large</button>
<button type="button" class="btn btn-primary btn-lg btn-pill">Large</button>
<!-- Default Button -->
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-outline-primary btn-rounded">Default</button>
<button type="button" class="btn btn-primary btn-pill">Default</button>
<!-- Small Button -->
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-outline-primary btn-sm btn-rounded">Small</button>
<button type="button" class="btn btn-primary btn-sm btn-pill">Small