Button styles
Buttons come in solid and outline styles for every theme colour.
In this page:
Syntax
<button class="btn btn-primary">text</button>
<button class="btn btn-outline-danger">text</button>Button styles
Add .btn plus a variant such as .btn-primary, .btn-outline-danger or .btn-link. Use button, a or input elements; for links acting as buttons add role="button". Disabled state uses the disabled attribute on buttons and the .disabled class on links.
Note:
Use button elements for actions and a elements for navigation.
Example: Button styles
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container d-flex flex-wrap gap-2">
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-outline-danger">Outline danger</button>
<button class="btn btn-link">Link style</button>
<button class="btn btn-primary" disabled>Disabled</button>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Forgetting the base .btn class
- Using a links for actions
- Relying only on colour to convey meaning
Chapter Summary
- .btn plus a variant class
- Outline variants exist
- Disabled via attribute or class
- Use button for actions
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: