Categories
css html

I need an unordered list without any bullets

2787

I have created an unordered list. I feel the bullets in the unordered list are bothersome, so I want to remove them.

Is it possible to have a list without bullets?

0

    4049

    You can remove bullets by setting the list-style-type to none on the CSS for the parent element (typically a <ul>), for example:

    ul {
      list-style-type: none;
    }
    

    You might also want to add padding: 0 and margin: 0 to that if you want to remove indentation as well.

    See Listutorial for a great walkthrough of list formatting techniques.

    8

    • @tovmeod Seems to work fine in my IE9 (on Win7). (it is a complex page, not a simple POC, maybe something else changed the behavior)

      Sep 16, 2016 at 12:47


    • 2

      If you are like me and also looking for how to remove the indent, see this – stackoverflow.com/a/13939142/846727

      – Kunal

      Jan 16, 2018 at 16:48

    • 22

      Oh, how many times I have come back here for the copy/paste 🙂

      Jul 2, 2019 at 13:50

    • Nice touch on padding and margins

      Jan 27, 2020 at 11:55

    • There is a much more elegant solution to display lists without bullets in the answer by @shaneb below. It makes use of the HTML5 object ‘Description Lists’.

      – Cagy79

      Nov 2, 2020 at 23:08


    677

    If you’re using Bootstrap, it has an “unstyled” class:

    Remove the default list-style and left padding on list items (immediate children only).

    Bootstrap 2:

    <ul class="unstyled">
       <li>...</li>
    </ul>
    

    http://twitter.github.io/bootstrap/base-css.html#typography

    Bootstrap 3 and 4:

    <ul class="list-unstyled">
       <li>...</li>
    </ul>
    

    Bootstrap 3: http://getbootstrap.com/css/#type-lists

    Bootstrap 4: https://getbootstrap.com/docs/4.3/content/typography/#unstyled

    Bootstrap 5: https://getbootstrap.com/docs/5.0/content/typography/#unstyled

    4

    • 4

      If we listed classes for every CSS framework, we would have a mess on StackOverflow. A quick Google search reveals Bootstrap was only used by 2% of websites at its peak, and surely that’s falling with the introduction of more sensible solutions like flexbox and css grid.

      – PJ Brunet

      Apr 4, 2018 at 19:57


    • 11

      Actually, this answer is exactly what I was looking for. And Bootstrap is used by 3.6% of the entire Internet, so it’s not falling. trends.builtwith.com/docinfo/Twitter-Bootstrap A quick Google search reveals that Bootstrap is consistently placed in the “most popular CSS frameworks” category.

      – Bobort

      May 10, 2018 at 14:38

    • 2

      @PJBrunet If we listed classes for every CSS framework, we would have much more people getting answers to their questions. Moreover, the OP didn’t mention that he’s interested only in a pure CSS solution.

      Oct 30, 2020 at 21:21

    • Instead of class I would use id here if ul is unique. If not, stay with class.

      – Timo

      Jan 16, 2021 at 13:23

    225

    You need to use list-style: none;

    <ul style="list-style: none;">
        <li>...</li>
    </ul>
    

    1

    • 7

      Be aware that inline css overrules css in files. Depending on the application/development practices it can be really annoying.

      Feb 15, 2018 at 16:35