Buttons
Custom button styles for actions in forms, dialogs, etc.
Solid (default)
<!-- Primary solid button -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Secondary solid button -->
<button type="button" class="btn btn-secondary">Secondary</button>
<!-- Success solid button -->
<button type="button" class="btn btn-success">Success</button>
<!-- Danger solid button -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Warning solid button -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Info solid button -->
<button type="button" class="btn btn-info">Info</button>
<!-- Light solid button -->
<button type="button" class="btn btn-light">Info</button>
<!-- Dark solid button -->
<button type="button" class="btn btn-dark">Dark</button>
<!-- Gradient solid button -->
<button type="button" class="btn btn-gradient">Gradient</button>
<!-- Link button -->
<button type="button" class="btn btn-link">Link</button>
// Primary solid button
button(type="button").btn.btn-primary
| Primary
// Secondary solid button
button(type="button").btn.btn-secondary
| Secondary
// Success solid button
button(type="button").btn.btn-success
| Success
// Danger solid button
button(type="button").btn.btn-danger
| Danger
// Warning solid button
button(type="button").btn.btn-warning
| Warning
// Info solid button
button(type="button").btn.btn-info
| Info
// Light solid button
button(type="button").btn.btn-light
| Light
// Dark solid button
button(type="button").btn.btn-dark
| Dark
// Gradient solid button
button(type="button").btn.btn-gradient
| Gradient
// Link button
button(type="button").btn.btn-link
| Link
Outline
<!-- Primary outline button -->
<button type="button" class="btn btn-outline-primary">Primary</button>
<!-- Secondary outline button -->
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<!-- Success outline button -->
<button type="button" class="btn btn-outline-success">Success</button>
<!-- Danger outline button -->
<button type="button" class="btn btn-outline-danger">Danger</button>
<!-- Warning outline button -->
<button type="button" class="btn btn-outline-warning">Warning</button>
<!-- Info outline button -->
<button type="button" class="btn btn-outline-info">Info</button>
<!-- Light outline button -->
<button type="button" class="btn btn-outline-light">Info</button>
<!-- Dark outline button -->
<button type="button" class="btn btn-outline-dark">Dark</button>
// Primary outline button
button(type="button").btn.btn-outline-primary
| Primary
// Secondary outline button
button(type="button").btn.btn-outline-secondary
| Secondary
// Success outline button
button(type="button").btn.btn-outline-success
| Success
// Danger outline button
button(type="button").btn.btn-outline-danger
| Danger
// Warning outline button
button(type="button").btn.btn-outline-warning
| Warning
// Info outline button
button(type="button").btn.btn-outline-info
| Info
// Light outline button
button(type="button").btn.btn-outline-light
| Light
// Dark outline button
button(type="button").btn.btn-outline-dark
| Dark
Translucent
<!-- Primary translucent button -->
<button type="button" class="btn btn-translucent-primary">Primary</button>
<!-- Success translucent button -->
<button type="button" class="btn btn-translucent-success">Success</button>
<!-- Danger translucent button -->
<button type="button" class="btn btn-translucent-danger">Danger</button>
<!-- Warning translucent button -->
<button type="button" class="btn btn-translucent-warning">Warning</button>
<!-- Info translucent button -->
<button type="button" class="btn btn-translucent-info">Info</button>
<!-- Light translucent button -->
<button type="button" class="btn btn-translucent-light">Info</button>
<!-- Dark translucent button -->
<button type="button" class="btn btn-translucent-dark">Dark</button>
// Primary translucent button
button(type="button").btn.btn-translucent-primary
| Primary
// Success translucent button
button(type="button").btn.btn-translucent-success
| Success
// Danger translucent button
button(type="button").btn.btn-translucent-danger
| Danger
// Warning translucent button
button(type="button").btn.btn-translucent-warning
| Warning
// Info translucent button
button(type="button").btn.btn-translucent-info
| Info
// Light translucent button
button(type="button").btn.btn-translucent-light
| Light
// Dark translucent button
button(type="button").btn.btn-translucent-dark
| Dark
Icons
<!-- Primary button with text and icon -->
<button type="button" class="btn btn-primary">
<i class="fe-user mr-2"></i>
Profile
</button>
<!-- Secondary solid icon button -->
<button type="button" class="btn btn-secondary btn-icon">
<i class="fe-edit"></i>
</button>
<!-- Danger outline icon button -->
<button type="button" class="btn btn-outline-danger btn-icon">
<i class="fe-trash"></i>
</button>
<!-- Success solid icon button -->
<button type="button" class="btn btn-success btn-icon">
<i class="fe-check"></i>
</button>
<!-- Warning pill solid icon button -->
<button type="button" class="btn btn-warning btn-pill btn-icon">
<i class="fe-star"></i>
</button>
<!-- Info pill outline icon button -->
<button type="button" class="btn btn-outline-info btn-pill btn-icon">
<i class="fe-bookmark"></i>
</button>
// Primary button with text and icon
button(type="button").btn.btn-primary
i.fe-user.mr-2
| Profile
// Secondary solid icon button
button(type="button").btn.btn-secondary.btn-icon
i.fe-edit
// Danger outline icon button
button(type="button").btn.btn-outline-danger.btn-icon
i.fe-trash
// Success solid icon button
button(type="button").btn.btn-success.btn-icon
i.fe-check
// Warning pill solid icon button
button(type="button").btn.btn-warning.btn-pill.btn-icon
i.fe-star
// Info pill outline icon button
button(type="button").btn.btn-outline-info.btn-pill.btn-icon
i.fe-bookmark
Market buttons
Download on theApp StoreDownload on theGoogle PlayDownload on theWindows StoreOrder now atAmazon.com
<!-- App Store button -->
<a href="#" class="btn-market btn-apple" role="button">
<span class="btn-market-subtitle">Download on the</span>
<span class="btn-market-title">App Store</span>
</a>
<!-- Google Play button -->
<a href="#" class="btn-market btn-google" role="button">
<span class="btn-market-subtitle">Download on the</span>
<span class="btn-market-title">Google Play</span>
</a>
<!-- Windows store button -->
<a href="#" class="btn-market btn-windows" role="button">
<span class="btn-market-subtitle">Download on the</span>
<span class="btn-market-title">Windows Store</span>
</a>
<!-- Amazon button -->
<a href="#" class="btn-market btn-amazon" role="button">
<span class="btn-market-subtitle">Order now at</span>
<span class="btn-market-title">Amazon.com</span>
</a>
<!-- Outline variant example -->
<a href="#" class="btn-market btn-outline btn-google" role="button">
<span class="btn-market-subtitle">Download on the</span>
<span class="btn-market-title">Google Play</span>
</a>
// App Store button
a(href="#", role="button").btn-market.btn-apple
span.btn-market-subtitle Download on the
span.btn-market-title App Store
// Google Play button
a(href="#", role="button").btn-market.btn-google
span.btn-market-subtitle Download on the
span.btn-market-title Google Play
// Windows store button
a(href="#", role="button").btn-market.btn-windows
span.btn-market-subtitle Download on the
span.btn-market-title Windows Store
// Amazon button
a(href="#", role="button").btn-market.btn-amazon
span.btn-market-subtitle Order now at
span.btn-market-title Amazon.com
// Outline variant example
a(href="#", role="button").btn-market.btn-outline.btn-google
span.btn-market-subtitle Download on the
span.btn-market-title Google Play
Shapes
<!-- Rounded solid button -->
<button type="button" class="btn btn-primary">Rounded</button>
<!-- Pill solid button -->
<button type="button" class="btn btn-primary btn-pill">Pill button</button>
<!-- Square solid button -->
<button type="button" class="btn btn-primary btn-square">Square</button>
<!-- Rounded outline button -->
<button type="button" class="btn btn-outline-primary">Rounded</button>
<!-- Pill outline button -->
<button type="button" class="btn btn-outline-primary btn-pill">Pill button</button>
<!-- Square outline button -->
<button type="button" class="btn btn-outline-primary btn-square">Square</button>
// Rounded solid button
button(type="button").btn.btn-primary
| Rounded
// Pill solid button
button(type="button").btn.btn-primary.btn-pill
| Pill button
// Square solid button
button(type="button").btn.btn-primary.btn-square
| Square
// Rounded outline button
button(type="button").btn.btn-outline-primary
| Rounded
// Pill outline button
button(type="button").btn.btn-outline-primary.btn-pill
| Pill button
// Square outline button
button(type="button").btn.btn-outline-primary.btn-square
| Square
Sizes
<!-- Large solid button -->
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<!-- Normal solid button -->
<button type="button" class="btn btn-primary">Normal button</button>
<!-- Small solid button -->
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<!-- Large outline button -->
<button type="button" class="btn btn-outline-primary btn-lg">Large button</button>
<!-- Normal outline button -->
<button type="button" class="btn btn-outline-primary">Normal button</button>
<!-- Small outline button -->
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<!-- Block solid button -->
<button type="button" class="btn btn-primary btn-block">Block level button</button>
<!-- Block outline button -->
<button type="button" class="btn btn-outline-primary btn-block">Block level button</button>
// Large solid button
button(type="button").btn.btn-primary.btn-lg Large button
// Normal solid button
button(type="button").btn.btn-primary Normal button
// Small solid button
button(type="button").btn.btn-primary.btn-sm Small button
// Large outline button
button(type="button").btn.btn-outline-primary.btn-lg Large button
// Normal outline button
button(type="button").btn.btn-outline-primary Normal button
// Small outline button
button(type="button").btn.btn-outline-primary.btn-sm Small button
// Block solid button
button(type="button").btn.btn-primary.btn-block Block level button
// Block outline button
button(type="button").btn.btn-outline-primary.btn-block Block level button
States
<!-- Button states -->
<button type="button" class="btn btn-primary active">Active</button>
<button type="button" class="btn btn-secondary active">Active</button>
<button type="button" class="btn btn-primary" disabled>Disabled</button>
<button type="button" class="btn btn-secondary" disabled>Disabled</button>
<button type="button" class="btn btn-primary" data-toggle="button">Button toggle</button>
<button type="button" class="btn btn-primary">
<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>
Loading...
</button>
<button type="button" class="btn btn-secondary">
<span class="spinner-grow spinner-grow-sm mr-2" role="status" aria-hidden="true"></span>
Loading...
</button>
// Button states
button(type="button").btn.btn-primary.active Active
button(type="button").btn.btn-secondary.active Active
button(type="button", disabled).btn.btn-primary Disabled
button(type="button", disabled).btn.btn-secondary Disabled
button(type="button", data-toggle="button").btn.btn-primary Button toggle
button(type="button").btn.btn-primary
span(role="status", aria-hidden="true").spinner-border.spinner-border-sm.mr-2
| Loading...
button(type="button").btn.btn-secondary
span(role="status", aria-hidden="true").spinner-grow.spinner-grow-sm.mr-2
| Loading...