# How to Create a Bootstrap Bullet List Using Unordered Lists

> Learn how to create a Bootstrap bullet list using unordered lists. Style lists with or without bullets and customize components for your web projects.

- Repository: [Bootstrap/bootstrap](https://github.com/twbs/bootstrap)
- Tags: how-to-guide
- Published: 2026-02-16

---

**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:

```html
<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`](https://github.com/twbs/bootstrap/blob/main/scss/mixins/_lists.scss) at lines 3-7, which strips default `padding` and `list-style` properties while maintaining block-level list items.

```html
<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`](https://github.com/twbs/bootstrap/blob/main/scss/_list-group.scss) at lines 5-13, defining border properties, border-radius, and interactive states.

```html
<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.

```html
<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`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/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.