Web Developer Path · lesson 16 of 18

Colours, badges, alerts, buttons and borders

Build the small pieces every website uses: coloured boxes, status badges, alerts, buttons in a group and bordered cards.

What you will learn

contextual colours: primary, secondary, success, danger, warning, info, light, dark
.badge, .alert, .btn and .btn-group
.border and .rounded

Understand the idea

Frameworks share eight contextual colour names, and each is a meaning, not just a shade: primary is the main brand colour, secondary is quieter, success is green for good news, danger is red for errors, warning is yellow, info is blue for notes, and light and dark are the neutrals. The same name is used everywhere: bg-success, text-danger, btn-primary, alert-warning, badge-info.

A badge is a small label for counts or status: <span class="badge badge-success">New</span>. An alert is a message box: <div class="alert alert-danger">Something went wrong</div>. A button is btn plus a colour: <button class="btn btn-primary">Save</button>. Make it btn-lg or btn-sm for size, or btn-outline-primary for an outline style. Buttons can be joined into a row inside <div class="btn-group">.

.border adds a thin border and .rounded rounds its corners, so <div class="border rounded p-3"> makes a simple bordered box, and border-primary colours the border. Choose colours by meaning so users learn what they signal.

The preview has a small built-in version of the framework with the same class names, and its screen-width steps are shrunk to fit the narrow preview (the real ones are 576, 768, 992 and 1200 pixels).

Example

Meaningful colours in action

<div class="alert alert-success">Saved! <span class="badge badge-success">OK</span></div>

<div class="btn-group">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Right</button>
</div>

<div class="border border-primary rounded p-3 mt-3">A bordered, rounded box.</div>

The group joins three buttons into one row with shared edges.

Your turn: code to type and practise

Build a div with the classes alert and alert-success, two span badges with the class badge, a button with btn and btn-primary, a btn-group holding three btn buttons, and a div that has both border and rounded.

Stretch challenge

Turn the primary button into an outline button and make it large.

← Containers and spacing utilities Navbars and cards →

HTML

Keep going in Web Developer Path

Responsive design and the 12-column grid

Inside a `div` with class `container`, build a `div` with class `row` that holds three `div` columns with class `col-md-4`, each containing an `h3` heading and a paragraph.

Start →14

Typography classes

Write an `h1` with the class `display-4`, a paragraph with the class `lead`, and a paragraph that uses `text-center`, `text-muted` and `text-uppercase` (the same element can carry several classes).

Start →15

Containers and spacing utilities

Make a `container-fluid` with the classes `bg-light` and `p-4`, and inside it a heading with `mb-3` and a paragraph with `mb-0`. Then add a second `div` with the classes `container` and `mt-3` that holds a box with the class `mx-auto`.

Start →17

Navbars and cards

Build a `nav` with the classes `navbar` and `bg-dark`, a `navbar-brand` link and a `navbar-nav` list with at least two `nav-link` links. Then build a `card` containing a `card-body` with a `card-title`, a `card-text` and a link styled as a `btn`.

Start →18

Carousels and scrollspy

Build a carousel with the id `slides`: an indicators list with three `li` items, a `carousel-inner` with three `carousel-item` slides (only the first is `active`), and a `carousel-caption` in the first slide. Then write `<body data-spy="scroll" data-target="#mynav">` as the start of a page with a `nav` whose id is `mynav`.

Start →

Practise the idea

⚖️ Play Balance Scales

Every scale is balanced. Compare the shapes to find how many balance the last pan.

Play now

FAQ

Colours, badges, alerts, buttons and borders: common questions

What are contextual colours?

A fixed set of colour names such as primary, success and danger that stand for meaning, used the same way across buttons, alerts, badges and backgrounds.

How do I make a button group?

Put several btn buttons inside a div with the class btn-group.

What is the difference between border and rounded?

border adds the line around the box, rounded rounds its corners. Use them together.

I am stuck. What can I do?

Press Hint for a nudge, read the message next to each goal, and compare your code with the lesson text. If you still need it, Show answer reveals a model solution. Try to type it yourself rather than copy it.

Does my work get saved?

Your ticks and XP are saved in this browser, and in your account if you log in. The code you type is not stored on a server.

Start a conversation

Enjoying coding? Meet a teacher.

Tell us the learner's age, country and what they would like to build, and we will suggest a class. A parent or guardian can make the enquiry.

Tell us the learner’s age or grade and goals
We’ll suggest a suitable class or learning path
We’ll confirm format, timing and fees with a parent or guardian

Play it, don't just read it

Write some code right now

Free games that need no sign-up. Pick one and play for five minutes.

All free games →

Pick a game

Today's maths challengeFive questions · the same for everyone today · keep your streak goingPlay