List

Normal List

  • Footwear
  • Clothes
  • T-Shirt
  • Jeans 
<ul class="list-group">
    <li class="list-item active">
        Footwear
    </li>
    <li class="list-item">
        Clothes
    </li>
    <li class="list-item">
        T-Shirt
    </li>
    <li class="list-item">
        Jeans
    </li>
</ul>

Horizontal List

  • Footwear
  • Clothes
  • T-Shirt
  • Jeans 
<ul class="list-group horizontal-list">
    <li class="list-item active">
        Footwear
    </li>
    <li class="list-item">
        Clothes
    </li>
    <li class="list-item">
        T-Shirt
    </li>
    <li class="list-item">
        Jeans
    </li>
</ul>

Notification List

  • Notification 1
    20 Mins ago
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus, fuga.
  • Notification 1
    20 Mins ago
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus, fuga.
  • Notification 1
    20 Mins ago
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus, fuga.
<ul class="list-group notification-list">
    <li class="list-item">
        <div class="list-item-icon">
            <i class="fa fa-bell"></i>
        </div>
        <div class="list-item-body">
            <div class="list-item-header">
                <div class="list-item-title">Notification 1</div>
                <div class="list-item-trailing">20 Mins ago</div>
            </div>
            <div class="list-item-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Doloribus, fuga.</div>
        </div>
    </li>
    <li class="list-item">
        <div class="list-item-icon">
            <i class="fa fa-bell"></i>
        </div>
        <div class="list-item-body">
            <div class="list-item-header">
                <div class="list-item-title">Notification 1</div>
                <div class="list-item-trailing">20 Mins ago</div>
            </div>
            <div class="list-item-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Doloribus, fuga.</div>

        </div>
    </li>
    <li class="list-item">
        <div class="list-item-icon">
            <i class="fa fa-bell"></i>
        </div>
        <div class="list-item-body">
            <div class="list-item-header">
                <div class="list-item-title">Notification 1</div>
                <div class="list-item-trailing">20 Mins ago</div>
            </div>
            <div class="list-item-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Doloribus, fuga.</div>

        </div>
    </li>
</ul>