HTML code
Clean, semantic HTML that powers this Bootstrap 4.3.1 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.
Download
<link href="https://cdn.materialdesignicons.com/4.5.95/css/materialdesignicons.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<!-- Right Sidebar -->
<div class="col-12">
<div class="card-box">
<!-- Left sidebar -->
<div class="inbox-leftbar">
<a href="email-compose.html" class="btn btn-danger btn-block waves-effect waves-light">Compose</a>
<div class="mail-list mt-4">
<a href="#" class="list-group-item border-0 text-danger font-weight-bold"><i class="mdi mdi-inbox font-18 align-middle mr-2"></i>Inbox<span class="badge badge-danger float-right ml-2 mt-1">8</span></a>
<a href="#" class="list-group-item border-0"><i class="mdi mdi-star font-18 align-middle mr-2"></i>Starred</a>
<a href="#" class="list-group-item border-0"><i class="mdi mdi-file-document-box font-18 align-middle mr-2"></i>Draft<span class="badge badge-info float-right ml-2 mt-1">32</span></a>
<a href="#" class="list-group-item border-0"><i class="mdi mdi-send font-18 align-middle mr-2"></i>Sent Mail</a>
<a href="#" class="list-group-item border-0"><i class="mdi mdi-delete font-18 align-middle mr-2"></i>Trash</a>
</div>
<h6 class="mt-4">Labels</h6>
<div class="list-group b-0 mail-list">
<a href="#" class="list-group-item border-0"><span class="mdi mdi-circle text-info mr-2"></span>Web App</a>
<a href="#" class="list-group-item border-0"><span class="mdi mdi-circle text-warning mr-2"></span>Recharge</a>
<a href="#" class="list-group-item border-0"><span class="mdi mdi-circle text-dark mr-2"></span>Wallet Balance</a>
<a href="#" class="list-group-item border-0"><span class="mdi mdi-circle text-primary mr-2"></span>Friends</a>
<a href="#" class="list-group-item border-0"><span class="mdi mdi-circle text-success mr-2"></span>Family</a>
</div>
</div>
<!-- End Left sidebar -->
<div class="inbox-rightbar">
<div class="btn-group">
<button type="button" class="btn btn btn-light waves-effect"><i class="mdi mdi-archive font-18"></i></button>
<button type="button" class="btn btn btn-light waves-effect"><i class="mdi mdi-alert-octagon font-18"></i></button>
<button type="button" class="btn btn btn-light waves-effect"><i class="mdi mdi-delete-variant font-18"></i></button>
</div>
<div class="btn-group">
<button type="button" class="btn btn btn-light dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-folder font-18"></i>
<i class="mdi mdi-chevron-down"></i>
</button>
<div class="dropdown-menu">
<span class="dropdown-header">Move to</span>
<a class="dropdown-item" href="javascript: void(0);">Social</a>
<a class="dropdown-item" href="javascript: void(0);">Promotions</a>
<a class="dropdown-item" href="javascript: void(0);">Updates</a>
<a class="dropdown-item" href="javascript: void(0);">Forums</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn btn-light dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-label font-18"></i>
<i class="mdi mdi-chevron-down"></i>
</button>
<div class="dropdown-menu">
<span class="dropdown-header">Label as:</span>
<a class="dropdown-item" href="javascript: void(0);">Updates</a>
<a class="dropdown-item" href="javascript: void(0);">Social</a>
<a class="dropdown-item" href="javascript: void(0);">Promotions</a>
<a class="dropdown-item" href="javascript: void(0);">Forums</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn btn-light dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-horizontal font-18"></i> More
<i class="mdi mdi-chevron-down"></i>
</button>
<div class="dropdown-menu">
<span class="dropdown-header">More Option :</span>
<a class="dropdown-item" href="javascript: void(0);">Mark as Unread</a>
<a class="dropdown-item" href="javascript: void(0);">Add to Tasks</a>
<a class="dropdown-item" href="javascript: void(0);">Add Star</a>
<a class="dropdown-item" href="javascript: void(0);">Mute</a>
</div>
</div>
<div class="mt-3">
<ul class="message-list">
<li class="unread">
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk1">
<label for="chk1" class="toggle"></label>
</div>
<span class="star-toggle far fa-star text-warning"></span>
<a href="" class="title">Lucas Kriebel (via Twitter)</a>
</div>
<div class="col-mail col-mail-2">
<a href="" class="subject">Lucas Kriebel (@LucasKriebel) has sent
you a direct message on Twitter! –
<span class="teaser">@LucasKriebel - Very cool :) Nicklas, You have a new direct message.</span>
</a>
<div class="date">11:49 am</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk3">
<label for="chk3" class="toggle"></label>
</div>
<span class="star-toggle far fa-star"></span>
<a href="" class="title">Randy, me (5)</a>
</div>
<div class="col-mail col-mail-2">
<a href="" class="subject">Last pic over my village –
<span class="teaser">Yeah i'd like that! Do you remember the video you showed me of your train ride between Colombo and Kandy? The one with the mountain view? I would love to see that one again!</span>
</a>
<div class="date">5:01 am</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk4">
<label for="chk4" class="toggle"></label>
</div>
<span class="star-toggle far fa-star text-warning"></span>
<a href="" class="title">Andrew Zimmer</a>
</div>
<div class="col-mail col-mail-2">
<a href="" class="subject">Mochila Beta: Subscription Confirmed
– <span class="teaser">You've been confirmed! Welcome to the ruling class of the inbox. For your records, here is a copy of the information you submitted to us...</span>
</a>
<div class="date">Mar 8</div>
</div>
</li>
<li class="unread">
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk5">
<label for="chk5" class="toggle"></label>
</div>
<span class="star-toggle far fa-star"></span>
<a href="" class="title">Infinity HR</a>
</div>
<div class="col-mail col-mail-2">
<a href="" class="subject">Sveriges Hetaste sommarjobb –
<span class="teaser">Hej Nicklas Sandell! Vi vill bjuda in dig till "First tour 2014", ett rekryteringsevent som erbjuder jobb på 16 semesterorter iSverige.</span>
</a>
<div class="date">Mar 8</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk6">
<label for="chk6" class="toggle"></label>
</div>
<span class="star-toggle far fa-star"></span>
<a href="" class="title">Web Support Dennis</a>
</div>
<div class="col-mail col-mail-2">
<a href="" class="subject">Re: New mail settings –
<span class="teaser">Will you answer him asap?</span>
</a>
<div class="date">Mar 7</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk7">
<label for="chk7" class="toggle"></label>
</div>
<span class="star-toggle far fa-star text-warning"></span>
<a href="" class="title">me, Peter (2)</a>
</div>
<div class="col-mail col-mail-2">
<a href="" class="subject">Off on Thursday –
<span class="teaser">Eff that place, you might as well stay here with us instead! Sent from my iPhone 4 > 4 mar 2014 at 5:55 pm</span>
</a>
<div class="date">Mar 4</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk8">
<label for="chk8" class="toggle"></label>
</div>
<span class="star-toggle far fa-star"></span>
<a href="" class="title">Medium</a>
</div>
<div class="col-mail col-mail-2">
<a href="" class="subject">This Week's Top Stories –
<span class="teaser">Our top pick for you on Medium this week The Man Who Destroyed America’s Ego</span>
</a>
<div class="date">Feb 28</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk9">
<label for="chk9" class="toggle"></label>
</div>
<span class="star-toggle far fa-star text-warning"></span>
<a href="" class="title">Death to Stock</a>
</div>
<div class="col-mail col-mail-2">
<a href="" class="subject">Montly High-Res Photos –
<span class="teaser">To create this month's pack, we hosted a party with local musician Jared Mahone here in Columbus, Ohio.</span>
</a>
<div class="date">Feb 28</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk10">
<label for="chk10" class="toggle"></label>
</div>
<span class="star-toggle far fa-star"></span>
<a href="" class="title">Revibe</a>
</div>
<div class="col-mail col-mail-2">
<a href="" class="subject">Weekend on Revibe –
<span class="teaser">Today's Friday and we thought maybe you want some music inspiration for the weekend. Here are some trending tracks and playlists we think you should give a listen!</span>
</a>
<div class="date">Feb 27</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk11">
<label for="chk11" class="toggle"></label>
</div>
<span class="star-toggle far fa-star"></span>
<a href="" class="title">Erik, me (5)</a>
</div>
<div class="col-mail col-mail-2">
<a href="" class="subject">Regarding our meeting –
<span class="teaser">That's great, see you on Thursday!</span>
</a>
<div class="date">Feb 24</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk12">
<label for="chk12" class="toggle"></label>
</div>
<span class="star-toggle far fa-star text-warning"></span>
<a href="" class="title">KanbanFlow</a>
</div>
<div class="col-mail col-mail-2">
<a href="" class="subject">Task assigned: Clone ARP's website
– <span class="teaser">You have been assigned a task by Alex@Work on the board Web.</span>
</a>
<div class="date">Feb 24</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk13">
<label for="chk13" class="toggle"></label>
</div>
<span class="star-toggle far fa-star"></span>
<a href="" class="title">Tobias Berggren</a>
</div>
<div class="col-mail col-mail-2">
<a href="" class="subject">Let's go fishing! –
<span class="teaser">Hey, You wanna join me and Fred at the lake tomorrow? It'll be awesome.</span>
</a>
<div class="date">Feb 23</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk14">
<label for="chk14" class="toggle"></label>
</div>
<span class="star-toggle far fa-star text-warning"></span>
<a href="" class="title">Charukaw, me (7)</a>
</div>
<div class="col-mail col-mail-2">
<a href="" class="subject">Hey man – <span class="teaser">Nah man sorry i don't. Should i get it?</span>
</a>
<div class="date">Feb 23</div>
</div>
</li>
<li class="unread">
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk15">
<label for="chk15" class="toggle"></label>
</div>
<span class="star-toggle far fa-star text-warning"></span>
<a href="" class="title">me, Peter (5)</a>
</div>
<div class="col-mail col-mail-2">
<a href="" class="subject">Home again! – <span class="teaser">That's just perfect! See you tomorrow.</span>
</a>
<div class="date">Feb 21</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk16">
<label for="chk16" class="toggle"></label>
</div>
<span class="star-toggle far fa-star"></span>
<a href="" class="title">Stack Exchange</a>
</div>
<div class="col-mail col-mail-2">
<a href="" class="subject">1 new items in your Stackexchange inbox
– <span class="teaser">The following items were added to your Stack Exchange global inbox since you last checked it.</span>
</a>
<div class="date">Feb 21</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk17">
<label for="chk17" class="toggle"></label>
</div>
<span class="star-toggle far fa-star text-warning"></span>
<a href="" class="title">Google Drive Team</a>
</div>
<div class="col-mail col-mail-2">
<a href="" class="subject">You can now use your storage in Google
Drive – <span class="teaser">Hey Nicklas Sandell! Thank you for purchasing extra storage space in Google Drive.</span>
</a>
<div class="date">Feb 20</div>
</div>
</li>
<li class="unread">
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk18">
<label for="chk18" class="toggle"></label>
</div>
<span class="star-toggle far fa-star"></span>
<a href="" class="title">me, Susanna (11)</a>
</div>
<div class="col-mail col-mail-2">
<a href="" class="subject">Train/Bus – <span class="teaser">Yes ok, great! I'm not stuck in Stockholm anymore, we're making progress.</span>
</a>
<div class="date">Feb 19</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk19">
<label for="chk19" class="toggle"></label>
</div>
<span class="star-toggle far fa-star"></span>
<a href="" class="title">Peter, me (3)</a>
</div>
<div class="col-mail col-mail-2">
<a href="" class="subject">Hello – <span class="teaser">Trip home from Colombo has been arranged, then Jenna will come get me from Stockholm. :)</span>
</a>
<div class="date">Mar. 6</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk20">
<label for="chk20" class="toggle"></label>
</div>
<span class="star-toggle far fa-star"></span>
<a href="" class="title">me, Susanna (7)</a>
</div>
<div class="col-mail col-mail-2">
<a href="" class="subject">Since you asked... and i'm
inconceivably bored at the train station –
<span class="teaser">Alright thanks. I'll have to re-book that somehow, i'll get back to you.</span>
</a>
<div class="date">Mar. 6</div>
</div>
</li>
</ul>
</div>
<!-- end .mt-4 -->
<div class="row">
<div class="col-7 mt-1">
Showing 1 - 20 of 289
</div>
<!-- end col-->
<div class="col-5">
<div class="btn-group float-right">
<button type="button" class="btn btn-light btn-sm"><i class="mdi mdi-chevron-left"></i></button>
<button type="button" class="btn btn-info btn-sm"><i class="mdi mdi-chevron-right"></i></button>
</div>
</div>
<!-- end col-->
</div>
<!-- end row-->
</div>
<!-- end inbox-rightbar-->
<div class="clearfix"></div>
</div>
<!-- end card-box -->
</div>
<!-- end Col -->
</div>
</div>CSS code
Scoped CSS that styles the component. Paste it after Bootstrap 4.3.1 to keep the design, spacing, and responsiveness consistent.
Download
body{margin-top:20px;}
.inbox-leftbar {
width: 240px;
float: left;
padding: 0 20px 20px 10px
}
.inbox-rightbar {
margin: -1.5rem 0 -1.5rem 250px;
border-left: 5px solid #f0f0f0;
padding: 1.5rem 0 1.5rem 25px
}
.message-list {
display: block;
padding-left: 0
}
.message-list li {
position: relative;
display: block;
height: 51px;
line-height: 50px;
cursor: default;
-webkit-transition-duration: .3s;
transition-duration: .3s
}
.message-list li a {
color: #6c757d
}
.message-list li:hover {
background: #f6f6f6;
-webkit-transition-duration: .05s;
transition-duration: .05s
}
.message-list li .col-mail {
float: left;
position: relative
}
.message-list li .col-mail-1 {
width: 320px
}
.message-list li .col-mail-1 .checkbox-wrapper-mail,
.message-list li .col-mail-1 .dot,
.message-list li .col-mail-1 .star-toggle {
display: block;
float: left
}
.message-list li .col-mail-1 .dot {
border: 4px solid transparent;
border-radius: 100px;
margin: 22px 26px 0;
height: 0;
width: 0;
line-height: 0;
font-size: 0
}
.message-list li .col-mail-1 .checkbox-wrapper-mail {
margin: 15px 10px 0 20px
}
.message-list li .col-mail-1 .star-toggle {
margin-top: 18px;
color: #adb5bd;
margin-left: 10px
}
.message-list li .col-mail-1 .title {
position: absolute;
top: 0;
left: 100px;
right: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-bottom: 0;
line-height: 50px
}
.message-list li .col-mail-2 {
position: absolute;
top: 0;
left: 320px;
right: 0;
bottom: 0
}
.message-list li .col-mail-2 .date,
.message-list li .col-mail-2 .subject {
position: absolute;
top: 0
}
.message-list li .col-mail-2 .subject {
left: 0;
right: 110px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap
}
.message-list li .col-mail-2 .date {
right: 0;
width: 100px;
padding-left: 10px
}
.message-list li.active,
.message-list li.mail-selected {
background: #f6f6f6;
-webkit-transition-duration: .05s;
transition-duration: .05s
}
.message-list li.active,
.message-list li.active:hover {
-webkit-box-shadow: inset 3px 0 0 #00bcd4;
box-shadow: inset 3px 0 0 #00bcd4
}
.message-list li.unread a {
font-weight: 600;
color: #272e37
}
.message-list .checkbox-wrapper-mail {
cursor: pointer;
height: 20px;
width: 20px;
position: relative;
display: inline-block;
-webkit-box-shadow: inset 0 0 0 2px #ced4da;
box-shadow: inset 0 0 0 2px #ced4da;
border-radius: 3px
}
.message-list .checkbox-wrapper-mail input {
opacity: 0;
cursor: pointer
}
.message-list .checkbox-wrapper-mail input:checked~label {
opacity: 1
}
.message-list .checkbox-wrapper-mail label {
position: absolute;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
cursor: pointer;
background: #98a6ad;
opacity: 0;
margin-bottom: 0 !important;
-webkit-transition-duration: .05s;
transition-duration: .05s
}
.message-list .checkbox-wrapper-mail label:active {
background: #87949b
}
.mail-list a {
color: #6c757d;
padding: 7px 10px;
display: block
}
.mail-list a:hover {
color: #3f51b5
}
.reply-box {
border: 2px solid #f6f6f6
}
@media (max-width:648px) {
.inbox-leftbar {
width: 100%;
float: none
}
.inbox-rightbar {
margin-left: 0;
border: 0;
padding-left: 0
}
.message-list li .col-mail-1 .checkbox-wrapper-mail {
margin-left: 0
}
}
@media (max-width:520px) {
.inbox-rightbar>.btn-group {
margin-bottom: 10px
}
.message-list li .col-mail-1 {
width: 150px
}
.message-list li .col-mail-1 .title {
left: 80px
}
.message-list li .col-mail-2 {
left: 160px
}
.message-list li .col-mail-2 .date {
text-align: right;
padding-right: 10px;
padding-left: 20px
}
}
FAQ
How do I use this snippet?
Include Bootstrap 4.3.1, paste the HTML, add the CSS block, and include the JS (if any) to mirror the live preview.
Can I use it in commercial projects?
Yes. It’s free for personal and commercial work; check the snippets license for details.
Is it responsive?
Yes. It inherits the responsive grid and components from Bootstrap 4.3.1.
About this bootstrap example/template
This free Bootstrap 4.3.1 snippet, bs4 email inbox, was published on Dec 7th 2019, 10:50 by Bootdey Admin.
Optimized for copy‑paste: clean HTML, scoped CSS, and minimal JS so you can ship production‑ready UI faster and keep designs consistent.
Mobile‑first and responsive by default. Tested across modern browsers to reduce polish time on your project.
Already trusted in 685+ views. Reuse this snippet to speed up landing pages, dashboards, or onboarding flows.
Bootstrap 4.3.1
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'></script>
This code example is based on bootstrap 4.3.1 and the grid system of this framework
Responsive
Based on bootstrap framework makes all the layouts perfectly responsive for all devices
Crossbrowser compatibility
Tested on all major browsers, it works smoothly on all of them
semantic html 5
Built on html / css3 the code quality is really amazing
Simple Integration
This code example can be simply integrated on existing sites and new ones too, all you need to do is copy the code and start working