Bootstrap 5 Typography Lists Unstyled

Last Updated : 23 Jul, 2025

Bootstrap 5 Typography Lists Unstyled is used to remove the default style from the order or under the list. It also removes the left margin of the list. This only applies to immediate children list items.

Typography Lists Unstyled Class:

list-style: This class is used to remove the default style from the list,

Syntax:

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

The below example illustrates the Typography Lists Unstyled.

Example 1: In this example, we will create 2 order lists, and use a list-unstyled class on one of them.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
</head>

<body>
    <h1 class="text-success text-center">
        Geeksforgeeks
    </h1>
    <p class="text-center">Geeks Learning Together</p>
    <ol>
        <li class="">We are Geeks</li>
        <li class="">We help each other</li>
        <li class="">We love Stackoverflow</li>
    </ol>
    <!-- Bootstrap 5 Unstyled Class Used-->
    <strong>Bootstrap 5 Unstyled Class Used</strong>
    <ol class="list-unstyled">
        <li class="">We are Geeks</li>
        <li class="">We help each other</li>
        <li class="">We love Stackoverflow</li>
    </ol>
</body>

</html>

Output:

Example 2: In this example, we will create nested unordered lists, and use a "list-unstyled" class on the outer under the unordered list.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>

<body>
    <h1 class="text-success text-center">
        Geeksforgeeks
    </h1>
    <p class="text-center">Geeks Learning Together</p>
    <ul class="list-unstyled">
        <li>Geeks help each Other</li>
        <li>Consistency is the key of Success</li>
        <li>Follow for more:
            <ul>
                <li>Are you with us</li>
            </ul>
        </li>
        <li>1 Problem a day recession keeps away</li>
    </ul>
</body>

</html>