List group with badges in Bootsrap - Performance & Optimization

Performance: List group with badges

MEDIUM IMPACT

This affects the rendering speed and visual stability of list components with badges in the browser.

Displaying a list of items with numeric badges indicating counts

Bootsrap

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Messages
    <span class="badge bg-primary rounded-pill" style="min-width:2.5rem; text-align:center;">99+</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Notifications
    <span class="badge bg-primary rounded-pill" style="min-width:2.5rem; text-align:center;">1000</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Tasks
    <span class="badge bg-primary rounded-pill" style="min-width:2.5rem; text-align:center;">5</span>
  </li>
</ul>

Fixing badge minimum width and using flex layout prevents layout shifts and keeps badges aligned.

📈 Performance GainReduces CLS by preventing reflows caused by varying badge widths.

Displaying a list of items with numeric badges indicating counts

Bootsrap

<ul class="list-group">
  <li class="list-group-item">Messages <span class="badge bg-primary">99+</span></li>
  <li class="list-group-item">Notifications <span class="badge bg-primary">1000</span></li>
  <li class="list-group-item">Tasks <span class="badge bg-primary">5</span></li>
</ul>

Badge widths vary because numbers have different digit lengths, causing layout shifts and reflows when content changes.

📉 Performance CostTriggers multiple reflows and layout shifts (CLS) when badge content changes size.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Variable width badges inside list items	Low (few nodes)	Multiple reflows on badge content change	Medium due to layout shifts	[X] Bad
Fixed width badges with flexbox layout	Low (few nodes)	Single reflow on initial render	Low paint cost due to stable layout	[OK] Good

Rendering Pipeline

The browser calculates styles, then layouts the list items and badges. Variable badge widths cause layout recalculations and repaints, increasing rendering cost.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage is most expensive due to dynamic badge width changes causing reflows.

Core Web Vital Affected

CLS

This affects the rendering speed and visual stability of list components with badges in the browser.

Optimization Tips

1Use fixed or minimum widths for badges to prevent layout shifts.

2Use flexbox to align list items and badges horizontally.

3Avoid dynamic content changes that alter badge size without reserving space.

Performance Quiz - 3 Questions

What causes layout shifts when using badges in a list group?

A Badges with variable widths due to different content sizes

B Using flexbox for layout

C Setting fixed minimum width on badges

D Using semantic HTML elements

DevTools: Performance

How to check: Record a performance profile while interacting with the list or loading the page. Look for Layout and Recalculate Style events.

What to look for: High number of Layout events or Layout Shifts in the summary indicates unstable badge sizing causing CLS.

Practice

1. What is the main purpose of using a list group with badges in Bootstrap?

easy

A. To create horizontal navigation menus

B. To create image galleries

C. To add background colors to buttons

D. To display a vertical list of items with extra info like counts on the right

Solution

1. Step 1: Understand list groups

   List groups in Bootstrap organize items vertically for easy reading.

2. Step 2: Role of badges

   Badges add extra info like counts or statuses aligned to the right of list items.

3. Final Answer:

   To display a vertical list of items with extra info like counts on the right -> Option D

4. Quick Check:

   List groups + badges = vertical list with extra info [OK]

Hint: Badges show counts or status next to list items [OK]

Common Mistakes:

• Confusing badges with navigation tabs
• Thinking list groups are for images
• Using badges for background colors

2. Which Bootstrap class combination correctly aligns a badge to the right inside a list group item?

easy

A. list-group-item float-left

B. list-group-item text-center

C. list-group-item d-flex justify-content-between align-items-center

D. list-group-item badge-end

Solution

1. Step 1: Identify flex classes for alignment

   Using d-flex justify-content-between align-items-center makes the list item a flex container that spaces content horizontally and centers vertically.

2. Step 2: Confirm badge alignment

   This combination pushes the badge to the right side automatically.

3. Final Answer:

   list-group-item d-flex justify-content-between align-items-center -> Option C

4. Quick Check:

   Flex + justify-content-between aligns badge right [OK]

Hint: Use flex and justify-content-between for right badge alignment [OK]

Common Mistakes:

• Using float classes which Bootstrap 5 discourages
• Using text-center which centers content
• Using non-existent badge-end class

3. What will be the visual result of this code snippet?

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Messages
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ul>

medium

A. A vertical list with 'Messages' on left and a blue pill-shaped badge with '14' on right

B. A horizontal list with 'Messages' and badge stacked vertically

C. A list with badge below the text 'Messages'

D. An error because badge class is incorrect

Solution

1. Step 1: Analyze list group and flex classes

   The list-group-item with flex classes arranges content horizontally with space between.

2. Step 2: Badge styling and placement

   The badge uses bg-primary for blue background and rounded-pill for pill shape, placed on the right side.

3. Final Answer:

   A vertical list with 'Messages' on left and a blue pill-shaped badge with '14' on right -> Option A

4. Quick Check:

   Flex list group with badge = text left, badge right [OK]

Hint: Flex list group items show badge on right side [OK]

Common Mistakes:

• Thinking badge appears below text
• Confusing vertical and horizontal list layout
• Assuming badge class causes error

4. Identify the error in this Bootstrap list group with badges code:

<ul class="list-group">
  <li class="list-group-item">
    Notifications
    <span class="badge badge-primary">5</span>
  </li>
</ul>

medium

A. Incorrect badge color class; should be bg-primary

B. Missing flex classes to align badge right

C. Badge should be outside the list item

D. List group should be a div, not ul

Solution

1. Step 1: Check badge color class

   Bootstrap 5 uses bg-primary for badge background color, not badge-primary.

2. Step 2: Confirm badge alignment

   While flex classes help alignment, the main error is the wrong badge color class.

3. Final Answer:

   Incorrect badge color class; should be bg-primary -> Option A

4. Quick Check:

   Use bg-primary for badge color in Bootstrap 5 [OK]

Hint: Use bg-primary, not badge-primary, for badge colors [OK]

Common Mistakes:

• Using old Bootstrap 4 badge classes
• Forgetting flex classes but that is not an error
• Placing badge outside list item

5. You want to create a list group showing tasks with badges indicating priority: High (red), Medium (yellow), Low (green). Which badge classes correctly apply these colors in Bootstrap 5?

hard

A. badge-danger for High, badge-warning for Medium, badge-success for Low

B. bg-danger for High, bg-warning for Medium, bg-success for Low

C. text-danger for High, text-warning for Medium, text-success for Low

D. bg-primary for High, bg-secondary for Medium, bg-info for Low

Solution

1. Step 1: Identify correct badge background classes

   Bootstrap 5 uses bg-danger for red, bg-warning for yellow, and bg-success for green backgrounds.

2. Step 2: Confirm badge class usage

   Badges require bg-* classes, not badge-* or text-* for background colors.

3. Final Answer:

   bg-danger for High, bg-warning for Medium, bg-success for Low -> Option B

4. Quick Check:

   Use bg-danger/warning/success for badge colors [OK]

Hint: Use bg-danger/warning/success for red/yellow/green badges [OK]

Common Mistakes:

• Using old badge-danger classes
• Using text color classes instead of background
• Mixing unrelated color classes