Buttons and Button Groups

📖 Theory

A button that looks like plain text

You style FestConnect's Register button with class="btn-primary" and it comes out as flat blue text, no shape, no padding. Meanwhile you want the event filter (All, Robotics, Dance) to look like one connected toolbar, not three stray buttons with gaps.

Both are quick fixes once you know the rule: a Bootstrap button needs two classes working together, and grouping is a single wrapper away.

✏️ Formula

btn is the shape, btn-* is the colour

Every Bootstrap button is two classes:

• `btn` gives the button shape: padding, rounded corners, the pointer cursor.
• `btn-primary` (or another variant) gives the colour and fill.

Neither works alone. btn by itself is a shaped but colourless button; btn-primary by itself is coloured text with no button shape. You almost always want class="btn btn-primary", both together.

📖 Theory

Variants, sizes, and groups

• Solid: btn-primary, btn-success, btn-danger, ... filled with the contextual colour.
• Outline: btn-outline-primary, ... transparent with a coloured border, for secondary actions.
• Size: add btn-lg or btn-sm.
• Disabled: the disabled attribute (or .disabled on links).
• Group: wrap buttons in <div class="btn-group"> and they join edge to edge as one segmented toolbar, ideal for filters.

⌨️ Practical

FestConnect buttons and a filter group

<!-- primary action + secondary (outline) action -->
<button class="btn btn-primary">Register</button>
<button class="btn btn-outline-secondary">Clear</button>

<!-- large call to action -->
<button class="btn btn-success btn-lg">Pay Fee</button>

<!-- a joined filter toolbar -->
<div class="btn-group" role="group">
  <button class="btn btn-outline-primary">All</button>
  <button class="btn btn-outline-primary">Robotics</button>
  <button class="btn btn-outline-primary">Dance</button>
</div>

This example runs in Gri-Learn on the web, where you can edit it and see the output.

💭 Think first

Primary or outline?

A FestConnect card has two buttons: 'Register' (the main thing you want people to do) and 'Cancel'. Which button variant suits each, and why does using outline for one help the design?

🧩 Quiz

A student writes `<button class="btn-danger">Delete</button>` and it renders as red text with no button shape or padding. What is missing?

1. The base class btn: it should be class="btn btn-danger"
2. The disabled attribute
3. A <div class="btn-group"> wrapper
4. Nothing: btn-danger alone is the complete button

⚠️ Watch out

Button traps

1. Only the variant class: btn-primary without btn gives coloured text, not a button. Always pair them.

2. Wrong colour word: it is btn-danger, not btn-red or btn-error.

3. Buttons with gaps where you wanted a toolbar: you forgot the .btn-group wrapper. And note a btn-group joins them; it does not by itself make only one selectable (that behaviour needs radios or JavaScript).

📖 Theory

The onclick you met earlier is still here

These are styled versions of the same <button> from Unit 1, so the type and onclick you learned still apply: <button type="button" class="btn btn-primary" onclick="register()">Register</button>. In Unit 5 that onclick will fire your JavaScript register() function. Bootstrap only dresses the button; the behaviour is still yours to wire.

✅ Summary

Key takeaways

• A Bootstrap button needs two classes: btn (shape) + a variant (colour), e.g. btn btn-primary.
• Solid variants (btn-success) fill with colour; outline variants (btn-outline-secondary) are quieter, for secondary actions.
• Sizes: btn-lg, btn-sm. Disable with the disabled attribute.
• Wrap buttons in <div class="btn-group"> to join them into one toolbar (e.g. a filter).
• Use one strong solid button per view so the primary action stands out.
• Memory hook: btn is the shape, btn-* is the colour.