HTML code
Clean, semantic HTML that powers this Bootstrap 4.4.1 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.
Download<div class="container-fluid">
<!-- Row -->
<div class="row">
<div class="col-xl-12 pa-0">
<div class="emailapp-wrap">
<div class="emailapp-sidebar" style="height: 483px;">
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;">
<div class="nicescroll-bar" tabindex="-50" style="overflow: hidden; width: auto; height: 100%; outline: none;">
<div class="emailapp-nav-wrap">
<a id="close_emailapp_sidebar" href="javascript:void(0)" class="close-emailapp-sidebar">
<span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="15 18 9 12 15 6"></polyline></svg></span>
</a>
<ul class="nav flex-column mail-category">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);">Inbox<span class="badge badge-primary">50</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);">Sent mail</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);">Important</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);">Draft<span class="badge badge-secondary">5</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);">Trash</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);">Chat</a>
</li>
</ul>
<button type="button" class="btn btn-teal btn-block mt-20 mb-20" data-toggle="modal" data-target="#exampleModalEmail">
Compose email
</button>
<ul class="nav flex-column mail-labels">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><span class="badge badge-primary badge-indicator"></span>clients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><span class="badge badge-danger badge-indicator"></span>personal</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><span class="badge badge-warning badge-indicator"></span>office</a>
</li>
</ul>
<hr>
<ul class="nav flex-column mail-settings">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="zmdi zmdi-settings"></i>settings</a>
</li>
</ul>
</div>
</div>
<div class="slimScrollBar" tabindex="-50" style="background: rgb(214, 217, 218); width: 6px; position: absolute; top: 0px; opacity: 0.8; display: none; border-radius: 0px; z-index: 99; right: 1px; height: 423.392px; outline: none;"></div>
<div class="slimScrollRail" style="width: 6px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div>
</div>
</div>
<div class="email-box">
<div class="emailapp-left">
<header>
<a href="javascript:void(0)" id="emailapp_sidebar_move" class="emailapp-sidebar-move">
<span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></span>
</a>
<span class="">Inbox</span>
<a href="javascript:void(0)" class="email-compose" data-toggle="modal" data-target="#exampleModalEmail">
<span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg></span>
</a>
</header>
<form role="search" class="email-search">
<div class="input-group">
<div class="input-group-prepend">
<span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></span>
</div>
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
<div class="emailapp-emails-list" style="height: 350px;">
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;">
<div class="nicescroll-bar" tabindex="-50" style="overflow: hidden; width: auto; height: 100%; outline: none;">
<a href="javascript:void(0);" class="media">
<div class="media-img-wrap">
<div class="avatar">
<img src="dist/img/avatar1.jpg" alt="user" class="avatar-img rounded-circle">
</div>
</div>
<div class="media-body">
<div>
<div class="email-head">Clay Masse (8)</div>
<div class="email-subject">Creation timelines for the standard lorem ipsum</div>
<div class="email-text">
<p>So how did the classical Latin become so incoherent? According to McClintock.</p>
</div>
</div>
<div>
<div class="last-email-details"><span class="badge badge-danger badge-indicator"></span> 2:30 PM</div>
<span class="email-star"><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span></span>
</div>
</div>
</a>
<div class="email-hr-wrap">
<hr>
</div>
<a href="javascript:void(0);" class="media">
<div class="media-img-wrap">
<div class="avatar">
<img src="dist/img/avatar2.jpg" alt="user" class="avatar-img rounded-circle">
</div>
</div>
<div class="media-body">
<div>
<div class="email-head">Evie Ono</div>
<div class="email-subject">McClintock wrote to Before & After to explain his discovery</div>
<div class="email-text">
<p>“What I find remarkable is that this text has been the industry's standard dummy text ever since some printer.</p>
</div>
</div>
<div>
<div class="last-email-details"><span class="badge badge-danger badge-indicator"></span> 2:30 PM</div>
<span class="email-star starred block"><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span></span>
</div>
</div>
</a>
<div class="email-hr-wrap">
<hr>
</div>
<a href="javascript:void(0);" class="media read-email">
<div class="media-img-wrap">
<div class="avatar">
<img src="dist/img/avatar3.jpg" alt="user" class="avatar-img rounded-circle">
</div>
</div>
<div class="media-body">
<div>
<div class="email-head">Madalyn Rascon (5)</div>
<div class="email-subject">Whether a medieval typesetter</div>
<div class="email-text">
<p>As an alternative theory, and because Latin scholars do this sort of thing someone tracked down a 1914 Latin edition of De Finibus which challenges.</p>
</div>
</div>
<div>
<div class="last-email-details"><span class="email-attachment-label"><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg></span></span><span class="badge badge-warning badge-indicator"></span> 2:30 PM</div>
<span class="email-star"><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span></span>
</div>
</div>
</a>
<div class="email-hr-wrap">
<hr>
</div>
<a href="javascript:void(0);" class="media active-email read-email">
<div class="media-img-wrap">
<div class="avatar">
<img src="dist/img/avatar4.jpg" alt="user" class="avatar-img rounded-circle">
</div>
</div>
<div class="media-body">
<div>
<div class="email-head">Mitsuko Heid (2)</div>
<div class="email-subject">Purposefully designed to have no meaning</div>
<div class="email-text">
<p>Don't bother typing “lorem ipsum” into Google translate. If you already tried, you may have gotten anything from "NATO" to "China"</p>
</div>
</div>
<div>
<div class="last-email-details"><span class="badge badge-primary badge-indicator"></span> 2:30 PM</div>
<span class="email-star starred block"><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span></span>
</div>
</div>
</a>
<div class="email-hr-wrap">
<hr>
</div>
<a href="javascript:void(0);" class="media">
<div class="media-img-wrap">
<div class="avatar">
<img src="dist/img/avatar5.jpg" alt="user" class="avatar-img rounded-circle">
</div>
</div>
<div class="media-body">
<div>
<div class="email-head">Ezequiel Merideth</div>
<div class="email-subject">Popularized in the 1960s</div>
<div class="email-text">
<p>The decade that brought us Star Trek and Doctor Who also resurrected Cicero—or at least what used to be Cicero</p>
</div>
</div>
<div>
<div class="last-email-details"><span class="email-attachment-label"><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg></span></span><span class="badge badge-warning badge-indicator"></span> 2:30 PM</div>
<span class="email-star"><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span></span>
</div>
</div>
</a>
<div class="email-hr-wrap">
<hr>
</div>
<a href="javascript:void(0);" class="media read-email">
<div class="media-img-wrap">
<div class="avatar">
<img src="dist/img/avatar6.jpg" alt="user" class="avatar-img rounded-circle">
</div>
</div>
<div class="media-body">
<div>
<div class="email-head">Jonnie Metoyer</div>
<div class="email-subject">Some claim lorem ipsum threatens</div>
<div class="email-text">
<p>Among design professionals, there's a bit of controversy surrounding the filler text. Controversy, as in Death to Lorem Ipsum.</p>
</div>
</div>
<div>
<div class="last-email-details"><span class="email-attachment-label"><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg></span></span><span class="badge badge-warning badge-indicator"></span> 2:30 PM</div>
<span class="email-star"><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span></span>
</div>
</div>
</a>
<div class="email-hr-wrap">
<hr>
</div>
<a href="javascript:void(0);" class="media read-email">
<div class="media-img-wrap">
<div class="avatar">
<img src="dist/img/avatar7.jpg" alt="user" class="avatar-img rounded-circle">
</div>
</div>
<div class="media-body">
<div>
<div class="email-head">Angelic Lauver (2)</div>
<div class="email-subject">Generally, lorem ipsum is best suited</div>
<div class="email-text">
<p> It's like the props in a furniture store—filler text makes it look like someone is home.</p>
</div>
</div>
<div>
<div class="last-email-details"><span class="email-attachment-label"><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg></span></span><span class="badge badge-warning badge-indicator"></span> 2:30 PM</div>
<span class="email-star"><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span></span>
</div>
</div>
</a>
<div class="email-hr-wrap">
<hr>
</div>
<a href="javascript:void(0);" class="media read-email">
<div class="media-img-wrap">
<div class="avatar">
<img src="dist/img/avatar8.jpg" alt="user" class="avatar-img rounded-circle">
</div>
</div>
<div class="media-body">
<div>
<div class="email-head">Prischila Shy</div>
<div class="email-subject">Coming full circle, the internet's remixing</div>
<div class="email-text">
<p>Of course, we'd be remiss not to include the veritable cadre of lorem ipsum knock offs featuring</p>
</div>
</div>
<div>
<div class="last-email-details"><span class="email-attachment-label"><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg></span></span><span class="badge badge-warning badge-indicator"></span> 2:30 PM</div>
<span class="email-star"><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span></span>
</div>
</div>
</a>
</div>
<div class="slimScrollBar" tabindex="-50" style="background: rgb(214, 217, 218); width: 6px; position: absolute; top: 187px; opacity: 0.8; display: none; border-radius: 0px; z-index: 99; right: 1px; height: 163.116px; outline: none;"></div>
<div class="slimScrollRail" style="width: 6px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div>
</div>
</div>
</div>
<div class="emailapp-right">
<header>
<a id="back_email_list" href="javascript:void(0)" class="back-email-list">
<span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="15 18 9 12 15 6"></polyline></svg></span>
</a>
<div class="email-options-wrap">
<a href="javascript:void(0)" class=""><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-printer"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg></span></a>
<a href="javascript:void(0)" class=""><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></span></a>
<a href="javascript:void(0)" class="text-smoke"><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg></span></a>
</div>
</header>
<div class="email-body" style="height: 411px;">
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;">
<div class="nicescroll-bar" tabindex="-50" style="overflow: hidden; width: auto; height: 100%; outline: none;">
<div>
<div class="email-subject-head">
<h4>Application for the post of Managing Director</h4>
<div class="d-flex align-items-center">
<span class="badge badge-secondary">inbox</span>
<a href="javascript:void(0)" class="email-star starred"><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span></a>
</div>
</div>
<hr class="mt-10 mb-20">
<div class="email-head">
<div class="media">
<div class="media-img-wrap">
<div class="avatar">
<img src="dist/img/avatar1.jpg" alt="user" class="avatar-img rounded-circle">
</div>
</div>
<div class="media-body">
<span class="text-capitalize sender-name d-inline-block">Evie ono</span>
<span class="sender-email d-inline-block">([email protected])</span>
<span class="d-block">
to
<span>me</span>
</span>
</div>
</div>
<div class="head-other-wrap">
<div class="d-inline-block mr-5">
<span class="d-inline-block">10:06 AM</span>
<span class="d-inline-block">(2 hours ago)</span>
</div>
<div class="d-inline-block dropdown">
<a class="dropdown-toggle no-caret" data-toggle="dropdown" href="#" aria-expanded="false" role="button"><i class="zmdi zmdi-more-vert"></i></a>
<div class="dropdown-menu bullet dropdown-menu-right" role="menu">
<a class="dropdown-item" href="javascript:void(0)" role="menuitem"><i class="icon wb-reply" aria-hidden="true"></i>Reply</a>
<a class="dropdown-item" href="javascript:void(0)" role="menuitem"><i class="icon wb-share" aria-hidden="true"></i>Forward</a>
<a class="dropdown-item" href="javascript:void(0)" role="menuitem"><i class="icon wb-trash" aria-hidden="true"></i>Delete</a>
</div>
</div>
</div>
</div>
<div class="email-text-wrap mt-30">
<span class="d-block email-title text-capitalize mb-30">dear sir,</span>
<p class="mb-30">Faucibus rutrum. Phasellus sodales vulputate urna, vel accumsan augue egestas ac. Donec vitae leo at sem lobortis porttitor eu consequat risus. Mauris sed congue orci. Donec ultrices faucibus rutrum. Phasellus sodales vulputate urna, vel accumsan augue egestas ac. Donec vitae leo at sem lobortis porttitor eu consequat risus.
</p>
<p>Donec vitae leo at sem lobortis porttitor eu consequat risus. Mauris sed congue orci.Mauris sed congue orci. Donec ultrices faucibus rutrum. Phasellus sodales vulputate urna, vel accumsan augue egestas ac</p>
<p class="mt-30">Thank you for your time.</p>
<div class="email-end-detail mt-35">
<span class="text-capitalize d-block">evie one</span>
<span class="d-block">+12 234 443</span>
<span class="d-block">[email protected]</span>
</div>
</div>
<hr class="hr-light">
<div class="email-attachment-wrap">
<div class="email-attachment-block">
<a href="javascript:void(0)">
<div class="card card-sm w-200p">
<div class="card-body d-flex align-items-center">
<img src="dist/img/jpgicon.png" class="d-inline-block mr-10" alt="attachicon">
<span class="d-inline-block mnw-0">
<span class="d-block file-name text-truncate">concept_design.jpg</span>
<small class="d-block file-size text-truncate">5.78 MB</small>
</span>
</div>
</div>
</a>
<a href="javascript:void(0)">
<div class="card card-sm w-200p">
<div class="card-body d-flex align-items-center">
<img src="dist/img/pdficon.png" class="d-inline-block mr-10" alt="attachicon">
<span class="d-inline-block mnw-0">
<span class="d-block file-name text-truncate">Design-titleccv.pdf</span>
<small class="d-block file-size text-truncate">2.1 MB</small>
</span>
</div>
</div>
</a>
</div>
<div class="d-flex ml-auto">
<a href="javascript:void(0)"><i class="zmdi zmdi-download"></i></a>
<a href="javascript:void(0)"><i class="zmdi zmdi-more"></i></a>
</div>
</div>
<hr class="hr-light">
<div class="email-reply-block">
Click here to <a href="javascript:void(0)" class="text-capitalize">reply</a> or <a href="javascript:void(0)" class="text-capitalize">forwrd</a>
</div>
</div>
</div>
<div class="slimScrollBar" tabindex="-50" style="background: rgb(214, 217, 218); width: 6px; position: absolute; top: 192px; opacity: 0.8; display: none; border-radius: 0px; z-index: 99; right: 1px; height: 219.663px; outline: none;"></div>
<div class="slimScrollRail" style="width: 6px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div>
</div>
</div>
</div>
</div>
<!-- Compose email -->
<div class="modal fade" id="exampleModalEmail" tabindex="-1" role="dialog" aria-labelledby="exampleModalEmail" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header bg-dark">
<h6 class="modal-title text-white" id="exampleModalPopoversLabel">New Email</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">To</span>
</div>
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">Cc / Bcc</span>
</div>
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">Subject</span>
</div>
<input type="text" class="form-control form-control-sm">
</div>
</div>
<div class="form-group">
<div class="tinymce-wrap">
<div id="mceu_15" class="mce-tinymce mce-container mce-panel" hidefocus="1" tabindex="-1" role="application" style="visibility: hidden; border-width: 1px; width: 100%;">
<div id="mceu_15-body" class="mce-container-body mce-stack-layout">
<div id="mceu_16" class="mce-top-part mce-container mce-stack-layout-item mce-first">
<div id="mceu_16-body" class="mce-container-body">
<div id="mceu_17" class="mce-container mce-menubar mce-toolbar mce-first" role="menubar" style="border-width: 0px 0px 1px;">
<div id="mceu_17-body" class="mce-container-body mce-flow-layout">
<div id="mceu_18" class="mce-widget mce-btn mce-menubtn mce-flow-layout-item mce-first mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_18" role="menuitem" aria-haspopup="true">
<button id="mceu_18-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">File</span> <i class="mce-caret"></i></button>
</div>
<div id="mceu_19" class="mce-widget mce-btn mce-menubtn mce-flow-layout-item mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_19" role="menuitem" aria-haspopup="true">
<button id="mceu_19-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">Edit</span> <i class="mce-caret"></i></button>
</div>
<div id="mceu_20" class="mce-widget mce-btn mce-menubtn mce-flow-layout-item mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_20" role="menuitem" aria-haspopup="true">
<button id="mceu_20-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">View</span> <i class="mce-caret"></i></button>
</div>
<div id="mceu_21" class="mce-widget mce-btn mce-menubtn mce-flow-layout-item mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_21" role="menuitem" aria-haspopup="true">
<button id="mceu_21-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">Insert</span> <i class="mce-caret"></i></button>
</div>
<div id="mceu_22" class="mce-widget mce-btn mce-menubtn mce-flow-layout-item mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_22" role="menuitem" aria-haspopup="true">
<button id="mceu_22-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">Format</span> <i class="mce-caret"></i></button>
</div>
<div id="mceu_23" class="mce-widget mce-btn mce-menubtn mce-flow-layout-item mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_23" role="menuitem" aria-haspopup="true">
<button id="mceu_23-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">Tools</span> <i class="mce-caret"></i></button>
</div>
<div id="mceu_24" class="mce-widget mce-btn mce-menubtn mce-flow-layout-item mce-last mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_24" role="menuitem" aria-haspopup="true">
<button id="mceu_24-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">Table</span> <i class="mce-caret"></i></button>
</div>
</div>
</div>
<div id="mceu_25" class="mce-toolbar-grp mce-container mce-panel mce-last" hidefocus="1" tabindex="-1" role="group">
<div id="mceu_25-body" class="mce-container-body mce-stack-layout">
<div id="mceu_26" class="mce-container mce-toolbar mce-stack-layout-item mce-first mce-last" role="toolbar">
<div id="mceu_26-body" class="mce-container-body mce-flow-layout">
<div id="mceu_27" class="mce-container mce-flow-layout-item mce-first mce-btn-group" role="group">
<div id="mceu_27-body">
<div id="mceu_0" class="mce-widget mce-btn mce-first mce-disabled" tabindex="-1" role="button" aria-label="Undo" aria-disabled="true">
<button id="mceu_0-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-undo"></i></button>
</div>
<div id="mceu_1" class="mce-widget mce-btn mce-last mce-disabled" tabindex="-1" role="button" aria-label="Redo" aria-disabled="true">
<button id="mceu_1-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-redo"></i></button>
</div>
</div>
</div>
<div id="mceu_28" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
<div id="mceu_28-body">
<div id="mceu_2" class="mce-widget mce-btn mce-menubtn mce-first mce-last mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_2" role="button" aria-haspopup="true">
<button id="mceu_2-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">Formats</span> <i class="mce-caret"></i></button>
</div>
</div>
</div>
<div id="mceu_29" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
<div id="mceu_29-body">
<div id="mceu_3" class="mce-widget mce-btn mce-first" tabindex="-1" aria-pressed="false" role="button" aria-label="Bold">
<button id="mceu_3-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-bold"></i></button>
</div>
<div id="mceu_4" class="mce-widget mce-btn mce-last" tabindex="-1" aria-pressed="false" role="button" aria-label="Italic">
<button id="mceu_4-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-italic"></i></button>
</div>
</div>
</div>
<div id="mceu_30" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
<div id="mceu_30-body">
<div id="mceu_5" class="mce-widget mce-btn mce-first" tabindex="-1" aria-pressed="false" role="button" aria-label="Align left">
<button id="mceu_5-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-alignleft"></i></button>
</div>
<div id="mceu_6" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Align center">
<button id="mceu_6-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-aligncenter"></i></button>
</div>
<div id="mceu_7" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Align right">
<button id="mceu_7-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-alignright"></i></button>
</div>
<div id="mceu_8" class="mce-widget mce-btn mce-last" tabindex="-1" aria-pressed="false" role="button" aria-label="Justify">
<button id="mceu_8-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-alignjustify"></i></button>
</div>
</div>
</div>
<div id="mceu_31" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
<div id="mceu_31-body">
<div id="mceu_9" class="mce-widget mce-btn mce-splitbtn mce-menubtn mce-first" role="button" aria-pressed="false" tabindex="-1" aria-label="Bullet list" aria-haspopup="true">
<button type="button" hidefocus="1" tabindex="-1"><i class="mce-ico mce-i-bullist"></i></button>
<button type="button" class="mce-open" hidefocus="1" tabindex="-1"> <i class="mce-caret"></i></button>
</div>
<div id="mceu_10" class="mce-widget mce-btn mce-splitbtn mce-menubtn" role="button" aria-pressed="false" tabindex="-1" aria-label="Numbered list" aria-haspopup="true">
<button type="button" hidefocus="1" tabindex="-1"><i class="mce-ico mce-i-numlist"></i></button>
<button type="button" class="mce-open" hidefocus="1" tabindex="-1"> <i class="mce-caret"></i></button>
</div>
<div id="mceu_11" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Decrease indent">
<button id="mceu_11-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-outdent"></i></button>
</div>
<div id="mceu_12" class="mce-widget mce-btn mce-last" tabindex="-1" role="button" aria-label="Increase indent">
<button id="mceu_12-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-indent"></i></button>
</div>
</div>
</div>
<div id="mceu_32" class="mce-container mce-flow-layout-item mce-last mce-btn-group" role="group">
<div id="mceu_32-body">
<div id="mceu_13" class="mce-widget mce-btn mce-first" tabindex="-1" aria-pressed="false" role="button" aria-label="Insert/edit link">
<button id="mceu_13-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-link"></i></button>
</div>
<div id="mceu_14" class="mce-widget mce-btn mce-last" tabindex="-1" aria-pressed="false" role="button" aria-label="Insert/edit image">
<button id="mceu_14-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-image"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="mceu_33" class="mce-edit-area mce-container mce-panel mce-stack-layout-item" hidefocus="1" tabindex="-1" role="group" style="border-width: 1px 0px 0px;">
<iframe id="mce_0_ifr" frameborder="0" allowtransparency="true" title="Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 300px; display: block;"></iframe>
</div>
<div id="mceu_34" class="mce-statusbar mce-container mce-panel mce-stack-layout-item mce-last" hidefocus="1" tabindex="-1" role="group" style="border-width: 1px 0px 0px;">
<div id="mceu_34-body" class="mce-container-body mce-flow-layout">
<div id="mceu_35" class="mce-path mce-flow-layout-item mce-first">
<div class="mce-path-item"> </div>
</div>
<div id="mceu_36" class="mce-flow-layout-item mce-resizehandle"><i class="mce-ico mce-i-resize"></i></div><span id="mceu_37" class="mce-branding mce-widget mce-label mce-flow-layout-item mce-last"> Powered by <a href="https://www.tinymce.com/?utm_campaign=editor_referral&utm_medium=poweredby&utm_source=tinymce" rel="noopener" target="_blank" role="presentation" tabindex="-1">tinymce</a></span></div>
</div>
</div>
</div>
<textarea class="tinymce" id="mce_0" aria-hidden="true" style="display: none;"></textarea>
</div>
</div>
<div class="form-group">
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="input-group-prepend">
<span class="input-group-text">Upload</span>
</div>
<div class="form-control text-truncate" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
<span class="input-group-append">
<span class=" btn btn-primary btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span>
<input type="file" name="...">
</span>
<a href="#" class="btn btn-secondary fileinput-exists" data-dismiss="fileinput">Remove</a>
</span>
</div>
</div>
<div class="form-group mb-0">
<button class="btn btn-primary" type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- /Compose email -->
</div>
</div>
</div>
<!-- /Row -->
</div>CSS code
Scoped CSS that styles the component. Paste it after Bootstrap 4.4.1 to keep the design, spacing, and responsiveness consistent.
Download/*Email UI*/
.emailapp-wrap {
position: relative;
}
.emailapp-wrap .emailapp-sidebar {
position: absolute;
width: 200px;
background: #f4f6f7;
left: 0;
z-index: 10;
border-right: 1px solid #eaecec;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.emailapp-wrap .emailapp-sidebar .emailapp-nav-wrap {
padding: 15px;
}
.emailapp-wrap .emailapp-sidebar .emailapp-nav-wrap .close-emailapp-sidebar {
display: none;
padding: 0 .5rem;
}
.emailapp-wrap .emailapp-sidebar .emailapp-nav-wrap .close-emailapp-sidebar > .feather-icon {
display: block;
}
.emailapp-wrap .emailapp-sidebar .emailapp-nav-wrap .nav.mail-category .nav-item .nav-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-transform: capitalize;
color: #5e7d8a;
}
.emailapp-wrap .emailapp-sidebar .emailapp-nav-wrap .nav.mail-category .nav-item .nav-link .badge {
margin-left: 10px;
}
.emailapp-wrap .emailapp-sidebar .emailapp-nav-wrap .nav.mail-category .nav-item.active .nav-link {
color: #324148;
}
.emailapp-wrap .emailapp-sidebar .emailapp-nav-wrap .nav.mail-labels .nav-item .nav-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #324148;
text-transform: capitalize;
}
.emailapp-wrap .emailapp-sidebar .emailapp-nav-wrap .nav.mail-labels .nav-item .nav-link .badge-indicator {
margin-right: 15px;
}
.emailapp-wrap .emailapp-sidebar .emailapp-nav-wrap .nav.mail-settings .nav-item .nav-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #5e7d8a;
text-transform: capitalize;
}
.emailapp-wrap .emailapp-sidebar .emailapp-nav-wrap .nav.mail-settings .nav-item .nav-link > i {
margin-right: 15px;
}
.emailapp-wrap .emailapp-sidebar .emailapp-nav-wrap hr {
margin-left: -20px;
margin-right: -20px;
}
.emailapp-wrap.emailapp-sidebar-toggle .emailapp-sidebar {
left: -200px;
}
.emailapp-wrap.emailapp-sidebar-toggle .email-box {
margin-left: 0;
}
.emailapp-wrap .email-box {
margin-left: 200px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.emailapp-wrap .email-box .email-star {
color: #5e7d8a;
}
.emailapp-wrap .email-box .email-star > .feather-icon {
display: block;
}
.emailapp-wrap .email-box .email-star > .feather-icon > svg {
height: 16px;
width: 16px;
}
.emailapp-wrap .email-box .email-star:hover {
color: #22af47;
}
.emailapp-wrap .email-box .email-star:hover > .feather-icon > svg {
fill: #22af47 !important;
}
.emailapp-wrap .email-box .email-star:hover > .feather-icon > svg polygon {
fill: #22af47 !important;
}
.emailapp-wrap .email-box .email-star.starred {
color: #22af47;
}
.emailapp-wrap .email-box .email-star.starred > .feather-icon > svg {
fill: #22af47 !important;
}
.emailapp-wrap .email-box .email-star.starred > .feather-icon > svg polygon {
fill: #22af47 !important;
}
.emailapp-wrap .email-box .emailapp-left {
-ms-flex: 0 0 40%;
flex: 0 0 40%;
max-width: 40%;
border-right: 1px solid #eaecec;
position: relative;
z-index: 4;
left: 0;
}
.emailapp-wrap .email-box .emailapp-left header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
height: 72px;
padding: 0 15px;
background: #fff;
border-bottom: 1px solid #eaecec;
color: #324148;
}
.emailapp-wrap .email-box .emailapp-left header span {
font-size: 20px;
font-weight: 600;
text-transform: capitalize;
}
.emailapp-wrap .email-box .emailapp-left header .emailapp-sidebar-move {
color: #5e7d8a;
}
.emailapp-wrap .email-box .emailapp-left header .feather-icon {
display: block;
}
.emailapp-wrap .email-box .emailapp-left .email-search {
width: 100%;
background: #f5f5f6;
padding: 10px 15px;
}
.emailapp-wrap .email-box .emailapp-left .email-search .input-group {
width: 100%;
}
.emailapp-wrap .email-box .emailapp-left .email-search .input-group .form-control,
.emailapp-wrap .email-box .emailapp-left .email-search .input-group .dd-handle {
padding-left: 36px;
border-radius: 50px;
border: none;
background: #fff;
}
.emailapp-wrap .email-box .emailapp-left .email-search .input-group .form-control:focus,
.emailapp-wrap .email-box .emailapp-left .email-search .input-group .dd-handle:focus {
border: none;
box-shadow: none;
background: #fff;
}
.emailapp-wrap .email-box .emailapp-left .email-search .input-group .input-group-prepend {
position: absolute;
left: 10px;
top: 0;
z-index: 4;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
pointer-events: none;
}
.emailapp-wrap .email-box .emailapp-left .email-search .input-group .input-group-prepend .feather-icon {
display: block;
color: #848d91;
}
.emailapp-wrap .email-box .emailapp-left .email-search .input-group .input-group-prepend .feather-icon > svg {
height: 18px;
width: 18px;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list {
background: #fff;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media {
padding: 12px 15px;
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
transition: 0.2s ease;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-img-wrap {
position: relative;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-img-wrap .avatar {
height: 45px;
width: 45px;
margin-right: 15px;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:First-child .email-head,
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:First-child .email-subject,
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:First-child .email-text > p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 300px;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:First-child .email-head {
text-transform: capitalize;
color: #324148;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:First-child .email-subject {
color: #00acf0;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:First-child .email-text > p {
font-size: 14px;
color: #5e7d8a;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:last-child .last-email-details {
font-size: 13px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:last-child .last-email-details .badge-indicator {
margin-right: 5px;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:last-child .last-email-details .email-attachment-label {
color: #5e7d8a;
margin-right: 5px;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:last-child .last-email-details .email-attachment-label .feather-icon {
display: block;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:last-child .last-email-details .email-attachment-label .feather-icon > svg {
height: 13px;
width: 13px;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:last-child .email-star {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: flex-end;
-webkit-justify-content: flex-end;
-ms-flex-pack: flex-end;
margin-top: 30px;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media:hover {
background: #f5f5f6;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media.read-email .media-body > div:first-child .email-subject {
color: #324148;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media.read-email .media-body > div:last-child .last-email-details {
color: #324148;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media.active-email {
background: #f5f5f6;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list .email-hr-wrap > hr {
margin: 0;
}
.emailapp-wrap .email-box .emailapp-right {
-ms-flex: 0 0 60%;
flex: 0 0 60%;
max-width: 60%;
}
.emailapp-wrap .email-box .emailapp-right header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
height: 72px;
padding: 0 15px;
background: #fff;
border-bottom: 1px solid #eaecec;
}
.emailapp-wrap .email-box .emailapp-right header .back-email-list {
display: none;
margin-right: 20px;
}
.emailapp-wrap .email-box .emailapp-right header .email-options-wrap {
margin-left: auto;
display: flex;
}
.emailapp-wrap .email-box .emailapp-right header .email-options-wrap > a {
margin-left: 25px;
display: inline-block;
}
.emailapp-wrap .email-box .emailapp-right header .email-options-wrap .feather-icon {
display: block;
}
.emailapp-wrap .email-box .emailapp-right .email-body {
background: #fff;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-subject-head {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-subject-head h4,
.emailapp-wrap .email-box .emailapp-right .email-body .email-subject-head > div {
margin-bottom: 10px;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-subject-head .email-star {
display: block;
text-align: right;
margin-left: 10px;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-head {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-head .sender-email {
font-size: 14px;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-head .media .media-img-wrap {
margin-right: 15px;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-head .media .media-img-wrap .avatar {
height: 45px;
width: 45px;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-head .media .media-body .sender-name {
color: #324148;
font-weight: 500;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-head .head-other-wrap span {
font-size: 13px;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-head .head-other-wrap a.dropdown-toggle {
color: #5e7d8a;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-text-wrap .email-end-detail > span:first-child {
color: #324148;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-attachment-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-attachment-wrap .email-attachment-block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: auto;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-attachment-wrap .email-attachment-block .file-name {
font-size: 15px;
font-weight: 500;
color: #324148;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-attachment-wrap .email-attachment-block .file-size {
color: #5e7d8a;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-attachment-wrap .email-attachment-block > a {
margin-right: 20px;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-attachment-wrap > div.d-flex > a {
font-size: 20px;
color: #5e7d8a;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-attachment-wrap > div.d-flex > a:first-child {
margin-right: 15px;
}
.emailapp-wrap .email-box .emailapp-right .email-body .nicescroll-bar > div {
padding: 15px;
}
@media (max-width: 1600px) {
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:first-child .email-head,
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:first-child .email-subject,
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:first-child .email-text > p {
max-width: 200px;
}
}
@media (max-width: 1400px) {
.emailapp-wrap .emailapp-sidebar {
left: -200px;
}
.emailapp-wrap .emailapp-sidebar .emailapp-nav-wrap .close-emailapp-sidebar {
display: block;
}
.emailapp-wrap.emailapp-sidebar-toggle .emailapp-sidebar {
left: 0;
}
.emailapp-wrap .email-box {
margin-left: 0;
}
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:first-child .email-head,
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:first-child .email-subject,
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:first-child .email-text > p {
max-width: 200px;
}
}
@media (max-width: 1024px) {
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:first-child .email-head,
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:first-child .email-subject,
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:first-child .email-text > p {
max-width: 450px;
}
.emailapp-wrap .email-box .emailapp-left,
.emailapp-wrap .email-box .emailapp-right {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
-webkit-transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
-moz-transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
}
.emailapp-wrap .email-box .emailapp-right {
right: -100%;
position: absolute;
top: 0;
}
.emailapp-wrap .email-box .emailapp-right header {
justify-content: start;
-webkit-justify-content: start;
-ms-flex-pack: start;
}
.emailapp-wrap .email-box .emailapp-right header .back-email-list {
display: block;
}
.emailapp-wrap.emailapp-slide .email-box .emailapp-left {
left: -100%;
}
.emailapp-wrap.emailapp-slide .email-box .emailapp-right {
right: 0;
}
}
@media (max-width: 768px) {
.emailapp-wrap .email-box .emailapp-right .email-body .email-subject-head {
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-subject-head h5 {
margin-bottom: 15px;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-head {
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.emailapp-wrap .email-box .emailapp-right .email-body .email-head .head-other-wrap {
margin-top: 10px;
}
}
@media (max-width: 576px) {
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:first-child .email-head,
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:first-child .email-subject,
.emailapp-wrap .email-box .emailapp-left .emailapp-emails-list a.media .media-body > div:first-child .email-text > p {
max-width: 160px;
}
}
FAQ
How do I use this snippet?
Include Bootstrap 4.4.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.4.1.
About this bootstrap example/template
This free Bootstrap 4.4.1 snippet, email ui, was published on Feb 25th 2020, 14:43 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 1.3K+ views. Reuse this snippet to speed up landing pages, dashboards, or onboarding flows.
Bootstrap 4.4.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.4.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