Lesson 19.04 — Components I: Buttons, Cards, Navbar

Introduction

Components are pre-built, pre-styled UI pieces. You add the right classes (and sometimes a data attribute) and Bootstrap handles the appearance and behavior. In this lesson we cover three workhorses: buttons, cards, and the navbar.

Components are styled by the Bootstrap CSS; the interactive ones (collapsing navbar) also need the JS bundle, which this page loads.

Theory

Buttons

Variants — .btn plus a color: .btn-primary, .btn-success, .btn-danger, etc.
Outline — .btn-outline-primary gives a bordered, transparent button.
Sizes — .btn-lg and .btn-sm.
States — add disabled or the disabled attribute.

Cards

A .card is a flexible content container. Common inner pieces: .card-img-top, .card-body, .card-title, .card-text, and .card-footer.

Navbar

The navbar is responsive: it collapses behind a "hamburger" toggle on small screens. Key classes: .navbar, .navbar-expand-lg (when to switch from collapsed to full), .navbar-brand, .navbar-toggler, and .nav-link. The toggle uses data-bs-toggle="collapse".

Real World Example

Buttons, a card, and a working responsive navbar — all rendered live below:

<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-success">Outline</button>

<div class="card" style="width:18rem">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go</a>
  </div>
</div>

Buttons:

Card:

Card title

A flexible content container with a title, text, and a button.

Go somewhere

Responsive navbar (resize to see it collapse):

Common Mistakes

Using .btn-primary without .btn. The base .btn class is required for padding, border-radius, and behavior.
Mismatched toggler target. The navbar toggler's data-bs-target must match the collapse element's id (with a #).
Forgetting .navbar-expand-{bp}. Without it the navbar never expands and stays collapsed at all sizes.
Putting card content directly in .card. Wrap text in .card-body so it gets proper padding.

Best Practices

Use semantic button colors: btn-danger for destructive actions, btn-success for confirmation.
Use real <button> elements for actions and <a> for navigation.
Keep navbars inside a container so brand and links align with the rest of your layout.
Group cards in a grid row (col-md-4) for responsive card decks.

Practice Exercise

Create one solid button and one outline button of the same color, side by side.
Build a card with a title, a sentence of text, and a button in the body.
Add a navbar with a brand and three links, using navbar-expand-lg.
Shrink the browser below the lg breakpoint and confirm the navbar collapses to a hamburger.

Assignment

Build the top of a product page:

A dark navbar with a brand, three nav links, and a right-aligned "Sign in" button.
A row of three product cards (use the grid) each with a title, price text, and an "Add to cart" button.
Make the cards stack on mobile and sit three-across on desktop.

Hint: use ms-auto on the nav list to push the sign-in button to the right edge of the navbar.

Interview Questions

What classes make a basic Bootstrap button? — .btn plus a variant such as .btn-primary.
How do you make a navbar collapse on mobile? — Use .navbar-expand-{breakpoint} with a .navbar-toggler that targets the collapse element via data-bs-target.
What is the role of .card-body? — It adds consistent padding around the card's content.
What does .btn-outline-* produce? — A transparent button with a colored border and text that fills in on hover.
Which Bootstrap part powers the collapsing navbar? — The JavaScript bundle (the Collapse plugin) plus data-bs-toggle="collapse".

Additional Resources

getbootstrap.com/docs/5.3/components/buttons — button reference
getbootstrap.com/docs/5.3/components/card — card reference
getbootstrap.com/docs/5.3/components/navbar — navbar reference

Components I: Buttons, Cards & Navbar