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
Last Updated :
12 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...