Card structure (header, body, footer) in Bootsrap - Browser Rendering Trace

Render Flow - Card structure (header, body, footer)

[Read <div class='card'>] -> [Create card container] -> [Read <div class='card-header'>] -> [Create header section] -> [Read <div class='card-body'>] -> [Create body section] -> [Read <div class='card-footer'>] -> [Create footer section] -> [Add text content] -> [Close all divs]

The browser reads the card container first, then creates separate sections for header, body, and footer inside it, stacking them vertically.

Render Steps - 4 Steps

Code Added:<div class="card" style="width: 18rem;">

Before

[Empty page]

→

After

[ Card container ]
[______________]

The card container appears as a box with fixed width but no content yet.

🔧 Browser Action:Creates block container with width and border styles from Bootstrap

Code Sample

A vertical card with a distinct header on top, body content in the middle, and footer at the bottom, styled by Bootstrap.

Bootsrap

<div class="card" style="width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">This is the body content.</p>
  </div>
  <div class="card-footer">Footer</div>
</div>

Render Quiz - 3 Questions

After applying step 2, what do you see inside the card container?

A Only the card container with no inner sections

B A footer section at the bottom

C A header section with background and padding at the top

D Body content with text

Common Confusions - 2 Topics

Why does the card-footer sometimes look the same as the card-body?

Bootstrap applies a subtle background color to the footer, but if your page background is similar, it might look the same. Check the background colors in render_steps 4.

💡 Look for subtle shading differences between body and footer backgrounds.

Why doesn't the card-header stretch full width sometimes?

The card container sets the width, so if you don't set a width or container size, the header will only be as wide as the card. See render_step 1 for container width.

💡 The card's width controls all inner sections' widths.

Property Reference

Class	Purpose	Visual Effect	Common Use
card	Container for the card	Box with border, shadow, and fixed width	Wraps all card content
card-header	Top section	Background color, padding, bold text	Title or heading area
card-body	Main content area	Padding with normal background	Text, images, or other content
card-footer	Bottom section	Subtle background, padding	Footer notes or actions

Concept Snapshot

Bootstrap cards have three main parts: - card-header: top section with background and padding - card-body: main content area with padding - card-footer: bottom section with subtle background The card container sets width and border. Each section stacks vertically inside the card.

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