Open In App

Blaze UI Lists Inline

Improve
Improve
Like Article
Like
Save
Share
Report

Blaze UI is a CSS-based UI library that provides a great structure for building websites quickly with a scalable and maintainable foundation. In this article, we will learn about the Blaze UI Lists Inline component. This component is used to make your list items flow left to right, instead of appearing from top to bottom.

Blaze UI Lists Inline Used Class:

  •   list–inline: This class will act as a modifier to make list items in a single line.

Syntax:

<ul class="c-list c-list--inline">
    <li class="c-list__item">List-Item</li>
</ul>

The below examples will demonstrate this component.

Example 1: In this example, the unordered list is an inline list.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3> Blaze UI Lists Inline</h3>
    <ul class="c-list c-list--inline">
        <li class="c-list__item">Geeks</li>
        <li class="c-list__item">for</li>
        <li class="c-list__item">Geeks</li>
    </ul>
</body>
  
</html>


Output:

 

Example 2: In this example, the unordered inline list is nested within an ordered list.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3> Blaze UI Lists Inline</h3>
    <ol>
        <li>Fruits</li>
        <ul class="c-list c-list--inline">
            <li class="c-list__item">Orange</li>
            <li class="c-list__item">Banana</li>
            <li class="c-list__item">Apple</li>
        </ul>
        
        <li>Vegetables</li>
        <ul class="c-list c-list--inline">
            <li class="c-list__item">Ladyfinger</li>
            <li class="c-list__item">Tomato</li>
            <li class="c-list__item">Potato</li>
        </ul>
        
        <li>Colours</li>
        <ul class="c-list c-list--inline">
            <li class="c-list__item">Red</li>
            <li class="c-list__item">Green</li>
            <li class="c-list__item">Yellow</li>
        </ul>
        
        <li>City</li>
        <ul class="c-list c-list--inline">
            <li class="c-list__item">Delhi</li>
            <li class="c-list__item">Moradabad</li>
            <li class="c-list__item">Lucknow</li>
        </ul>
    </ol>
</body>
  
</html>


Output:

 

Reference: https://www.blazeui.com/components/lists/#inline



Last Updated : 21 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads