Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Outline Buttons in Bootstrap 5
Outline Buttons: Transparent buttons with colored borders, perfect for secondary actions.
What are Outline Buttons?
Outline buttons have transparent backgrounds with colored borders and text. They're less prominent than solid buttons, making them ideal for secondary actions.
Solid Button: High emphasis, primary actions
Outline Button: Medium emphasis, secondary actions
All Outline Button Colors
Outline Button Gallery
<!-- Outline Button Classes -->
<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-info">Info</button>
<button class="btn btn-outline-light">Light</button>
<button class="btn btn-outline-dark">Dark</button>When to Use Outline Buttons
✅
Secondary Actions
Use for less important actions like &qout;Cancel&qout; or &qout;Back&qout;
✅
Alternative Options
When you have multiple choices with one primary action
✅
Visual Hierarchy
Create visual distinction between primary and secondary buttons
Outline vs Solid Comparison
| Aspect | Solid Buttons | Outline Buttons |
|---|---|---|
| Visual Weight | Heavy, prominent | Light, subtle |
| Best For | Primary actions, CTAs | Secondary actions, alternatives |
| Accessibility | Excellent contrast | Good (depends on border) |
| Backgrounds | Works on most backgrounds | Best on light backgrounds |
| Hover State | Gets slightly darker | Fills with background color |
Outline Buttons with Icons
Outline Buttons with Icons
<!-- Outline Buttons with Bootstrap Icons -->
<button class="btn btn-outline-primary">
<i class="bi bi-download me-2"></i>
Download
</button>
<button class="btn btn-outline-success">
<i class="bi bi-check-circle me-2"></i>
Approve
</button>
<button class="btn btn-outline-danger">
<i class="bi bi-trash me-2"></i>
Delete
</button>Customizing Outline Buttons
Custom Outline Styles
<!-- Custom Outline Styles with CSS -->
<style>
.custom-outline {
--bs-btn-border-width: 3px;
--bs-btn-border-radius: 20px;
--bs-btn-hover-border-color: #ff6b6b;
}
.dashed-outline {
border-style: dashed !important;
}
</style>
<button class="btn btn-outline-primary custom-outline">
Thick Border
</button>
<button class="btn btn-outline-success dashed-outline">
Dashed Border
</button>
<!-- Inline style -->
<button class="btn btn-outline-warning" style="border-radius: 50px">
Rounded
</button>