How to Create a Bootstrap Bullet List Using Unordered Lists

Use a standard <ul> element for default bullets, add the .list-unstyled class to remove bullets and padding, or apply .list-group and .list-group-item classes for styled component lists.

Bootstrap provides flexible options for creating bullet lists without overriding native HTML behavior. Whether you need standard browser bullets, clean unstyled lists, or component-based list groups, the twbs/bootstrap repository offers specific utility classes and mixins to control list presentation.

Default Bullet Lists in Bootstrap

Bootstrap preserves native browser styling for unordered lists. When you use a standard <ul> element without additional classes, Bootstrap's global CSS leaves the list-style property untouched, allowing bullets to render using the browser's default disc markers.

This approach requires no additional classes:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Removing Bullets with list-unstyled

To create a bullet list without markers or left padding, apply the .list-unstyled utility class. This class is generated from the list-unstyled SCSS mixin defined in scss/mixins/_lists.scss at lines 3-7, which strips default padding and list-style properties while maintaining block-level list items.

<ul class="list-unstyled">
  <li>Item without bullet</li>
  <li>Another item</li>
  <li>And one more</li>
</ul>

Creating Styled List Groups

For a component-like appearance with borders, hover states, and active item styling, use the .list-group class on the parent element and .list-group-item on each child <li>. The base styles for these classes reside in scss/_list-group.scss at lines 5-13, defining border properties, border-radius, and interactive states.

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Horizontal Bullet Lists with list-inline

To display list items horizontally rather than vertically, use the .list-inline class on the <ul> and .list-inline-item on each <li>. This configuration removes bullets and displays items inline, useful for navigation menus or horizontal item displays.

<ul class="list-inline">
  <li class="list-inline-item">Home</li>
  <li class="list-inline-item">Features</li>
  <li class="list-inline-item">Pricing</li>
</ul>

Summary

• Use a standard <ul> element for default browser bullet styling in Bootstrap.
• Apply .list-unstyled to remove bullets and left padding, implemented via the list-unstyled mixin in scss/mixins/_lists.scss.
• Use .list-group and .list-group-item for styled component lists with borders and interactive states, defined in scss/_list-group.scss.
• Create horizontal lists with .list-inline and .list-inline-item for inline display without bullets.

Frequently Asked Questions

Does Bootstrap change default bullet list styling?

No, Bootstrap preserves native browser defaults for unordered lists. When you use a standard <ul> without classes, Bootstrap's CSS does not override the list-style property, allowing standard disc bullets to appear as they would in plain HTML.

How do I remove bullets from a list in Bootstrap?

Add the .list-unstyled class to your <ul> element. This utility class removes both the bullet markers and the default left padding. According to the twbs/bootstrap source code, this class is generated from the list-unstyled mixin located in scss/mixins/_lists.scss at lines 3-7.

What is the difference between list-unstyled and list-group?

.list-unstyled is a utility class that simply removes default browser styling (bullets and padding) without adding new visual properties. .list-group is a full component class that provides bordered items, background colors, hover states, and active item styling, implemented in scss/_list-group.scss. Use .list-unstyled for clean semantic lists and .list-group for interactive UI components.

Can I create horizontal bullet lists in Bootstrap?

Yes, use the .list-inline class on the parent <ul> and .list-inline-item on each child <li>. This configuration removes bullets and displays items horizontally in a row. This approach is commonly used for footer navigation, tag clouds, or any horizontal item arrangement where bullet markers are not desired.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}