Buttons
4 min read Quiz at the end
Create solid, outline, sized, grouped, and full-width buttons with Bootstrap btn classes.
Buttons
<!-- Solid buttons -->
<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-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>
<!-- Outline buttons -->
<button class="btn btn-outline-primary">Outline</button>
<!-- Sizes -->
<button class="btn btn-lg btn-primary">Large</button>
<button class="btn btn-sm btn-primary">Small</button>
<!-- Full width -->
<button class="btn btn-primary w-100">Full width</button>
<!-- Disabled -->
<button class="btn btn-primary" disabled>Disabled</button>
<!-- Button group -->
<div class="btn-group">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Middle</button>
<button class="btn btn-primary">Right</button>
</div>
Topic Quiz · 3 questions
Test your understanding before moving on
1. Which class applies Bootstrap primary button style?
💡 Both the base btn and modifier btn-primary classes are needed.
2. What class makes a button full-width?
💡 w-100 (width:100%) makes any element full width.
3. How do you create a button group?
💡 Wrap buttons in div.btn-group to create a button group.