Bootstrap 5 Typography Lists Inline

Last Updated : 23 Jul, 2025

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=
"https://cdn.jsdelivr.net/npm/[email protected]/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.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/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>