Web Developer Path · lesson 17 of 18

Navbars and cards

Make a site navigation bar and a neat content card, the two pieces on almost every website.

What you will learn

.navbar, .navbar-brand, .navbar-nav, .nav-link
.card, .card-body, .card-title, .card-text
what dropdowns and modals are and why they need JavaScript

Understand the idea

A navbar is the strip of navigation links at the top of a page. Build it with <nav class="navbar navbar-dark bg-dark">. Inside, put a .navbar-brand for the site name or logo, then a list with the class .navbar-nav whose links have the class .nav-link. Use a real <nav> element, not a <div>, so the page stays semantic. Add navbar-expand-md to show the links in a row on wide screens and collapse them into a button on narrow ones.

A card is a flexible content box for a product, article or profile. The outer element has the class .card. Inside, .card-body holds the padded content, with a .card-title heading, a .card-text paragraph and often a button or link. A card can also have a .card-header and .card-footer, and an image at the top with .card-img-top. Cards placed in grid columns make a responsive gallery.

Dropdown menus and modal dialogs are also framework components, but opening and closing them needs the framework's JavaScript. The markup is the part you write: a dropdown is a button plus a .dropdown-menu of .dropdown-item links, and a modal is a .modal containing .modal-dialog, .modal-content and its header, body and footer. In this lesson we practise the markup of the two components that work with CSS alone.

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

A navbar above a card

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">CodeClub</a>
  <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Lessons</a></li>
  </ul>
</nav>

<div class="card m-3">
  <div class="card-body">
    <h5 class="card-title">Web basics</h5>
    <p class="card-text">Learn HTML and CSS.</p>
    <a href="#" class="btn btn-primary">Start</a>
  </div>
</div>

The navbar uses the semantic nav element, and the card is built from card, card-body, card-title and card-text.

Your turn: code to type and practise

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.

Stretch challenge

Place three cards in a row using row and col-md-4.

← Colours, badges, alerts, buttons and borders Carousels and scrollspy →

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 →16

Colours, badges, alerts, buttons and borders

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`.

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 3D Shape Explorer

Rotate a cube, sphere and pyramid to explore faces, edges and vertices.

Play now

FAQ

Navbars and cards: common questions

What is a navbar?

A navigation bar: the strip of links at the top of a page, built from a nav element with the classes navbar, navbar-brand and nav-link.

What is a card component?

A bordered content box made of card, card-body, card-title and card-text, used for articles, products and profiles.

Why do dropdowns and modals need JavaScript?

Because they open and close in response to clicks, which CSS alone cannot do reliably. The framework's JavaScript handles that.

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