List

Lists are used to group together related pieces of information so they are clearly associated with each other and easy to read.

Normal list

To use add list class to the ul element in html. Check below code

  • Mango
  • Apple
  • Orange
  • Grape

<ul class="list list-style-none">

    <li>Mango</li>
    <li>Apple</li>
    <li>Orange</li>
    <li>Grape</li>

</ul>

Inline list

  • Mango
  • Apple
  • Orange
  • Grape

<ul class="list d-flex list-style-none">

    <li>Mango</li>
    <li>Apple</li>
    <li>Orange</li>
    <li>Grape</li>

</ul>

Stacked list

To use stacked list check the below code for reference.

  • avatar

    Jammy

    online
  • avatar

    Rishi

    offline 

<ul class="stacked-list list-style-none">

    <li class="d-flex li-item">
        <img
            class="avatar xs"
            src="https://semantic-ui.com/images/avatar2/large/matthew.png"
            alt="avatar"
        />
        <div class="d-flex list-content">
            <h4>Jammy</h4>
            <small>online</small>
        </div>
    </li>

    <li class="d-flex li-item">
        <img
            class="avatar xs"
            src="https://semantic-ui.com/images/avatar2/large/kristy.png"
            alt="avatar"
        />
        <div class="d-flex list-content">
            <h4>Rishi</h4>
            <small>offline</small>
        </div>
    </li>

</ul>