Bootstrap 5·Bootstrap from grid to dashboard

Buttons and badges

Choose button variants, sizes and states without breaking semantics.

Beginner 10 min read Lesson 5 of 300 Challenge included

What you will be able to do

Use btn and a variant such as btn-primary.
Use outline variants for secondary actions.
Use disabled plus aria-disabled for unavailable actions.
Use badge for short status labels.

In plain English

A button is for actions and a link is for navigation. Bootstrap can style both, but choosing the right element keeps keyboard behaviour and screen-reader announcements correct. Use btn-outline-* for secondary actions and btn-sm sparingly.

buttons.htmlHTML

<button class="btn btn-primary" type="button">Save</button>
<button class="btn btn-outline-secondary" type="button">Cancel</button>
<button class="btn btn-primary" type="button" disabled>Unavailable</button>
<span class="badge text-bg-success">Published</span>

Your turn

Build a button group

Easy

Create two outline buttons side by side inside a btn-group.

HTML · starter

<div class="btn-group">

Check your understanding before moving on.

Knowledge checkQuestion 1

Which element should navigate to another page?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Cards and images

Lesson 5 of 300 · 0% of course