<h2 class="text-center mt-5">Mail Inbox</h2> <div class="container-fluid"> <div class="row"> <div class="col-xl-2 col-lg-3 bg-light"> <button class="btn btn-danger btn-block">Compose</button> <ul class="mail-list hidden-tab"> <li class="text-danger"> <i class="fa fa-inbox"></i> Inbox<span class="badge badge-danger">4</span></li> <li> <i class="far fa-star"></i> Starred</li> <li> <i class="fas fa-save"></i> Draft <span class="badge badge-dark">4</span></li> <li> <i class="fas fa-file"></i> Sent Mail</li> <li> <i class="fas fa-trash-alt"></i> Trash</li> <li> <i class="fas fa-ellipsis-h"></i> More...</li> </ul> </div> <div class="col-xl-10 col-lg-9"> <div class="row col-sm-12 m-0 "> <div class="col pl-0"> <div class="row short-btn"> <button class="btn btn-light"><i class="fa fa-trash"></i></button> <button class="btn btn-light dropdown-toggle" data-toggle="dropdown"> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Move to</a> <a class="dropdown-item" href="#">Social</a> <a class="dropdown-item" href="#">Promotions</a> <a class="dropdown-item" href="#">Forums</a> </div> <i class="far fa-folder"></i> </button> <button class="btn btn-light"><i class="fa fa-trash"></i></button> <button class="btn btn-light">...more </button> </div> </div> <div class="col pr-0"> <div class="row short-btn float-right"> <button class="btn btn-light"><i class="fas fa-arrow-left"></i></button> <button class="btn btn-light"><i class="fas fa-arrow-right"></i></button> </div> </div> </div> <ul class="mail-inbox"> <li class="unread"> <div class="sort"> <label class="check-box"><input type="checkbox" name="list" value="" > <em class="check-box-style"></em></label> <div><i class="fa fa-star"></i></div> </div> <div class="img-sort"> <div class="name-u"> V </div> </div> <div class="flx"> <h6>Vishvjeet Patel</h6> <small>28-mar-2018</small> </div> <p class="flx">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p> </li> <li class="unread"> <div class="sort"> <label class="check-box"><input type="checkbox" name="list" value="" > <em class="check-box-style"></em></label> <div><i class="far fa-star"></i></div> </div> <div class="img-sort"> <div><img src="http://www.tolmatol.com/wp-content/uploads/2018/03/man.png" alt=""></div> </div> <div class="flx"> <h6>Anjali</h6> <small>25-mar-2018</small> </div> <p class="flx">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </li> <li class="read"> <div class="sort"> <label class="check-box"><input type="checkbox" name="list" value="" > <em class="check-box-style"></em></label> <div><i class="far fa-star"></i></div> </div> <div class="img-sort"> <div><img src="http://www.tolmatol.com/wp-content/uploads/2018/03/man.png" alt=""></div> </div> <div class="flx"> <h6>Mary Grace</h6> <small>22-mar-2018</small> </div> <p class="flx">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p> </li> <li class="unread"> <div class="sort"> <label class="check-box"><input type="checkbox" name="list" value="" > <em class="check-box-style"></em></label> <div><i class="fa fa-star"></i></div> </div> <div class="img-sort"> <div class="name-u"> r </div> </div> <div class="flx"> <h6>Richard</h6> <small>21-mar-2018</small> </div> <p class="flx">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p> </li> <li class="read"> <div class="sort"> <label class="check-box"><input type="checkbox" name="list" value="" > <em class="check-box-style"></em></label> <div><i class="fa fa-star"></i></div> </div> <div class="img-sort"> <div><img src="http://www.tolmatol.com/wp-content/uploads/2018/03/man.png" alt=""></div> </div> <div class="flx"> <h6>Richard</h6> <small>21-mar-2018</small> </div> <p class="flx">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p> </li> <li class="read"> <div class="sort"> <label class="check-box"><input type="checkbox" name="list" value="" > <em class="check-box-style"></em></label> <div><i class="far fa-star"></i></div> </div> <div class="img-sort"> <div><img src="http://www.tolmatol.com/wp-content/uploads/2018/03/man.png" alt=""></div> </div> <div class="flx"> <h6>Mary Grace</h6> <small>22-mar-2018</small> </div> <p class="flx">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p> </li> <li class="unread"> <div class="sort"> <label class="check-box"><input type="checkbox" name="list" value="" > <em class="check-box-style"></em></label> <div><i class="fa fa-star"></i></div> </div> <div class="img-sort"> <div><img src="http://www.tolmatol.com/wp-content/uploads/2018/03/man.png" alt=""></div> </div> <div class="flx"> <h6>Richard</h6> <small>21-mar-2018</small> </div> <p class="flx">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p> </li> </ul> </div> </div> </div>