Bootsrapmarkup~10 mins

List group with badges in Bootsrap - Browser Rendering Trace

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - List group with badges

[Load HTML] -> [Create UL element with class 'list-group'] -> [Create LI children with class 'list-group-item'] -> [Add badge span inside LI] -> [Apply Bootstrap CSS styles] -> [Render list with badges]

The browser reads the HTML list structure, creates list items, inserts badge spans inside them, then applies Bootstrap styles to visually format the list and badges.

Render Steps - 3 Steps

Code Added:

<ul class="list-group">
  <li class="list-group-item">Messages</li>
  <li class="list-group-item">Notifications</li>
  <li class="list-group-item">Tasks</li>
</ul>

Before

→

After

[List]
[Messages]
[Notifications]
[Tasks]

The browser creates a vertical list with three items styled as Bootstrap list-group items, each stacked vertically with default spacing.

🔧 Browser Action:Creates DOM nodes for UL and LI elements, applies Bootstrap list-group styles, triggers layout and paint.

Code Sample

A vertical list with three items, each showing a colored badge on the right with a number.

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">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Notifications
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Tasks
    <span class="badge bg-primary rounded-pill">7</span>
  </li>
</ul>

Render Quiz - 3 Questions

Test your understanding

After applying step 2, how are the list item contents arranged?

AText and badge stacked vertically

BText on left, badge on right horizontally aligned

CBadge on left, text on right

DText centered with badge below

Common Confusions - 3 Topics

Why is the badge not aligned vertically center with the text?

Without 'align-items-center' on the flex container (LI), the badge and text align to baseline by default, causing vertical misalignment.

💡 Use 'align-items-center' on the flex container to vertically center badge and text (see render_step 2).

Why does the badge appear below the text instead of on the right?

If 'd-flex' and 'justify-content-between' are missing, the LI content stacks vertically by default, placing badge below text.

💡 Add 'd-flex justify-content-between' to LI to arrange text and badge horizontally with space between (see render_step 2).

Why does the badge background color not show?

If the badge class or background color class like 'bg-primary' is missing, the badge has no background styling and looks like plain text.

💡 Always include 'badge' and a background color class like 'bg-primary' for visible badge styling (see render_step 3).

Property Reference

Property/Class	Effect	Visual Result	Common Use
list-group	Applies vertical list styling	Vertical stacked list with spacing	Create styled lists
list-group-item	Styles each list item	Box with padding and border	List item appearance
d-flex	Applies flexbox layout	Horizontal layout inside LI	Align content horizontally
justify-content-between	Spaces children apart	Text left, badge right	Separate content edges
align-items-center	Vertically centers children	Text and badge aligned vertically	Vertical alignment
badge	Styles small count label	Colored pill-shaped badge	Show counts or labels
bg-primary	Applies primary color background	Blue background badge	Highlight badge
rounded-pill	Makes badge pill-shaped	Rounded edges badge	Visual style

Concept Snapshot

List group with badges uses UL with class 'list-group' and LI with 'list-group-item'. Add 'd-flex justify-content-between align-items-center' to LI for horizontal layout and vertical centering. Badges are span elements with 'badge bg-primary rounded-pill' classes. Badges appear on the right side with colored pill shape. This creates a clean, aligned list with count badges.