<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container mail_list"> <div class="row"> <div class="col-sm-3 col-md-2"> <a href="#" class="btn btn-danger btn-sm btn-block" role="button"><i class="glyphicon glyphicon-pencil"></i> COMPOSE</a> </div> <div class="col-sm-9 col-md-10"> <div class="btn-group hidden-xs hidden-sm visible-md-inline-block visible-lg-inline-block"> <button type="button" class="btn btn-default"> <div class="checkbox" style="margin: 0;"> <label> <input type="checkbox"> </label> </div> </button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span><span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Read</a></li> <li><a href="#">Unread</a></li> <li><a href="#">Trash</a></li> </ul> </div> <button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh"> <span class="glyphicon glyphicon-refresh"></span> </button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> More <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Mark all as read</a></li> </ul> </div> <div class="pull-right"> <span class="text-muted"><b>1</b>–<b>50</b> of <b>277</b></span> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-chevron-left"></span> </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-chevron-right"></span> </button> </div> </div> </div> </div> <div class="row"> <div class="col-sm-3 col-md-2"> <ul id="mailboxes-desktop" class="hidden-xs hidden-sm nav nav-pills nav-stacked"> <li class="active"><a href="#"><span class="badge pull-right">42</span> Inbox </a> </li> <li><a href="#">Starred</a></li> <li><a href="#">Important</a></li> <li><a href="#">Sent Mail</a></li> <li><a href="#"><span class="badge pull-right">3</span>Drafts</a></li> </ul> <div id="mailboxes-mobile" class="hidden-md hidden-lg"> <button type="button" class="btn btn-block btn-default dropdown-toggle" data-toggle="dropdown"> Mail boxes <span class="caret"></span><span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu btn-block" role="menu"> <li class="active"><a href="#"><span class="badge pull-right">42</span> Inbox </a> </li> <li><a href="#">Starred</a></li> <li><a href="#">Important</a></li> <li><a href="#">Sent Mail</a></li> <li><a href="#"><span class="badge pull-right">3</span>Drafts</a></li> </ul> </div> </div> <div class="col-sm-9 col-md-10"> <div id="home"> <div class="list-group"> <div class="message"> <a href="#" class="list-group-item"> <div class="checkbox hidden-xs hidden-sm visible-md-inline-block visible-lg-inline-block"> <label> <input type="checkbox"> </label> </div> <span class="name">George Harisson <small class="hidden-xs hidden-sm"><devbizznex@zoho.com></small></span> <span class="title">This is big title</span> <span class="text-muted text">- Hi hello how r u ?</span> <span class="badge">12:10 AM</span> <span class="pull-right"><span class="glyphicon glyphicon-lock hidden-xs hidden-sm"> </span><span class="glyphicon glyphicon-paperclip hidden-xs hidden-sm"></span> </span> </a> </div> <div class="message"> <a href="#" class="list-group-item"> <div class="checkbox hidden-xs hidden-sm visible-md-inline-block visible-lg-inline-block"> <label> <input type="checkbox"> </label> </div> <span class="name">George Harisson <small class="hidden-xs hidden-sm"><devbizznex@zoho.com></small></span> <span class="title">This is big title</span> <span class="text-muted text">- Hi hello how r u ?</span> <span class="badge">12:10 AM</span> <span class="pull-right"><span class="glyphicon glyphicon-lock hidden-xs hidden-sm"> </span><span class="glyphicon glyphicon-paperclip hidden-xs hidden-sm"></span></span> </a> </div> <div class="message"> <a href="#" class="list-group-item"> <div class="checkbox hidden-xs hidden-sm visible-md-inline-block visible-lg-inline-block"> <label> <input type="checkbox"> </label> </div> <span class="name">George Harisson <small class="hidden-xs hidden-sm"><devbizznex@zoho.com></small></span> <span class="title">This is big title</span> <span class="text-muted text">- Hi hello how r u ?</span> <span class="badge">12:10 AM</span> <span class="pull-right"><span class="glyphicon glyphicon-lock hidden-xs hidden-sm"> </span><span class="glyphicon glyphicon-paperclip hidden-xs hidden-sm"></span></span> </a> </div> </div> </div> </div> </div> </div>

body{ margin-top:50px;} .mail_list .nav-tabs .glyphicon:not(.no-margin) { margin-right:10px; } .mail_list .tab-pane .list-group-item:first-child {border-top-right-radius: 0px;border-top-left-radius: 0px;} .mail_list .tab-pane .list-group-item:last-child {border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;} .mail_list .tab-pane .list-group .checkbox { margin: 0px; } .mail_list .tab-pane .list-group input[type="checkbox"]{ position: inherit; } .mail_list .tab-pane .list-group .glyphicon { margin-right:5px; } .mail_list .tab-pane .list-group .glyphicon:hover { color:#FFBC00; } .mail_list a.list-group-item.read { color: #222;background-color: #F3F3F3; } .mail_list input[type="checkbox"]{ margin-top: 2px; position: inherit;} .mail_list hr { margin-top: 5px;margin-bottom: 10px; } .mail_list .nav-pills>li>a {padding: 5px 10px;} .mail_list .message { display: block; } .mail_list .text { font-size: 11px; }