Card structure (header, body, footer) in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are the three main parts of a Bootstrap card?

A Bootstrap card usually has a header, a body, and a footer. These parts help organize content clearly.

beginner

How do you add a header to a Bootstrap card?

Use the class .card-header inside the card container to create a header section at the top of the card.

beginner

What is the purpose of the <code>.card-body</code> class in Bootstrap cards?

The <code>.card-body</code> class holds the main content of the card, like text, images, or buttons. It gives padding and spacing inside the card.

beginner

How can you add a footer to a Bootstrap card?

Add a <div> with the class .card-footer inside the card container to create a footer section at the bottom.

beginner

Why use a card footer in Bootstrap cards?

A card footer is useful for showing extra info like links, buttons, or small notes separate from the main content.

Which class creates the main content area inside a Bootstrap card?

A .card-body

B .card-header

C .card-footer

D .card-main

The .card-body class is used for the main content inside a Bootstrap card.

Where should you place the .card-header in a Bootstrap card?

A At the bottom of the card

B Outside the card container

C At the top of the card

D Inside the card body

The .card-header is placed at the top of the card to show the header section.

What is the correct class to add a footer to a Bootstrap card?

A .footer

B .footer-card

C .card-end

D .card-footer

Use .card-footer to add a footer section inside a Bootstrap card.

Which part of the card is best for placing buttons or links related to the card content?

A Card footer

B Card header

C Card body

D Outside the card

The card footer is ideal for buttons or links related to the card content.

What HTML element is commonly used to create each section (header, body, footer) inside a Bootstrap card?

A <section>

B <div>

C <article>

D <header>

Bootstrap cards typically use <div> elements with specific classes for header, body, and footer.

Describe how to build a simple Bootstrap card with a header, body, and footer.

Think about the order and classes needed inside a card container.

Explain why separating content into header, body, and footer is helpful in Bootstrap cards.

Consider how people read and understand grouped information.

Practice

1. Which Bootstrap class is used to create the header section of a card?

easy

A. card-top

B. card-header

C. card-title

D. card-head

Solution

1. Step 1: Understand Bootstrap card parts

   Bootstrap cards have specific classes for each part: header, body, and footer.

2. Step 2: Identify the header class

   The class card-header is used to style the header section of a card.

3. Final Answer:

   card-header -> Option B

4. Quick Check:

   Header section class = card-header [OK]

Hint: Header always uses card-header class [OK]

Common Mistakes:

• Confusing card-title with header
• Using non-existent classes like card-top
• Mixing header with body or footer classes

2. Which is the correct HTML structure for a Bootstrap card body?

easy

A. <div class='card-body'>Content</div>

B. <section class='card-body'>Content</section>

C. <div class='card-content'>Content</div>

D. <body class='card'>Content</body>

Solution

1. Step 1: Identify the correct tag and class for card body

   Bootstrap uses a div with class card-body to hold the main content.

2. Step 2: Check the options for correct syntax

   <div class='card-body'>Content</div> uses <div class='card-body'>, which is the standard Bootstrap structure.

3. Final Answer:

   <div class='card-body'>Content</div> -> Option A

4. Quick Check:

   Card body uses div.card-body [OK]

Hint: Card body is always a div with class card-body [OK]

Common Mistakes:

• Using wrong tags like section or body
• Using incorrect class names like card-content
• Placing content outside the card body div

3. What will be the visual order of sections in this Bootstrap card HTML?

<div class='card'>
  <div class='card-footer'>Footer</div>
  <div class='card-header'>Header</div>
  <div class='card-body'>Body</div>
</div>

medium

A. Header, Body, Footer

B. Footer, Body, Header

C. Header, Footer, Body

D. Footer, Header, Body

Solution

1. Step 1: Understand Bootstrap card layout

   Bootstrap .card uses display: flex; flex-direction: column, so visual order matches HTML DOM order.

2. Step 2: Trace the HTML source order

   Footer div first, then header, then body. No CSS reordering occurs.

3. Step 3: Understand visual stacking

   Flex-direction: column stacks children vertically in source order, so footer appears at top, which is unusual.

4. Step 4: Bootstrap expects header first, then body, then footer for correct visual order

   Since the HTML places footer first, it will appear at top, which is not standard.

5. Final Answer:

   Footer, Header, Body -> Option D

6. Quick Check:

   Visual order = Footer, Header, Body [OK]

Hint: Bootstrap card sections display in DOM order visually [OK]

Common Mistakes:

• Assuming Bootstrap reorders to header-body-footer regardless of HTML
• Thinking CSS order properties override DOM order
• Ignoring flex-direction: column stacks in source order

4. Identify the error in this Bootstrap card snippet:

<div class='card'>
  <div class='card-header'>Title</div>
  <div class='card-body'>Content</div>
  <div class='card-footer'>Footer</div>
</div>

What is wrong?

medium

A. Missing card class on the container

B. Footer should come before body

C. No error; this is correct Bootstrap card structure

D. Header must be inside card-body

Solution

1. Step 1: Check container class

   The outer div has class card, which is correct.

2. Step 2: Verify card parts order and nesting

   Header, body, and footer are correctly placed as siblings inside the card container.

3. Final Answer:

   No error; this is correct Bootstrap card structure -> Option C

4. Quick Check:

   Proper card structure = No error [OK]

Hint: Card parts are siblings inside div.card [OK]

Common Mistakes:

• Thinking footer must come before body
• Placing header inside body incorrectly
• Forgetting the main card container class

5. You want a card with a header, body, and footer. The footer should have a button aligned to the right. Which Bootstrap classes help achieve this layout inside the footer?

hard

A. card-footer d-flex justify-content-end

B. card-footer text-center

C. card-footer align-items-start

D. card-footer float-right

Solution

1. Step 1: Use card-footer for footer section

   The footer must have the card-footer class to style it as a card footer.

2. Step 2: Align button right using Flexbox utilities

   Bootstrap's d-flex makes the footer a flex container, and justify-content-end pushes content to the right.

3. Final Answer:

   card-footer d-flex justify-content-end -> Option A

4. Quick Check:

   Right aligned footer button = d-flex justify-content-end [OK]

Hint: Use flex and justify-content-end to align right [OK]

Common Mistakes:

• Using deprecated float-right class
• Using text-center which centers content
• Using align-items-start which aligns vertically