<div class="card">
    <div class="card-body">
        <h4 class="card-title">To Do list</h4>
        <!-- ============================================================== -->
        <!-- To do list widgets -->
        <!-- ============================================================== -->
        <div class="to-do-widget m-t-20">
            <ul class="list-task todo-list list-group m-b-0" data-role="tasklist">
                <li class="list-group-item todo-item" data-role="task">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="customCheck">
                        <label class="custom-control-label todo-label" for="customCheck">
                            <span class="todo-desc">Schedule meeting with</span>
                        </label>
                    </div>
                    <ul class="list-style-none assignedto">
                        <li class="assignee">
                            <img class="assignee-img" src="assets/images/users/1.jpg" alt="user" data-toggle="tooltip" data-placement="top" title=""
                                data-original-title="Steave">
                        </li>
                        <li class="assignee">
                            <img class="assignee-img" src="assets/images/users/2.jpg" alt="user" data-toggle="tooltip" data-placement="top" title=""
                                data-original-title="Jessica">
                        </li>
                        <li class="assignee">
                            <img class="assignee-img" src="assets/images/users/3.jpg" alt="user" data-toggle="tooltip" data-placement="top" title=""
                                data-original-title="Priyanka">
                        </li>
                        <li class="assignee">
                            <img class="assignee-img" src="assets/images/users/4.jpg" alt="user" data-toggle="tooltip" data-placement="top" title=""
                                data-original-title="Selina">
                        </li>
                    </ul>
                </li>
                <li class="list-group-item todo-item" data-role="task">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="customCheck1">
                        <label class="custom-control-label todo-label" for="customCheck1">
                            <span class="todo-desc">Give Purchase report to</span>
                        </label>
                            <span class="label label-light-danger float-right">Today </span>
                    </div>
                    <ul class="list-style-none assignedto">
                        <li>
                            <img src="assets/images/users/3.jpg" alt="user" ngbTooltip="Priyanka" data-placement="top">
                        </li>
                        <li>
                            <img src="assets/images/users/4.jpg" alt="user" ngbTooltip="Selina" data-placement="top">
                        </li>
                    </ul>
                </li>
                <li class="list-group-item" data-role="task">
                    <div class="custom-control custom-checkbox">
                        <input class="custom-control-input" id="td3" name="radio-stacked4" type="checkbox">
                        <label class="custom-control-label" for="td3">Book flight for holiday</label>
                    </div>
                    <div class="item-date"> 26 jun 2017</div>
                </li>
                <li class="list-group-item" data-role="task">
                    <div class="custom-control custom-checkbox">
                        <input class="custom-control-input" id="td5" name="radio-stacked5" type="checkbox">
                        <label class="custom-control-label" for="td5">Forward all tasks
                        </label>
                        <span class="label label-light-warning float-right">2 weeks</span>
                    </div>
                    <div class="item-date"> 26 jun 2017</div>
                </li>

                <li class="list-group-item" data-role="task">
                    <div class="custom-control custom-checkbox">
                        <input class="custom-control-input" id="td6" name="radio-stacked6" type="checkbox">
                        <label class="custom-control-label" for="td6">Important tasks
                        </label>
                        <span class="label label-light-success float-right">2 weeks</span>
                    </div>
                    <ul class="assignedto">
                        <li>
                            <img src="assets/images/users/1.jpg" alt="user" ngbTooltip="Assign to Steave" data-placement="top">
                        </li>
                        <li>
                            <img src="assets/images/users/2.jpg" alt="user" ngbTooltip="Assign to Jessica" data-placement="top">
                        </li>
                        <li>
                            <img src="assets/images/users/4.jpg" alt="user" ngbTooltip="Assign to Selina" data-placement="top">
                        </li>
                    </ul>
                </li>
                <li class="list-group-item" data-role="task">
                    <div class="custom-control custom-checkbox">
                        <input class="custom-control-input" id="td7" name="radio-stacked4" type="checkbox">
                        <label class="custom-control-label" for="td7">Book flight for holiday</label>
                    </div>
                    <div class="item-date"> 26 jun 2017</div>
                </li>
                <li class="list-group-item" data-role="task">
                    <div class="custom-control custom-checkbox">
                        <input class="custom-control-input" id="td8" name="radio-stacked5" type="checkbox">
                        <label class="custom-control-label" for="td8">Forward all tasks
                        </label>
                        <span class="label label-light-warning float-right">2 weeks</span>
                    </div>
                    <div class="item-date"> 26 jun 2017</div>
                </li>
            </ul>
        </div>
    </div>
</div>