Card structure (header, body, footer) in Bootsrap - Mini Project: Build & Apply

Create a Bootstrap Card with Header, Body, and Footer

📖 Scenario: You are building a simple user profile card for a website. The card should have a header with the user's name, a body with a short description, and a footer with a contact button.

🎯 Goal: Build a Bootstrap card component with a header, body, and footer sections using the correct Bootstrap classes.

📋 What You'll Learn

Use Bootstrap 5 classes for the card structure

Create a card with a header containing the text 'John Doe'

Add a card body with the text 'Web developer and designer.'

Include a card footer with a button labeled 'Contact'

Ensure semantic HTML and accessibility with proper roles and labels

💡 Why This Matters

🌍 Real World

Cards are common UI elements used to display grouped information like user profiles, product details, or blog posts in a clean, organized way.

💼 Career

Knowing how to build Bootstrap cards is useful for front-end developers and web designers to create visually appealing and consistent layouts quickly.

1

Create the basic Bootstrap card container

Write the opening <div> tag with the Bootstrap class card to start the card container.

Bootsrap

# Your code here

Need a hint?

Use a div with class card to create the card container.

2

Add the card header with the user's name

Inside the div with class card, add another div with class card-header containing the exact text John Doe.

Bootsrap

  
  # Your code here

Need a hint?

Use a div with class card-header and put the text John Doe inside.

3

Add the card body with a short description

Below the card header, add a div with class card-body containing the exact text Web developer and designer..

Bootsrap

  John Doe
  
  # Your code here

Need a hint?

Use a div with class card-body and add the text inside.

4

Add the card footer with a contact button

Below the card body, add a div with class card-footer. Inside it, add a button with classes btn btn-primary and the exact label Contact.

Bootsrap

  John Doe
  Web developer and designer.
  
  # Your code here

Need a hint?

Use a div with class card-footer and inside it add a button with classes btn btn-primary and text Contact.