Tutorials Bootstrap 5 Tutorial
Buttons and Button Groups
Buttons and Button Groups: free step-by-step lesson with examples, common mistakes, and interview tips — part of Bootstrap 5 Tutorial on Toolliyo Academy.
On this page
Bootstrap 5 Tutorial · Lesson 23 of 100
Buttons and Button Groups
Setup & Utilities ✓ → Components & Forms → Theme & Integrate → Ship & Projects
Components & Forms · 2 — UI · ~6 min · Core Components
What is this?
Buttons use .btn plus a variant (.btn-primary, .btn-outline-*, sizes .btn-sm/.btn-lg). Groups wrap related actions.
Why should you care?
Consistent CTAs make BootVerse forms and toolbars readable.
See it live — copy this example
Examples include Bootstrap 5.3 CDN links. Paste into an HTML file or use Run Example to preview.
<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>BootVerse</title>
</head>
<body class="p-3">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-outline-secondary">Cancel</button>
<div class="btn-group ms-2" role="group">
<button type="button" class="btn btn-light">Day</button>
<button type="button" class="btn btn-light">Week</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- type="button" avoids accidental form submit.
- outline variants are quieter.
- Groups share borders.
Practice next
- Add disabled with disabled attribute.
- Try btn-sm on a toolbar.
- Use an for navigation.
- Add btn-success for a positive action.
- Wrap buttons in d-flex gap-2.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!