Bootstrap 5 Typography Lists Unstyled
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
Please Login to comment...