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.
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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-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:
Example 2: In this example, we will use these classes on the ordered list.
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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 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:
Reference: https://getbootstrap.com/docs/5.0/content/typography/#inline
