Card groups and decks in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a card group in Bootstrap?

A card group is a container that groups multiple cards together with equal width and height, making them appear as a single, connected unit.

intermediate

How does a card deck differ from a card group in Bootstrap?

A card deck arranges cards with equal width and spacing between them, but cards do not share borders. Card decks are responsive and stack vertically on smaller screens.

beginner

Which Bootstrap class creates a card group?

The class .card-group creates a card group container that aligns cards side by side with shared borders.

beginner

What Bootstrap class is used to create a card deck?

The class .card-deck creates a card deck container that spaces cards evenly with margin between them.

beginner

Why should you use card groups or decks instead of placing cards individually?

Using card groups or decks ensures consistent alignment, equal sizing, and better responsive behavior, making your layout look neat and professional.

Which Bootstrap class groups cards with shared borders and equal height?

A .card-container

B .card-deck

C .card-group

D .card-stack

The .card-group class groups cards with shared borders and equal height.

What happens to cards in a card deck on smaller screens?

A They stack vertically

B They stay side by side with no change

C They disappear

D They overlap

Cards in a .card-deck stack vertically on smaller screens for better readability.

Which class would you use to create equal width cards with spacing between them?

A .card-group

B .card-deck

C .card-equal

D .card-spacing

The .card-deck class spaces cards evenly with margin between them.

What is a key visual difference between card groups and card decks?

A Card groups have shared borders; card decks have spacing

B Card decks have shared borders; card groups have spacing

C Both have shared borders

D Both have spacing but no borders

Card groups share borders between cards; card decks have spacing between cards.

Why is using card groups or decks recommended in Bootstrap layouts?

A To add animations

B To disable responsiveness

C To change card colors automatically

D To ensure consistent card sizing and alignment

Card groups and decks help keep cards aligned and sized consistently for a neat layout.

Explain the difference between Bootstrap's card groups and card decks.

Think about how cards look side by side and how they behave on small screens.

Describe why using card groups or decks improves the layout of cards in Bootstrap.

Consider what happens if cards are placed individually without grouping.

Practice

1. What is the main purpose of using .card-group in Bootstrap?

easy

A. To add shadows to cards

B. To add space between cards with equal margins

C. To create a carousel of cards

D. To make all cards the same height and visually connected

Solution

1. Step 1: Understand .card-group behavior

   The .card-group class groups cards so they share the same height and appear connected without gaps.

2. Step 2: Compare with other classes

   .card-deck spaces cards evenly with margins, not connecting them tightly.

3. Final Answer:

   To make all cards the same height and visually connected -> Option D

4. Quick Check:

   .card-group = same height + connected cards [OK]

Hint: Remember: group = connected and equal height cards [OK]

Common Mistakes:

• Confusing card-group with card-deck spacing
• Thinking card-group adds margins between cards
• Assuming card-group creates a carousel

2. Which of the following is the correct syntax to create a card deck in Bootstrap?

easy

A. <div class='card-group'> ... </div>

B. <div class='deck-cards'> ... </div>

C. <div class='card-deck'> ... </div>

D. <div class='card-container'> ... </div>

Solution

1. Step 1: Identify Bootstrap class for card decks

   The correct Bootstrap class for card decks is card-deck, which spaces cards evenly.

2. Step 2: Check other options

   card-group is for connected cards, and the other classes are not valid Bootstrap classes.

3. Final Answer:

   <div class='card-deck'> ... </div> -> Option C

4. Quick Check:

   Card deck syntax = card-deck [OK]

Hint: Deck = spaced cards, use class 'card-deck' [OK]

Common Mistakes:

• Using 'card-group' instead of 'card-deck' for spacing
• Inventing non-existent classes like 'card-container'
• Misspelling class names

3. What will be the visual difference when using .card-group versus .card-deck for three cards side by side?

medium

A. Both have equal height and no gaps

B. Cards in .card-group have equal height and no gaps; .card-deck cards have gaps and equal spacing

C. Cards in .card-group have gaps; .card-deck cards overlap

D. Both have gaps but different background colors

Solution

1. Step 1: Understand .card-group layout

   .card-group makes cards the same height and connects them visually without gaps.

2. Step 2: Understand .card-deck layout

   .card-deck spaces cards evenly with margins, creating gaps between cards.

3. Final Answer:

   Cards in .card-group have equal height and no gaps; .card-deck cards have gaps and equal spacing -> Option B

4. Quick Check:

   Group = connected; Deck = spaced [OK]

Hint: Group = no gaps; Deck = gaps between cards [OK]

Common Mistakes:

• Thinking card-deck removes gaps
• Assuming both have same spacing
• Confusing card-group with card-deck visually

4. You wrote this code but cards are not spaced evenly:

<div class='card-group'>
  <div class='card'>Card 1</div>
  <div class='card'>Card 2</div>
  <div class='card'>Card 3</div>
</div>

What is the issue?

medium

A. You should use card-deck instead of card-group for even spacing

B. You need to add row class to the container

C. Cards need col classes inside card-group

D. You forgot to add container class

Solution

1. Step 1: Identify the class used

   The code uses card-group, which connects cards without spacing.

2. Step 2: Choose correct class for spacing

   To space cards evenly with margins, card-deck should be used instead.

3. Final Answer:

   You should use card-deck instead of card-group for even spacing -> Option A

4. Quick Check:

   Spacing needs card-deck not card-group [OK]

Hint: Use card-deck for spacing, card-group for connected cards [OK]

Common Mistakes:

• Adding row or col classes unnecessarily
• Thinking container class controls card spacing
• Confusing card-group and card-deck roles

5. You want to display four cards in a row that all have the same height and are spaced evenly with margin between them. Which Bootstrap approach should you use?

hard

A. Use .card-deck to space cards evenly with margin and equal height

B. Use .card-group inside a .row with .col classes

C. Use .card-group alone without any grid classes

D. Use .card-columns for equal height and spacing

Solution

1. Step 1: Understand requirements

   You want cards with equal height and even spacing with margin between them.

2. Step 2: Match Bootstrap classes to needs

   .card-deck spaces cards evenly with margin and keeps them balanced in height.

3. Step 3: Evaluate other options

   .card-group connects cards without margin; .card-columns creates masonry layout, not equal height rows.

4. Final Answer:

   Use .card-deck to space cards evenly with margin and equal height -> Option A

5. Quick Check:

   Even spacing + equal height = card-deck [OK]

Hint: For spacing and equal height, pick card-deck [OK]

Common Mistakes:

• Using card-group expecting margin spacing
• Using card-columns which stacks cards unevenly
• Not combining with grid classes properly