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.