Theory
One vocabulary, many components
FestConnect needs three things to look right: the schedule as a clean striped table, a red 'seats filling fast' warning box, and form inputs that match the rest of the site. Three different components.
Here is the good news: Bootstrap does not make you learn three unrelated styling systems. It uses one pattern everywhere, a base class plus a modifier, and one colour vocabulary shared across all of them. Learn the pattern once and these four families fall out of it.
Formula
The pattern: base + modifier + colour word
Almost every Bootstrap component reads the same way:
base-class + modifier + a contextual colour word.
alert alert-danger= a message box, styled red for danger.table table-striped= a table with zebra rows.btn btn-success= a button, styled green for success.
The colour words are fixed: primary (blue), secondary (grey), success (green), danger (red), warning (yellow), info (cyan). They mean the same everywhere.
At a glance
The four families and their classes
| Family | Base | Common modifiers |
|---|---|---|
| Tables | table | table-striped, table-bordered, table-hover |
| Alerts | alert | alert-success, alert-danger, alert-warning |
| Inputs | form-control | form-select, form-label, form-check |
| Colours | text- / bg- | text-danger, bg-primary, bg-success |
Practical
FestConnect, three components
<!-- 1. striped schedule table -->
<table class="table table-striped">
<tr><th>Event</th><th>Time</th></tr>
<tr><td>Robotics</td><td>10:00</td></tr>
</table>
<!-- 2. a warning alert -->
<div class="alert alert-warning">Only 12 seats left!</div>
<!-- 3. a Bootstrap-styled input -->
<label class="form-label">Email</label>
<input type="email" class="form-control">
<!-- same colour words as utilities -->
<p class="text-danger">Registration closes tonight.</p>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
Read the classes
Without running it, describe what <div class="alert alert-success"> looks like, and what <button class="btn btn-danger"> looks like. Use the pattern, not memory of these exact classes.
Show the answer
alert alert-success is a message box (alert) coloured green (success), so a green 'it worked' banner, like 'You are registered'. btn btn-danger is a button (btn) coloured red (danger), the classic red 'Cancel' or 'Delete' button. You did not need to memorise either: base class says the component, the colour word says the colour, and the words are the same fixed set across the whole framework.
Quiz
You add class="form-control" to nothing, and your inputs still look like plain grey browser boxes instead of the Bootstrap style. Why?
- form-control was not applied: inputs need that base class to get Bootstrap styling
- Bootstrap styles all inputs automatically without any class
- You must use form-danger to see any input styling
- Inputs cannot be styled by Bootstrap, only buttons can
Show the answer
form-control was not applied: inputs need that base class to get Bootstrap styling
Bootstrap styles inputs only when you add the base class form-control (A); it does not auto-style bare <input> tags (B). There is no form-danger class (C); validation states use classes like is-invalid. Inputs are very much styleable (D is false). This is the base-class rule: no base class, no Bootstrap look.
Watch out
Family traps
1. Modifier without base: table-striped alone does nothing; you need table table-striped. Same for btn-primary needing btn, and alert-danger needing alert.
2. Inventing colour words: it is danger for red and warning for yellow, not red/error. alert-error is not a Bootstrap class.
3. Forgetting form-control on selects/textareas: a <select> uses form-select, but a <textarea> uses form-control like a text input.
Theory
Buttons are next, same rules
The very next lesson is buttons and button groups, which follow this identical base + modifier + colour pattern (btn btn-primary, btn btn-outline-danger). Once the FestConnect table, alert, and form are styled, the Register and Clear buttons finish the look, using vocabulary you already know from this lesson.
Summary
Key takeaways
- Bootstrap styling = base class + modifier class + a shared contextual colour word.
- Colour words are fixed: primary (blue), secondary (grey), success (green), danger (red), warning (yellow), info (cyan).
- Tables: table + table-striped/bordered/hover. Alerts: alert + alert-danger etc.
- Inputs: form-control (text/textarea), form-select (dropdown), form-label (label).
- A modifier needs its base class; text- and bg- apply the same palette to anything.
- Memory hook: learn the pattern once, read every class.