Email list page

This bootstrap snippet called "Email list page" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: email,inbox

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab


<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="wraper container-fluid bootstrap snippets">
    <div class="page-title"> 
        <h3 class="title">Inbox</h3> 
    </div>
      
    <div class="row">
        <!-- Left sidebar -->
        <div class="col-md-3">
            <a href="#email-compose.html" class="btn btn-success btn-block">Compose</a>
            <div class="panel panel-default p-0  m-t-20">
                <div class="panel-body p-0">
                    <div class="list-group no-border mail-list">
                      <a href="#" class="list-group-item active"><i class="fa fa-download m-r-5"></i>Inbox <b>(8)</b></a>
                      <a href="#" class="list-group-item"><i class="fa fa-star-o m-r-5"></i>Starred</a>
                      <a href="#" class="list-group-item"><i class="fa fa-file-text-o m-r-5"></i>Draft <b>(20)</b></a>
                      <a href="#" class="list-group-item"><i class="fa fa-paper-plane-o m-r-5"></i>Sent Mail</a>
                      <a href="#" class="list-group-item"><i class="fa fa-trash-o m-r-5"></i>Trash <b>(354)</b></a>
                    </div>
                </div>
            </div>

            <h3 class="panel-title m-t-40">Labels</h3>
            <div class="panel panel-default p-0  m-t-20">
                <div class="panel-body p-0">
                    <div class="list-group no-border">
                      <a href="#" class="list-group-item"><span class="fa fa-circle text-info pull-right"></span>Web App</a>
                      <a href="#" class="list-group-item"><span class="fa fa-circle text-warning pull-right"></span>Project 1</a>
                      <a href="#" class="list-group-item"><span class="fa fa-circle text-purple pull-right"></span>Project 2</a>
                      <a href="#" class="list-group-item"><span class="fa fa-circle text-pink pull-right"></span>Friends</a>
                      <a href="#" class="list-group-item"><span class="fa fa-circle text-success pull-right"></span>Family</a>
                    </div>
                </div>
            </div>
            
        </div>
        <!-- End Left sidebar -->
        
        <!-- Right Sidebar -->
        <div class="col-md-9">
            <div class="row">
                <div class="col-lg-12">
                    <div class="btn-toolbar" role="toolbar">
                        <div class="btn-group">
                            <button type="button" class="btn btn-success"><i class="fa fa-inbox"></i></button>
                            <button type="button" class="btn btn-success"><i class="fa fa-exclamation-circle"></i></button>
                            <button type="button" class="btn btn-success"><i class="fa fa-trash-o"></i></button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-folder"></i>
                            <b class="caret"></b>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#fakelink">Action</a></li>
                                <li><a href="#fakelink">Another action</a></li>
                                <li><a href="#fakelink">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#fakelink">Separated link</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-tag"></i>
                            <b class="caret"></b>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#fakelink">Action</a></li>
                                <li><a href="#fakelink">Another action</a></li>
                                <li><a href="#fakelink">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#fakelink">Separated link</a></li>
                            </ul>
                        </div>
                        
                        <div class="btn-group">
                            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                              More
                              <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                              <li><a href="#fakelink">Dropdown link</a></li>
                              <li><a href="#fakelink">Dropdown link</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                
            </div> <!-- End row -->
            
            <div class="panel panel-default m-t-20">
                <div class="panel-body">
                    <table class="table table-hover mails">
                        <tbody>
                            <tr>
                                <td class="mail-select">
                                    <label class="cr-styled">
                                        <input type="checkbox"><i class="fa"></i>
                                    </label>
                                </td>
                                <td class="mail-rateing">
                                    <i class="fa fa-star"></i>
                                </td>
                                <td>
                                    <a href="##email-read.html">Google Inc</a>
                                </td>
                                <td>
                                    <a href="##email-read.html"><i class="fa fa-circle text-info m-r-15"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                </td>
                                <td>
                                    <i class="fa fa-paperclip"></i>
                                </td>
                                <td class="text-right">
                                    07:23 AM
                                </td>
                            </tr>

                            <tr>
                                <td class="mail-select">
                                    <label class="cr-styled">
                                        <input type="checkbox"><i class="fa"></i>
                                    </label>
                                </td>
                                <td class="mail-rateing">
                                    <i class="fa fa-star text-warning"></i>
                                </td>
                                <td>
                                    <a href="##email-read.html">John Deo</a>
                                </td>
                                <td>
                                    <a href="##email-read.html"><i class="fa fa-circle text-success m-r-15"></i>Hi Bro, How are you?</a>
                                </td>
                                <td>
                                    
                                </td>
                                <td class="text-right">
                                    07:03 AM
                                </td>
                            </tr>

                            <tr class="active">
                                <td class="mail-select">
                                    <label class="cr-styled">
                                        <input type="checkbox"><i class="fa"></i>
                                    </label>
                                </td>
                                <td class="mail-rateing">
                                    <i class="fa fa-star"></i>
                                </td>
                                <td>
                                    <a href="#email-read.html">Manager</a>
                                </td>
                                <td>
                                    <a href="#email-read.html"><i class="fa fa-circle text-purple m-r-15"></i>Dolor sit amet, consectetuer adipiscing</a>
                                </td>
                                <td>
                                    <i class="fa fa-paperclip"></i>
                                </td>
                                <td class="text-right">
                                    03:00 AM
                                </td>
                            </tr>

                            <tr>
                                <td class="mail-select">
                                    <label class="cr-styled">
                                        <input type="checkbox"><i class="fa"></i>
                                    </label>
                                </td>
                                <td class="mail-rateing">
                                    <i class="fa fa-star text-warning"></i>
                                </td>
                                <td>
                                    <a href="#email-read.html">Manager</a>
                                </td>
                                <td>
                                    <a href="#email-read.html"><i class="fa fa-circle text-warning m-r-15"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                </td>
                                <td>
                                    <i class="fa fa-paperclip"></i>
                                </td>
                                <td class="text-right">
                                    22 Feb
                                </td>
                            </tr>

                            <tr>
                                <td class="mail-select">
                                    <label class="cr-styled">
                                        <input type="checkbox"><i class="fa"></i>
                                    </label>
                                </td>
                                <td class="mail-rateing">
                                    <i class="fa fa-star text-warning"></i>
                                </td>
                                <td>
                                    <a href="#email-read.html">Facebook</a>
                                </td>
                                <td>
                                    <a href="#email-read.html">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                </td>
                                <td>
                                    
                                </td>
                                <td class="text-right">
                                    22 Feb
                                </td>
                            </tr>

                            <tr class="active">
                                <td class="mail-select">
                                    <label class="cr-styled">
                                        <input type="checkbox"><i class="fa"></i>
                                    </label>
                                </td>
                                <td class="mail-rateing">
                                    <i class="fa fa-star text-warning"></i>
                                </td>
                                <td>
                                    <a href="#email-read.html">Google Inc</a>
                                </td>
                                <td>
                                    <a href="#email-read.html">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                </td>
                                <td>
                                    
                                </td>
                                <td class="text-right">
                                    21 Feb
                                </td>
                            </tr>

                            <tr class="active">
                                <td class="mail-select">
                                    <label class="cr-styled">
                                        <input type="checkbox"><i class="fa"></i>
                                    </label>
                                </td>
                                <td class="mail-rateing">
                                    <i class="fa fa-star"></i>
                                </td>
                                <td>
                                    <a href="#email-read.html">Twitter Inc</a>
                                </td>
                                <td>
                                    <a href="#email-read.html"><i class="fa fa-circle text-info m-r-15"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                </td>
                                <td>
                                    <i class="fa fa-paperclip"></i>
                                </td>
                                <td class="text-right">
                                    21 Feb
                                </td>
                            </tr>

                            <tr class="active">
                                <td class="mail-select">
                                    <label class="cr-styled">
                                        <input type="checkbox"><i class="fa"></i>
                                    </label>
                                </td>
                                <td class="mail-rateing">
                                    <i class="fa fa-star"></i>
                                </td>
                                <td>
                                    <a href="#email-read.html">Jonaly Smith</a>
                                </td>
                                <td>
                                    <a href="#email-read.html"><i class="fa fa-circle text-pink m-r-15"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                </td>
                                <td>
                                    <i class="fa fa-paperclip"></i>
                                </td>
                                <td class="text-right">
                                    19 Feb
                                </td>
                            </tr>

                            <tr class="active">
                                <td class="mail-select">
                                    <label class="cr-styled">
                                        <input type="checkbox"><i class="fa"></i>
                                    </label>
                                </td>
                                <td class="mail-rateing">
                                    <i class="fa fa-star"></i>
                                </td>
                                <td>
                                    <a href="#email-read.html">Google Inc</a>
                                </td>
                                <td>
                                    <a href="#email-read.html">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                </td>
                                <td>
                                    <i class="fa fa-paperclip"></i>
                                </td>
                                <td class="text-right">
                                    19 Feb
                                </td>
                            </tr>

                            <tr>
                                <td class="mail-select">
                                    <label class="cr-styled">
                                        <input type="checkbox"><i class="fa"></i>
                                    </label>
                                </td>
                                <td class="mail-rateing">
                                    <i class="fa fa-star"></i>
                                </td>
                                <td>
                                    <a href="#email-read.html">Google Inc</a>
                                </td>
                                <td>
                                    <a href="#email-read.html"><i class="fa fa-circle text-info m-r-15"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                </td>
                                <td>
                                    <i class="fa fa-paperclip"></i>
                                </td>
                                <td class="text-right">
                                    19 Feb
                                </td>
                            </tr>

                            <tr>
                                <td class="mail-select">
                                    <label class="cr-styled">
                                        <input type="checkbox"><i class="fa"></i>
                                    </label>
                                </td>
                                <td class="mail-rateing">
                                    <i class="fa fa-star text-warning"></i>
                                </td>
                                <td>
                                    <a href="#email-read.html">John Deo</a>
                                </td>
                                <td>
                                    <a href="#email-read.html"><i class="fa fa-circle text-success m-r-15"></i>Hi Bro, How are you?</a>
                                </td>
                                <td>
                                    
                                </td>
                                <td class="text-right">
                                    18 Feb
                                </td>
                            </tr>

                            <tr class="active">
                                <td class="mail-select">
                                    <label class="cr-styled">
                                        <input type="checkbox"><i class="fa"></i>
                                    </label>
                                </td>
                                <td class="mail-rateing">
                                    <i class="fa fa-star"></i>
                                </td>
                                <td>
                                    <a href="#email-read.html">Manager</a>
                                </td>
                                <td>
                                    <a href="#email-read.html"><i class="fa fa-circle text-purple m-r-15"></i>Dolor sit amet, consectetuer adipiscing</a>
                                </td>
                                <td>
                                    <i class="fa fa-paperclip"></i>
                                </td>
                                <td class="text-right">
                                    18 Feb
                                </td>
                            </tr>

                            <tr>
                                <td class="mail-select">
                                    <label class="cr-styled">
                                        <input type="checkbox"><i class="fa"></i>
                                    </label>
                                </td>
                                <td class="mail-rateing">
                                    <i class="fa fa-star text-warning"></i>
                                </td>
                                <td>
                                    <a href="#email-read.html">Manager</a>
                                </td>
                                <td>
                                    <a href="#email-read.html"><i class="fa fa-circle text-warning m-r-15"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                </td>
                                <td>
                                    <i class="fa fa-paperclip"></i>
                                </td>
                                <td class="text-right">
                                    15 Feb
                                </td>
                            </tr>

                            <tr>
                                <td class="mail-select">
                                    <label class="cr-styled">
                                        <input type="checkbox"><i class="fa"></i>
                                    </label>
                                </td>
                                <td class="mail-rateing">
                                    <i class="fa fa-star text-warning"></i>
                                </td>
                                <td>
                                    <a href="#email-read.html">Facebook</a>
                                </td>
                                <td>
                                    <a href="#email-read.html">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                </td>
                                <td>
                                    
                                </td>
                                <td class="text-right">
                                    15 Feb
                                </td>
                            </tr>

                            <tr class="active">
                                <td class="mail-select">
                                    <label class="cr-styled">
                                        <input type="checkbox"><i class="fa"></i>
                                    </label>
                                </td>
                                <td class="mail-rateing">
                                    <i class="fa fa-star text-warning"></i>
                                </td>
                                <td>
                                    <a href="#email-read.html">Google Inc</a>
                                </td>
                                <td>
                                    <a href="#email-read.html">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                </td>
                                <td>
                                    
                                </td>
                                <td class="text-right">
                                    14 Feb
                                </td>
                            </tr>

                            <tr class="active">
                                <td class="mail-select">
                                    <label class="cr-styled">
                                        <input type="checkbox"><i class="fa"></i>
                                    </label>
                                </td>
                                <td class="mail-rateing">
                                    <i class="fa fa-star"></i>
                                </td>
                                <td>
                                    <a href="#email-read.html">Twitter Inc</a>
                                </td>
                                <td>
                                    <a href="#email-read.html"><i class="fa fa-circle text-info m-r-15"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                </td>
                                <td>
                                    <i class="fa fa-paperclip"></i>
                                </td>
                                <td class="text-right">
                                    12 Feb
                                </td>
                            </tr>

                            <tr class="active">
                                <td class="mail-select">
                                    <label class="cr-styled">
                                        <input type="checkbox"><i class="fa"></i>
                                    </label>
                                </td>
                                <td class="mail-rateing">
                                    <i class="fa fa-star"></i>
                                </td>
                                <td>
                                    <a href="#email-read.html">Jonaly Smith</a>
                                </td>
                                <td>
                                    <a href="#email-read.html"><i class="fa fa-circle text-pink m-r-15"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                </td>
                                <td>
                                    <i class="fa fa-paperclip"></i>
                                </td>
                                <td class="text-right">
                                    12 Feb
                                </td>
                            </tr>

                            <tr class="active">
                                <td class="mail-select">
                                    <label class="cr-styled">
                                        <input type="checkbox"><i class="fa"></i>
                                    </label>
                                </td>
                                <td class="mail-rateing">
                                    <i class="fa fa-star"></i>
                                </td>
                                <td>
                                    <a href="#email-read.html">Google Inc</a>
                                </td>
                                <td>
                                    <a href="#email-read.html">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                </td>
                                <td>
                                    <i class="fa fa-paperclip"></i>
                                </td>
                                <td class="text-right">
                                    10 Feb
                                </td>
                            </tr>
                        
                        </tbody>
                    </table>
                    
                    <hr>
                    
                    <div class="row">
                        <div class="col-xs-7">
                            Showing 1 - 20 of 289
                        </div>
                        <div class="col-xs-5">
                            <div class="btn-group pull-right">
                              <button type="button" class="btn btn-default"><i class="fa fa-chevron-left"></i></button>
                              <button type="button" class="btn btn-default"><i class="fa fa-chevron-right"></i></button>
                            </div>
                        </div>
                    </div>
                </div> <!-- panel body -->
            </div> <!-- panel -->
        </div> <!-- end Col-9 -->
    
    </div><!-- End row -->


</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview



body{margin-top:20px;}

/*text color*/
.text-white {
    color: #ffffff;
}

.text-danger {
    color: #cb2a2a;
}

.text-muted {
    color: #98a6ad;
}

.text-primary {
    color: #3bc0c3;
}

.text-warning {
    color: #ebc142;
}

.text-success {
    color: #33b86c;
}

.text-info {
    color: #1ca8dd;
}

.text-inverse {
    color: #14082d;
}

.text-pink {
    color: #F13C6E;
}
.text-purple {
    color: #615ca8;
}
/* text-color */
.text-dark {
      color: #797979;
}


.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
   background-color: #ddd;
  border-color: #ddd;
  color: #444;
    z-index: 2;
}

.list-group-item,.list-group-item:first-child ,.list-group-item:last-child  {
    border-radius: 0px;
    padding: 12px 20px;
}

.list-group-item-heading {
    font-weight: 300;
}
.list-group-item.active>.badge, .nav-pills>.active>a>.badge {
    color: #3bc0c3;
}
.list-group-item.active .list-group-item-text, .list-group-item.active:focus .list-group-item-text, .list-group-item.active:hover .list-group-item-text {
    color: #3bc0c3;
}
.m-t-40 {
    margin-top: 40px !important;
}
.panel{
    padding: 20px 30px;
    border: none;
    border-top: 1px solid #ddd;
    margin-bottom: 20px;
    box-shadow: none;
}
.panel .panel-body{
    padding: 0px;
    padding-top: 20px;
}
.panel .panel-body p{
    margin: 0px;
}
.panel .panel-body p+p {
    margin-top: 15px;
}
.panel-default > .panel-heading {
    background-color: #FFFFFF;
    border-color: #DDDDDD;
    color: #797979;
}
.panel-heading {
    border-color:#eff2f7 ;
    font-size: 16px;
    padding: 0;
    padding-bottom: 15px;
}
.panel-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 0;
}
.panel-footer {
    margin: 0px -30px -30px;
    background: #eee;
    border-top: 0px;
}
.panel-group .panel .panel-heading {
padding-bottom: 0;
border-bottom: 0;
}
.panel-group .panel {
margin-bottom: 0;
border-radius: 0;
}
.m-t-20 {
    margin-top: 20px;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Mar 18th 2016, 11:18

Views: 587