Why cards organize content in Bootsrap - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use cards in Bootstrap?

Which of the following best explains why cards are used to organize content in Bootstrap?

A Cards group related information visually, making it easier to scan and understand content blocks.

B Cards are used only to add background colors to text sections.

C Cards replace the need for navigation menus on a website.

D Cards automatically increase page loading speed by compressing images.

💡 Hint

Think about how cards help users see related info clearly.

Cards create distinct sections that group related content visually. This helps users quickly find and understand information.

📝 Syntax

intermediate

Bootstrap card structure syntax

Which option shows the correct basic HTML structure for a Bootstrap card?

A <div class="card-body"><div class="card">Content</div></div>

B <card><body>Content</body></card>

C <div class="card"><div class="card-body">Content</div></div>

D <section class="card"><section class="card-body">Content</section></section>

💡 Hint

Bootstrap cards use div elements with specific classes.

The correct structure uses a div with class card wrapping a div with class card-body.

❓ rendering

advanced

Visual output of nested Bootstrap cards

What will the user see when this Bootstrap code runs in a browser?

Bootsrap

<div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Outer Card</h5><div class="card" style="margin-top: 1rem;"><div class="card-body"><p>Inner Card Content</p></div></div></div></div>

A A larger card titled 'Outer Card' containing a smaller card with the text 'Inner Card Content' inside it.

B Two separate cards side by side with titles 'Outer Card' and 'Inner Card Content'.

C Only one card with the title 'Outer Card' and the text 'Inner Card Content' below it without card styling.

D An error message because nesting cards is not allowed in Bootstrap.

💡 Hint

Think about how nested divs with card classes display visually.

The outer card contains the inner card as a smaller box inside it, showing nested content visually separated.

❓ selector

advanced

CSS selector for card body styling

Which CSS selector correctly targets only the card body sections inside Bootstrap cards?

A .card-body.card

B .card .card-body

C #card .body

D .card-body > .card

💡 Hint

Look for a selector that selects elements with class 'card-body' inside elements with class 'card'.

The selector .card .card-body selects any element with class card-body inside an element with class card.

❓ accessibility

expert

Improving accessibility of Bootstrap cards

Which practice best improves accessibility for users navigating Bootstrap cards with a keyboard and screen readers?

A Remove all headings inside cards to reduce clutter for screen readers.

B Use only color changes on cards to indicate focus without keyboard support.

C Disable tab navigation inside cards to prevent confusion.

D Add <code>role="region"</code> and <code>aria-label</code> to each card to describe its content.

💡 Hint

Think about how screen readers identify sections and how keyboard users find focus.

Adding role="region" and descriptive aria-label helps screen readers announce the card's purpose and allows keyboard users to navigate easily.

Practice

1. Why do Bootstrap cards help organize content on a webpage?

easy

A. They group related content in a clear, boxed layout.

B. They automatically change the website's background color.

C. They remove all images from the page.

D. They make the text invisible to users.

Solution

1. Step 1: Understand the purpose of cards

   Cards are designed to group related content visually in a box format.

2. Step 2: Compare options with card features

   Only grouping content clearly matches what cards do; other options describe unrelated effects.

3. Final Answer:

   They group related content in a clear, boxed layout. -> Option A

4. Quick Check:

   Cards organize content clearly = C [OK]

Hint: Cards group content visually in boxes for clarity [OK]

Common Mistakes:

• Thinking cards change background color automatically
• Believing cards hide images or text
• Confusing cards with page-wide styles

2. Which of the following is the correct Bootstrap class to create a card container?

easy

A. .container-card

B. .card

C. .box-card

D. .card-container

Solution

1. Step 1: Recall Bootstrap card class

   The official Bootstrap class for cards is .card.

2. Step 2: Verify other options

   Other class names like .container-card or .box-card are not valid Bootstrap classes.

3. Final Answer:

   .card -> Option B

4. Quick Check:

   Bootstrap card class = .card [OK]

Hint: Bootstrap cards use the class .card for containers [OK]

Common Mistakes:

• Using incorrect class names like .container-card
• Confusing card container with layout containers
• Adding extra words to the class name

3. What will the following Bootstrap card code display in the browser?

<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="Sample Image">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This is some text inside the card.</p>
    <a href="#" class="btn btn-primary">Click Me</a>
  </div>
</div>

medium

A. A box with an image on top, a title, text, and a blue button inside.

B. Only a blue button with no text or image.

C. Just a plain text paragraph with no styling.

D. An image with no text or button below it.

Solution

1. Step 1: Analyze card structure

   The card has an image on top, a body with a title, text, and a button styled with Bootstrap classes.

2. Step 2: Understand Bootstrap styling

   The btn btn-primary class creates a blue button, and the card groups all content in a box.

3. Final Answer:

   A box with an image on top, a title, text, and a blue button inside. -> Option A

4. Quick Check:

   Card shows image, text, button = A [OK]

Hint: Look for .card-img-top, .card-title, and .btn-primary classes [OK]

Common Mistakes:

• Ignoring the image or button presence
• Thinking button is not styled
• Assuming text is missing

4. Identify the error in this Bootstrap card code snippet:

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p class="card-text">Text here</p>
  </div>
  <img src="pic.jpg" class="card-img-top" alt="Image">
</div>

medium

A. The card-title class is invalid and should be removed.

B. The card class must be applied to the image, not the div.

C. The card-text class should be on the div, not the paragraph.

D. The image should be placed before the card body inside the card.

Solution

1. Step 1: Review Bootstrap card image placement

   Bootstrap expects the image with card-img-top to be placed before the card body for correct layout.

2. Step 2: Check other classes usage

   The card-title and card-text classes are correctly used on heading and paragraph respectively.

3. Final Answer:

   The image should be placed before the card body inside the card. -> Option D

4. Quick Check:

   Image placement before body = B [OK]

Hint: Place .card-img-top before .card-body inside .card [OK]

Common Mistakes:

• Putting image after card body breaks layout
• Removing valid card-title or card-text classes
• Misapplying card class to image

5. You want to create a responsive Bootstrap card layout that shows three cards side by side on large screens but stacks them vertically on small screens. Which Bootstrap classes should you use to organize the cards correctly?

hard

A. Use grid with three col-4 col-12 cards inside.

B. Use container with three card-lg-4 card-12 inside.

C. Use row with three col-lg-4 col-12 cards inside.

D. Use flex-row with three card-4 card-12 inside.

Solution

1. Step 1: Understand Bootstrap grid for responsiveness

   Bootstrap uses row and col-* classes to create responsive layouts.

2. Step 2: Choose correct column classes for screen sizes

   col-lg-4 makes each card take 1/3 width on large screens, and col-12 makes them full width on small screens, stacking vertically.

3. Final Answer:

   Use row with three col-lg-4 col-12 cards inside. -> Option C

4. Quick Check:

   Responsive columns use col-lg-4 and col-12 inside row = D [OK]

Hint: Combine row with col-lg-4 and col-12 for responsive cards [OK]

Common Mistakes:

• Using incorrect class names like card-lg-4
• Confusing flex-row with Bootstrap grid row
• Using grid without proper Bootstrap classes