List styles (unstyled, inline) in Bootsrap - Browser Rendering Trace

Render Flow - List styles (unstyled, inline)

Read <ul>

→Create UL node

↓

Apply Bootstrap classes: list-unstyled or list-inline

↓

Remove default bullets or display inline

↓

Render final list visually

The browser reads the unordered list and list items, then Bootstrap classes modify the default bullet style or layout by removing bullets or displaying items side-by-side.

Render Steps - 3 Steps

Code Added:<ul> with default styles

Before

[UL]
  [LI]• Apple
  [LI]• Banana
  [LI]• Cherry

→

After

[UL]
  [LI]• Apple
  [LI]• Banana
  [LI]• Cherry

Default unordered list shows bullet points and vertical stacking.

🔧 Browser Action:Creates DOM nodes and applies default user agent styles.

Code Sample

Two lists: one with no bullets and vertical stacking, the other with items displayed side-by-side horizontally.

Bootsrap

<ul class="list-unstyled">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

<ul class="list-inline">
  <li class="list-inline-item">Dog</li>
  <li class="list-inline-item">Cat</li>
  <li class="list-inline-item">Bird</li>
</ul>

Bootsrap

.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.list-inline {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.list-inline-item {
  display: inline-block;
  margin-right: 1rem;
}

Render Quiz - 3 Questions

After applying step 2 with class list-unstyled, what visual change do you see?

A Bullets remain but items are inline

B Items display side-by-side horizontally

C Bullets disappear and items stack vertically

D List disappears completely

Common Confusions - 2 Topics

Why do bullets still appear after adding list-inline class to <ul>?

Bullets remain because list-inline only removes bullets on the <ul>, but each <li> must have class list-inline-item to display inline and remove default styles.

💡 Add list-inline-item to each <li> when using list-inline on <ul>.

Why does list-unstyled remove bullets but items still stack vertically?

list-unstyled removes bullets and padding but does not change display type, so items remain block-level and stack vertically.

💡 list-unstyled only removes markers; use list-inline for horizontal layout.

Property Reference

Property/Class	Value Applied	Effect on List	Common Use
list-unstyled	list-style: none; padding-left: 0;	Removes bullets and left padding; vertical stacking	Clean vertical list without markers
list-inline	display: flex; list-style: none; padding-left: 0;	Makes list a flex container; removes bullets	Horizontal list container
list-inline-item	display: inline-block; margin-right: 1rem;	Displays list items side-by-side with spacing	Items in inline list

Concept Snapshot

list-unstyled removes bullets and left padding, keeping vertical stacking. list-inline makes the <ul> a flex container for horizontal layout. list-inline-item on <li> makes items inline-block with spacing. Use list-unstyled for clean vertical lists, list-inline + list-inline-item for horizontal lists.