Skip to content
Related Articles

Related Articles

Blaze UI Lists Inline

Improve Article
Save Article
  • Last Updated : 21 Apr, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!