Components

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, copy its example, and change the content.

Buttons

<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:

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

<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:

<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:

<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

<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
• Navbar
• Card

Cheat sheets

• Components