# Components

Build a page from Bootstrap's ready-made components (buttons, navbars, cards, tables, forms, alerts and carousels) by copying their HTML and changing the content.

Apprentice · CSS · HTML · Web Development · Updated November 3, 2026

## After this lesson you can

- Build a page from Bootstrap components such as a navbar, cards, tables and forms

## Key takeaways

- To use a component, copy its example from Bootstrap's documentation and change the content.
- `btn` makes a button and a second class such as `btn-primary` picks its color. A link with `btn` classes looks like a button too.
- A navbar's menu button and a carousel need Bootstrap's JavaScript to work.
- A card is a box for one item, such as a product; put cards in grid columns to make a row of them.
- In a form, `form-label`, `form-control` and `form-select` style labels, text boxes and drop-downs, and a label's `for` matches its field's `id`.

**Components** are Bootstrap's ready-made pieces of interface: buttons, menus, cards, forms. Each one is plain HTML with Bootstrap's classes on it. The usual way to use one is to find it in the documentation at [getbootstrap.com](https://getbootstrap.com/docs/5.3/components/), copy its example, and change the content.

## Buttons

```html
<button type="button" class="btn btn-primary">Buy Now</button>
<button type="button" class="btn btn-outline-secondary">Details</button>
<a href="books.html" class="btn btn-success btn-lg">Browse Books</a>
```

`btn` makes a button, and a second class picks its color from the theme: `btn-primary`, `btn-secondary`, `btn-success`, `btn-danger`, `btn-warning`, `btn-info`, `btn-light`, `btn-dark`. `btn-outline-*` gives an outlined version, and `btn-sm` and `btn-lg` change the size. A link with `btn` classes looks like a button too.

## Navbar

A **navbar** is the bar across the top of a site, with its name and its main links. On small screens it folds its links into a menu button, which needs Bootstrap's JavaScript:

```html
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
    <div class="container">
        <a class="navbar-brand" href="index.html">BookNook</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainMenu"
                aria-controls="mainMenu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="mainMenu">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link active" aria-current="page" href="index.html">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="books.html">Books</a></li>
                <li class="nav-item"><a class="nav-link" href="profile.html">Profile</a></li>
            </ul>
        </div>
    </div>
</nav>
```

- `navbar-expand-lg` shows the links in a row from the `lg` breakpoint up, and folds them into the menu button below it.
- `data-bs-toggle="collapse"` and `data-bs-target="#mainMenu"` tell Bootstrap's JavaScript which part the button opens and closes.
- `active` and `aria-current="page"` mark the current page.

## Cards

A **card** is a box for one item: a product, an article, a person.

```html
<div class="card" style="width: 18rem;">
    <img src="images/learning-csharp.svg" class="card-img-top" alt="The cover of Learning C# Step by Step">
    <div class="card-body">
        <h5 class="card-title">Learning C# Step by Step</h5>
        <p class="card-text">A friendly first book on C#, from variables to classes.</p>
        <a href="#" class="btn btn-primary">Buy Now: $29.99</a>
    </div>
</div>
```

Put cards in grid columns to make a row of products.

## Tables

Add `table` to a `<table>` for clean, readable rows. More classes add stripes, borders or hover highlights:

```html
<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>Title</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>Learning C# Step by Step</td><td>$29.99</td></tr>
        <tr><td>SQL for Everyone</td><td>$24.50</td></tr>
    </tbody>
</table>
```

## Forms

Bootstrap styles form fields so they're full-width, evenly spaced and easy to tap:

```html
<form>
    <div class="mb-3">
        <label for="email" class="form-label">Email address</label>
        <input type="email" class="form-control" id="email" placeholder="you@example.com">
    </div>
    <div class="mb-3">
        <label for="state" class="form-label">State</label>
        <select class="form-select" id="state">
            <option selected>Choose a state</option>
            <option value="CO">Colorado</option>
            <option value="UT">Utah</option>
        </select>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
</form>
```

`form-label` styles a label, `form-control` a text box, and `form-select` a drop-down. `for="email"` on the label matches the field's `id`, so clicking the label puts the cursor in the field, and screen readers read them together.

## Alerts

```html
<div class="alert alert-success" role="alert">Your profile was saved.</div>
```

## Carousel

A **carousel** rotates through slides, such as featured products. It's longer HTML, so start from the example in Bootstrap's documentation: each slide is a `carousel-item`, and the first one also has `active`. Like the navbar's menu button, it needs Bootstrap's JavaScript.

## Check yourself

2 questions to try on the lesson page.

## So what

Components let you build a complete, consistent interface by assembling pieces that already work, on every screen size, and spend your own effort on the content.

## Key terms

- [Bootstrap Component](https://www.ask-codey.com/glossary/bootstrap-component)
- [Navbar](https://www.ask-codey.com/glossary/navbar)
- [Card](https://www.ask-codey.com/glossary/card)

## Cheat sheets

- [Components](https://www.ask-codey.com/cheat-sheets/bootstrap-components-cheat-sheet)

Source: https://www.ask-codey.com/lessons/bootstrap-components