Foundations
Components
Examples

List group

Basic list group

  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Example list group

/index
See in Visual Editor open_in_new Open this URL open_in_new
/url-de-test
See in Visual Editor open_in_new Open this URL open_in_new 
<div class="col-4 bg-dark">
    <div class="list-group list-group-flush">
        <span class="list-group-item list-group-item-action pl-0 pr-1 border-0" tabindex="0">
            <span class="collapse-btn collapsed" data-toggle="collapse" data-target="#urlCollapse0"></span>
            <span class="text-truncate text-white" style="width: 190px; display: inline-block; vertical-align: middle;">
                <span>
                    /index
                </span>
            </span>

            <a aria-label="Options" role="button" class="dropdown actions-item" data-toggle="dropdown" tabindex="0">
                <i class="material-icons" aria-hidden="true">more_vert</i>
            </a>
            <div class="dropdown-menu dropdown-menu-right pull-right">
                <a href="#" class="dropdown-item" target="_blank" title="See in Visual Editor" aria-label="See in Visual Editor">
                    See in Visual Editor <i class="material-icons">open_in_new</i>
                </a>
                <a href="#" class="dropdown-item" title="Open this URL" aria-label="Open this URL"> Open this URL <i class="material-icons">open_in_new</i> </a>
            </div>
        </span>

        <span class="list-group-item list-group-item-action pl-0 pr-1 border-0" tabindex="0">
            <span class="collapse-btn collapsed" data-toggle="collapse" data-target="#urlCollapse2"></span>
            <span class="text-truncate text-white" style="width: 190px; display: inline-block; vertical-align: middle;">
                <span style="text-decoration: line-through;" data-toggle="tooltip" tabindex="0" data-placement="bottom" data-original-title="This URL is excluded">
                    /url-de-test
                </span>
            </span>

            <a aria-label="Options" role="button" class="dropdown actions-item" data-toggle="dropdown" tabindex="0">
                <i class="material-icons" aria-hidden="true">more_vert</i>
            </a>
            <div class="dropdown-menu dropdown-menu-right pull-right">
                <a href="#" class="dropdown-item" title="See in Visual Editor" aria-label="See in Visual Editor">
                    See in Visual Editor <i class="material-icons">open_in_new</i>
                </a>
                <a href="#" class="dropdown-item" title="Open this URL" aria-label="Open this URL"> Open this URL <i class="material-icons">open_in_new</i> </a>
            </div>
        </span>
    </div>
</div>



<script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
</script>