Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Button Types in Bootstrap 5
Button Types: Bootstrap supports various button types including standard, outline, link, and more.
Standard Buttons
Standard buttons are the default button style with solid backgrounds.
Standard Button Examples
<!-- Standard 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>Outline Buttons
Outline buttons have transparent backgrounds with colored borders.
Outline Button Examples
<!-- 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>Link Buttons
Link buttons appear as hyperlinks but behave like buttons.
Link Button Examples
<!-- Link Buttons -->
<button type="button" class="btn btn-link">Default Link</button>
<button type="button" class="btn btn-link text-primary">Primary Link</button>
<button type="button" class="btn btn-link text-danger">Danger Link</button>Button Tags
Buttons can be created using different HTML tags.
Different Button Tags
<!-- Different Button Tags -->
<button class="btn btn-primary">Button Tag</button>
<a class="btn btn-primary" href="#">Anchor Tag</a>
<input class="btn btn-primary" type="button" value="Input Tag">
<input class="btn btn-primary" type="submit" value="Submit Input">
<input class="btn btn-primary" type="reset" value="Reset Input">Comparison Table
| Button Type | CSS Class | Best Use Case | Accessibility |
|---|---|---|---|
| Standard Button | .btn .btn-[color] | Primary actions, form submissions | Excellent (high contrast) |
| Outline Button | .btn .btn-outline-[color] | Secondary actions, less emphasis | Good (depends on border color) |
| Link Button | .btn .btn-link | Cancel actions, navigation | Ensure proper color contrast |
