tidle UI

Lists

Simple Lists

Use the .list class to create a list. Use .list-accent for an colored list item marker.

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
  5. List item 5
  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
            
            <!-- Unordered List -->
            <ul class="list">
                <li>List item 1</li>
                ...
            </ul>
            <!-- Ordered List -->
            <ol class="list">
                <li>List item 1</li>
                ...
            </ol>
            <!-- Colored List -->
            <ul class="list list-accent">
                <li>List item 1</li>
                ...
            </ul>

List Group

Use the .list-group class to create a stacked list. To add item separators, add the .list-separators class.

  • Roronoa Zoro

  • Itachi Uchiha

  • Gojo Satoru

  • Monkey D Luffy

  • Namikaze Minato

  • Madara Uchiha

            
            <ul class="list-group">
                <li class="list-group-item">
                    <div class="avatar bg-default avatar-sm">
                        <i class="fas fa-user"></i>
                    </div>
                    <p class="text-base">Roronoa Zoro</p>
                </li>
                ...
            </ul>

            <!-- w/ List item separators -->
            <ul class="list-group list-separators">
                <li class="list-group-item"> ... </li>
                ...
            </ul>

List Utilities

  • List Style

    Utilities for controlling the bullet/number style of a list.

    .list-none, .list-disc, .list-decimal, .list-circle, .list-square.

  • List Style Postiion

    Utilities for controlling the position of bullets/numbers in lists.

    .list-inside, .list-outside.

    List Inside

    • List Item 1
    • List Item 2

    List Outside

    • List Item 1
    • List Item 2