- Base class
.btnplus a style:.btn-primary,.btn-outline-danger,.btn-link - Sizes:
.btn-lg,.btn-sm - Full width: wrap in
.d-grid - States:
disabledattribute,.active .btn-groupjoins buttons together
Bootstrap Buttons
Styles, sizes, outlines and groups.
✍️ 3 exercises + code challenge in this lessonKey Takeaways: Bootstrap Buttons
Mastering Bootstrap Buttons helps you write clean and reliable Bootstrap code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
Bootstrap Buttons Code Example
Bootstrap<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container py-3">
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-outline-danger">Outline</button>
<button class="btn btn-link">Link</button>
<hr>
<button class="btn btn-dark btn-lg">Large</button>
<button class="btn btn-secondary btn-sm">Small</button>
<button class="btn btn-primary" disabled>Disabled</button>
<hr>
<div class="btn-group">
<button class="btn btn-outline-primary active">Day</button>
<button class="btn btn-outline-primary">Week</button>
<button class="btn btn-outline-primary">Month</button>
</div>
<div class="d-grid mt-3"><button class="btn btn-warning">Full width</button></div>
</div>
Free sign-in required · Google login available
Bootstrap Buttons Practice Exercises
Check what you learned in “Bootstrap Buttons”.
/ 3 solved
Fill in the blank
Make a large outline button.
<button class="btn btn-outline-primary ">Big</button>
✓ Correct!
Not quite. Try again.
Multiple choice
Which class groups buttons together?
✓ Correct!
Not quite. Try again.
Code challenge
Create a small (btn-sm) danger button with the text "Delete".
Write the code in the live editor. Your answer is checked automatically.
✓ Solved
Free sign-in required · Google login available
to save your exercise progress.
Finished this lesson?
Mark it complete to track your progress.
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services