Add .activeto a .list-group-itemto indicate the current active selection.

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

<!-- Basic --><ul class="list-group ">    <li class="list-group-item">Cras justo odio</li>    <li class="list-group-item active">Dapibus ac facilisis in</li>    <li class="list-group-item">Morbi leo risus</li>    <li class="list-group-item">Porta ac consectetur ac</li>    <li class="list-group-item">Vestibulum at eros</li></ul>

Change all the litags to atags to convert it into a link

<!-- Links --><div class="list-group ">    <a href="javascript:void(0);" class="list-group-item list-group-item-action">Cras justo odio</a>    <a href="javascript:void(0);" class="list-group-item list-group-item-action active">Dapibus ac facilisis in</a>    <a href="javascript:void(0);" class="list-group-item list-group-item-action">Morbi leo risus</a>    <a href="javascript:void(0);" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>    <a href="javascript:void(0);" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a></div>

• Messages

  4 New Messages

• Locations

  25 New Travel Locations

• Flexible

  Customization Flexibility

<!-- Icons --><ul class="list-group list-group-icons-meta">    <li class="list-group-item list-group-item-action">        <div class="media">            <div class="d-flex mr-3">                <svg> ... </svg>            </div>            <div class="media-body">                <h6 class="tx-inverse">Messages</h6>                <p class="mg-b-0">4 New Messages</p>            </div>        </div>    </li>    <li class="list-group-item list-group-item-action active">        <div class="media">            <div class="d-flex mr-3">                <svg> ... </svg>            </div>            <div class="media-body">                <h6 class="tx-inverse">Locations</h6>                <p class="mg-b-0">25 New Travel Locations</p>            </div>        </div>    </li>    <li class="list-group-item list-group-item-action">        <div class="media">            <div class="d-flex mr-3">                <svg> ... </svg>            </div>            <div class="media-body">                <h6 class="tx-inverse">Flexible</h6>                <p class="mg-b-0">Customization Flexibility</p>            </div>        </div>    </li></ul>

• 

  Luke Ivory

  Project Lead

• 

  Sonia Shaw

  Web Designer

• 

  Dale Butler

  Developer

<!-- Images --><ul class="list-group list-group-media">    <li class="list-group-item list-group-item-action">        <div class="media">            <div class="mr-3">                <img alt="avatar" src="assets/img/profile-1.jpeg" class="img-fluid rounded-circle">            </div>            <div class="media-body">                <h6 class="tx-inverse">Luke Ivory</h6>                <p class="mg-b-0">Project Lead</p>            </div>        </div>    </li>    <li class="list-group-item list-group-item-action active">        <div class="media">            <div class="mr-3">                <img alt="avatar" src="assets/img/profile-2.jpeg" class="img-fluid rounded-circle">            </div>            <div class="media-body">                <h6 class="tx-inverse">Sonia Shaw</h6>                <p class="mg-b-0">Web Designer</p>            </div>        </div>    </li>    <li class="list-group-item list-group-item-action ">        <div class="media">            <div class="mr-3">                <img alt="avatar" src="assets/img/profile-3.jpeg" class="img-fluid rounded-circle">            </div>            <div class="media-body">                <h6 class="tx-inverse">Dale Butler</h6>                <p class="mg-b-0">Developer</p>            </div>        </div>    </li></ul>

• List groups are a flexible and powerful component for displaying simple.Project
• List groups are a flexible and powerful component for displaying simple.Urgent
• List groups are a flexible and powerful component for displaying simple.Success

<!-- Task --><ul class="list-group task-list-group">    <li class="list-group-item list-group-item-action">        <div class="n-chk">            <label class="new-control new-checkbox checkbox-primary w-100 justify-content-between">              <input type="checkbox" class="new-control-input">              <span class="new-control-indicator"></span>                <span class="ml-2">                    List groups are a flexible and powerful component for displaying simple.                </span>                <span class="ml-3 d-block">                    <span class="badge badge-secondary">Project</span>                </span>            </label>        </div>    </li>    <li class="list-group-item list-group-item-action active">        <div class="n-chk">            <label class="new-control new-checkbox checkbox-primary w-100 justify-content-between">              <input type="checkbox" class="new-control-input">              <span class="new-control-indicator"></span>                <span class="ml-2">                    List groups are a flexible and powerful component for displaying simple.                </span>                <span class="ml-3 d-block">                    <span class="badge badge-primary">Urgent</span>                </span>            </label>        </div>    </li>    <li class="list-group-item list-group-item-action">        <div class="n-chk">            <label class="new-control new-checkbox checkbox-primary w-100 justify-content-between">              <input type="checkbox" class="new-control-input">              <span class="new-control-indicator"></span>                  <span class="ml-2">List groups are a flexible and powerful component for displaying simple.</span>                  <span class="ml-3 d-block">                      <span class="badge badge-success">Success</span>                  </span>            </label>        </div>    </li></ul>