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.