Open In App

Bootstrap 5 Typography Lists Inline

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads