Open In App

Bootstrap 5 Typography Lists Unstyled

Improve
Improve
Like Article
Like
Save
Share
Report

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

Bootstrap 5 Typography Lists Unstyled

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=
          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>


Output:

Bootstrap 5 Typography Lists Unstyled

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



Last Updated : 12 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads