Bootstrap 5 Typography Lists Inline
Bootstrap 5 Typography Lists Inline classes are used to remove a list’s bullets and apply some light margin. Sometimes we need to put listed elements in a horizontal manner.
Typography Lists Inline Classes:
- list-inline: This class is used to make the list item left most aligned.
- list-inline-item: This class is used to remove the dots or numbers from the list and make them in one line.
Syntax:
<ul class="list-inline"> <li class="list-inline-item">...</li> <li class="list-inline-item">...</li> ... </ul>
The below example will illustrate the Typography Lists Inline.
Example 1: In this example, we will use these classes on 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-inline"> <li class="list-inline-item"> We are Geeks </li> <li class="list-inline-item"> We help each other </li> <li class="list-inline-item"> We love Stackoverflow </li> </ul></body></html> |
Output:
Bootstrap 5 Typography Lists Inline
Example 2: In this example, we will use these classes on the ordered 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> <ol class="list-inline"> <li class="list-inline-item"> We are Geeks </li> <li class="list-inline-item"> We help each other </li> <li class="list-inline-item"> We love Stackoverflow </li> </ol></body></html> |
Output:
Bootstrap 5 Typography Lists Inline
Reference: https://getbootstrap.com/docs/5.0/content/typography/#inline
Please Login to comment...