Skip to content
Learn Netverks

Lesson

Step 12/36 33% through track

buttons

Buttons and button groups

Last reviewed Jun 1, 2026 Content v20260601
Track mode
iframe_html
Means
HTML preview sandbox
Reading
~1 min
Level
beginner

This lesson

This lesson teaches Buttons and button groups—the ideas, syntax, and habits you need before moving on in Bootstrap.

Bootstrap patterns appear constantly in legacy apps and rapid admin UI work.

You will apply Buttons and button groups in contexts like: Internal tools, WordPress themes, Laravel apps, and teams that want opinionated UI without writing every rule from scratch.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Buttons and button groups in your own words.

Buttons start with the .btn base class plus a variant: btn-primary, btn-outline-secondary, btn-link. Size with btn-sm or btn-lg; group related actions with btn-group.

Semantics matter

Use <button type="button"> for actions and <a class="btn"> for navigation. Disabled state: disabled attribute or .disabled class on links. Review accessible labels in HTML forms when buttons submit data.

Compared to Tailwind

Tailwind builds buttons from utilities (rounded-lg bg-blue-600 px-4 py-2). Bootstrap encodes hover, focus, and contrast in component classes—faster to prototype, less pixel-pushing per state.

Important interview questions and answers

  1. Q: btn vs btn-outline-primary?
    A: Solid fills use btn-*; outline variants keep transparent backgrounds with colored borders—better on busy backgrounds.
  2. Q: When use btn-group?
    A: Segmented controls, pagination-style toolbars, or mutually adjacent actions that should share borders.

Self-check

  1. What two classes create a small primary button?
  2. Why prefer button over div for clickable actions?

Interview tip Lesson completion confidence

Can you explain this lesson in 30 seconds without reading notes?

Not saved yet.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Check yourself

Multiple choice — immediate feedback.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

  • btn vs btn-outline—when each?
  • How do you keep focus visible on buttons?

Sign up or log in to post comments and sync lesson progress across devices.

No discussion yet. Be the first to ask a question.

Jump

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36