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">
<div class="content-wrapper">
<!-- Content Place Here -->
<div class="email-app card-margin">
<div class="email-toolbars-wrapper">
<div class="toolbar-header">
<button type="button" class="btn btn-lg btn-block btn-compose-mail">
<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-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Compose Mail
</button>
</div>
<div class="toolbar-body">
<div class="toolbar-title">Folders</div>
<ul class="toolbar-menu">
<li class="active">
<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-mail">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
<a href="#">Inbox</a>
<span class="badge badge-sb-base">8</span>
</li>
<li>
<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-copy">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
<a href="#">Drafts</a>
</li>
<li>
<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-send">
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
<a href="#">Sent</a>
</li>
<li>
<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-alert-circle"
>
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12" y2="16"></line>
</svg>
<a href="#">Spam</a>
</li>
<li>
<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-2">
<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>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
<a href="#">Trash</a>
</li>
<li>
<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>
<a href="#">Starred</a>
</li>
</ul>
<div class="contact-header">
<div class="contact-left">
<h5 class="title">Contacts</h5>
<span class="badge badge-sb-success">10</span>
</div>
<div class="dropdown">
<button class="btn btn-sm btn-flash-primary" type="button" id="product-action-pane" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<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 toolbar-icon"
>
<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>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-item"><span class="dropdown-title">Action Pane</span></li>
<li class="dropdown-item">
<a class="dropdown-link" href="#">
<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>
Print
</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="#">
<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-delete"
>
<path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"></path>
<line x1="18" y1="9" x2="12" y2="15"></line>
<line x1="12" y1="9" x2="18" y2="15"></line>
</svg>
Remove
</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="#">
<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-send"
>
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
Send Email
</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="#">
<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-file-text"
>
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
<polyline points="10 9 9 9 8 9"></polyline>
</svg>
Export as PDF
</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="#">
<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-bookmark"
>
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
Save as Bookmark
</a>
</li>
</ul>
</div>
</div>
<ul class="contact-list">
<li class="contact-list-item">
<a href="#">
<span class="pro-pic">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Profile Picture" />
<i class="active"> </i>
</span>
<div class="user">
<p class="user-name">Poul Smith</p>
<p class="user-designation">Founder @ Maxx</p>
</div>
</a>
</li>
<li class="contact-list-item">
<a href="#">
<span class="pro-pic">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Support User" title="Support User" />
<i class="active"> </i>
</span>
<div class="user">
<p class="user-name">John Wick</p>
<p class="user-designation">CTO @ Lax</p>
</div>
</a>
</li>
<li class="contact-list-item">
<a href="#">
<span class="pro-pic">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Support User" title="Support User" />
<i class="busy"> </i>
</span>
<div class="user">
<p class="user-name">Susan Don</p>
<p class="user-designation">CEO @ Don Co.</p>
</div>
</a>
</li>
<li class="contact-list-item">
<a href="#">
<span class="pro-pic">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="profile pic" title="profile pic" />
<i class="busy"> </i>
</span>
<div class="user">
<p class="user-name">Sam Doe</p>
<p class="user-designation">Tech Lead @ Poll</p>
</div>
</a>
</li>
<li class="contact-list-item">
<a href="#">
<span class="pro-pic">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="Support User" title="Support User" />
<i class="inactive"> </i>
</span>
<div class="user">
<p class="user-name">John Smith</p>
<p class="user-designation">Founder @ Dove</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="email-list-wrapper">
<div class="email-list-header">
<div class="dropdown">
<button class="btn btn-sm btn-flash-border-base shadow-none dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Recent
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li class="dropdown-item"><a class="dropdown-link" href="#">Focused</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Others</a></li>
</ul>
</div>
</div>
<div id="email-app-body" class="email-list-scroll-container ps ps--active-y">
<ul class="email-list">
<li class="email-list-item">
<div class="recipient">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="Profile Picture" />
<a href="#" class="recipient-name">Pepper Potts</a>
</div>
<a href="#" class="email-subject">Food App IOS & Android - Need confirmation to start project execution<i class="unread"> </i></a>
<div class="email-footer">
<div class="email-action">
<a href="#" class="important">
<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-bookmark fill"
>
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
</a>
<a href="#" class="starred">
<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>
</a>
<a href="#" class="attachment">
<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>
</a>
</div>
<span class="email-time">11:50 AM</span>
</div>
</li>
<li class="email-list-item active">
<div class="recipient">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="Profile Picture" />
<a href="#" class="recipient-name">Poul Smith</a>
</div>
<a href="#" class="email-subject">Prepare Mockup as per the spec document and Submit by Monday!!!<i class="unread"> </i></a>
<div class="email-footer">
<div class="email-action">
<a href="#" class="important">
<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-bookmark"
>
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
</a>
<a href="#" class="starred">
<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 fill"
>
<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>
</a>
<a href="#" class="attachment">
<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>
</a>
</div>
<span class="email-time">11:50 AM</span>
</div>
</li>
<li class="email-list-item">
<div class="recipient">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Profile Picture" />
<a href="#" class="recipient-name">Edwin Jarvis</a>
</div>
<a href="#" class="email-subject">FixBazzar - Assign developer to develop project <i class="unread"> </i></a>
<div class="email-footer">
<div class="email-action">
<a href="#" class="important">
<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-bookmark fill"
>
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
</a>
<a href="#" class="starred">
<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>
</a>
<a href="#" class="attachment">
<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>
</a>
</div>
<span class="email-time">11:50 AM</span>
</div>
</li>
<li class="email-list-item">
<div class="recipient">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Profile Picture" />
<a href="#" class="recipient-name">Edwin Jarvis</a>
</div>
<a href="#" class="email-subject">Maxximo App - Request approved to deploy on server<i class="starred"> </i></a>
<div class="email-footer">
<div class="email-action">
<a href="#" class="important">
<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-bookmark"
>
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
</a>
<a href="#" class="starred">
<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 fill"
>
<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>
</a>
<a href="#" class="attachment">
<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>
</a>
</div>
<span class="email-time">11:50 AM</span>
</div>
</li>
<li class="email-list-item">
<div class="recipient">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="Profile Picture" />
<a href="#" class="recipient-name">Jim Ward</a>
</div>
<a href="#" class="email-subject">Invitation to join tech team meeting<i class="starred"> </i></a>
<div class="email-footer">
<div class="email-action">
<a href="#" class="important">
<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-bookmark fill"
>
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
</a>
<a href="#" class="starred">
<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 fill"
>
<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>
</a>
<a href="#" class="attachment">
<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>
</a>
</div>
<span class="email-time">11:50 AM</span>
</div>
</li>
<li class="email-list-item">
<div class="recipient">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Profile Picture" />
<a href="#" class="recipient-name">Jane Doe</a>
</div>
<a href="#" class="email-subject">DexLoop - Progress report<i class="starred"> </i></a>
<div class="email-footer">
<div class="email-action">
<a href="#" class="important">
<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-bookmark fill"
>
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
</a>
<a href="#" class="starred">
<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>
</a>
<a href="#" class="attachment">
<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>
</a>
</div>
<span class="email-time">11:50 AM</span>
</div>
</li>
</ul>
<div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div>
<div class="ps__rail-y" style="top: 0px; height: 911px; right: 0px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 772px;"></div></div>
</div>
</div>
<div class="email-desc-wrapper">
<div class="email-header">
<div class="email-date">Dec 1, 2019 12:02 PM</div>
<div class="email-subject">Prepare Mockup as per the spec document and Submit by Monday!!!</div>
<p class="recipient"><span>From:</span> Paul Smith <[email protected]></p>
</div>
<div class="email-body">
<p>Hi Jacob,</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan orci ac urna tristique luctus. Duis sollicitudin quam eu ante faucibus, in fringilla sem placerat. Praesent eget nisi quis mauris luctus dignissim.
Nullam vel commodo augue, vitae auctor odio. Sed vel placerat nisi. Aliquam erat volutpat. Etiam mattis nisl magna, vel laoreet dolor hendrerit ut.
</p>
<p>
Etiam condimentum accumsan ligula eu ornare. Ut bibendum, lacus et tempus molestie, eros velit tincidunt felis, in dictum dolor nulla non dolor. Nulla ut dui gravida, interdum massa non, egestas lacus. Praesent hendrerit
nisl pellentesque massa aliquam, nec ultrices risus condimentum.
</p>
<p>
Thanks & Regards <br />
Julian Cruise
</p>
</div>
<div class="email-attachment">
<div class="file-info">
<div class="file-size">
<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>Attachment (90 MB)</span>
</div>
<button class="btn btn-sm btn-soft-base">View All</button>
<button class="btn btn-sm btn-soft-success">Download All</button>
</div>
<ul class="attachment-list">
<li class="attachment-list-item"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Showcase" title="Showcase" /></li>
<li class="attachment-list-item"><img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Showcase" title="Showcase" /></li>
<li class="attachment-list-item"><img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Showcase" title="Showcase" /></li>
<li class="attachment-list-item"><img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="Showcase" title="Showcase" /></li>
<li class="attachment-list-item"><span class="text-base">30+</span></li>
</ul>
</div>
<div class="email-action">
<button class="btn btn-base">Reply <i class="fa fa-reply"></i></button>
<button class="btn btn-info"><i class="fa fa-share"></i> Forward</button>
</div>
</div>
</div>
</div>
</div>
CSS code
Scoped CSS that styles the component. Paste it after Bootstrap 4.4.1 to keep the design, spacing, and responsiveness consistent.
Downloadbody{
background:#DCDCDC;
margin-top:20px;
}
.email-app {
display: flex;
}
.email-app .email-toolbars-wrapper {
background-color: #ffffff;
width: 20%;
margin-right: 1.5rem;
border-radius: 4px;
box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
-webkit-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
-moz-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
-ms-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
}
.email-app .email-toolbars-wrapper .toolbar-header {
padding: 1rem;
flex-flow: row;
display: flex;
align-items: center;
}
.email-app .email-toolbars-wrapper .toolbar-header .btn-compose-mail {
background: #F4F7FD;
font-weight: 300;
letter-spacing: .5px;
border: none;
transition: all, 0.3s;
color: #ffffff;
background-image: -webkit-linear-gradient(left, #22b9ff 0%, rgba(34, 185, 255, 0.7) 100%);
background-image: -o-linear-gradient(left, #22b9ff 0%, rgba(34, 185, 255, 0.7) 100%);
background-image: linear-gradient(to right, #22b9ff 0%, rgba(34, 185, 255, 0.7) 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF22B9FF', endColorstr='#B322B9FF', GradientType=1);
}
@media (prefers-reduced-motion: reduce) {
.email-app .email-toolbars-wrapper .toolbar-header .btn-compose-mail {
transition: none;
}
}
.email-app .email-toolbars-wrapper .toolbar-header .btn-compose-mail svg {
color: #ffffff;
width: 22px;
height: 22px;
}
.email-app .email-toolbars-wrapper .toolbar-header .btn-compose-mail:hover {
box-shadow: 0px 1px 6px 0px rgba(34, 185, 255, 0.75);
}
.email-app .email-toolbars-wrapper .toolbar-body .toolbar-title {
color: #727686;
padding: 0 1rem .5rem 1rem;
}
.email-app .email-toolbars-wrapper .toolbar-body .toolbar-menu {
padding: 0;
margin-bottom: 1rem;
height: auto;
list-style-type: none;
}
.email-app .email-toolbars-wrapper .toolbar-body .toolbar-menu li {
display: flex;
align-items: center;
padding: .5rem 1rem;
transition: 0.4s;
position: relative;
}
.email-app .email-toolbars-wrapper .toolbar-body .toolbar-menu li:hover {
color: #22b9ff;
}
.email-app .email-toolbars-wrapper .toolbar-body .toolbar-menu li:hover a {
color: #22b9ff;
font-weight: 600;
}
.email-app .email-toolbars-wrapper .toolbar-body .toolbar-menu li svg {
margin-right: 0.625rem;
width: 1rem;
height: 1rem;
line-height: 1.5;
}
.email-app .email-toolbars-wrapper .toolbar-body .toolbar-menu li a {
flex: 1;
color: #394044;
font-size: 14px;
text-decoration: none;
transition: all, 0.3s;
}
@media (prefers-reduced-motion: reduce) {
.email-app .email-toolbars-wrapper .toolbar-body .toolbar-menu li a {
transition: none;
}
}
.email-app .email-toolbars-wrapper .toolbar-body .toolbar-menu li.active a {
color: #22b9ff;
font-weight: 600;
}
.email-app .email-toolbars-wrapper .toolbar-body .toolbar-menu li.active svg {
color: #22b9ff;
}
.email-app .email-toolbars-wrapper .toolbar-body .contact-header {
padding: 1rem;
justify-content: space-between;
display: flex;
align-items: center;
}
.email-app .email-toolbars-wrapper .toolbar-body .contact-header .contact-left {
display: flex;
align-items: center;
}
.email-app .email-toolbars-wrapper .toolbar-body .contact-header .contact-left .title {
margin: 0 1rem 0 0;
}
.email-app .email-toolbars-wrapper .toolbar-body .contact-header .dropdown {
float: right;
}
.email-app .email-toolbars-wrapper .toolbar-body .contact-list {
padding: 0 1rem;
list-style-type: none;
}
.email-app .email-toolbars-wrapper .toolbar-body .contact-list .contact-list-item {
padding: .625rem 0;
display: block;
}
.email-app .email-toolbars-wrapper .toolbar-body .contact-list .contact-list-item:last-child {
border-bottom: 0;
}
.email-app .email-toolbars-wrapper .toolbar-body .contact-list .contact-list-item a {
text-decoration: none;
}
.email-app .email-toolbars-wrapper .toolbar-body .contact-list .contact-list-item a .pro-pic {
flex-shrink: 0;
display: flex;
align-items: center;
padding: 0;
width: 20%;
max-width: 40px;
position: relative;
}
.email-app .email-toolbars-wrapper .toolbar-body .contact-list .contact-list-item a .pro-pic img {
max-width: 100%;
width: 100%;
border-radius: 100%;
}
.email-app .email-toolbars-wrapper .toolbar-body .contact-list .contact-list-item a .pro-pic .active {
width: 12px;
height: 12px;
background: #17d1bd;
border-radius: 100%;
position: absolute;
top: 6px;
right: -4px;
border: 2px solid #ffffff;
}
.email-app .email-toolbars-wrapper .toolbar-body .contact-list .contact-list-item a .pro-pic .inactive {
width: 12px;
height: 12px;
background: #dde1e9;
border-radius: 100%;
position: absolute;
top: 6px;
right: -4px;
border: 2px solid #ffffff;
}
.email-app .email-toolbars-wrapper .toolbar-body .contact-list .contact-list-item a .pro-pic .busy {
width: 12px;
height: 12px;
background: #F95062;
border-radius: 100%;
position: absolute;
top: 6px;
right: -4px;
border: 2px solid #ffffff;
}
.email-app .email-toolbars-wrapper .toolbar-body .contact-list .contact-list-item a .user {
width: 100%;
padding: 5px 10px 0 15px;
}
.email-app .email-toolbars-wrapper .toolbar-body .contact-list .contact-list-item a .user .user-name {
margin: 0;
font-weight: 400;
font-size: 13px;
line-height: 1;
color: #394044;
}
.email-app .email-toolbars-wrapper .toolbar-body .contact-list .contact-list-item a .user .user-designation {
font-size: 12px;
color: #727686;
overflow: hidden;
max-width: 100%;
white-space: nowrap;
margin-bottom: 0;
}
.email-app .email-list-wrapper {
width: 30%;
margin-right: 1.5rem;
}
.email-app .email-list-wrapper .email-list-scroll-container {
height: 100vh;
position: relative;
}
.email-app .email-list-wrapper .email-list-header {
padding: 1rem 0;
flex-direction: row;
justify-content: space-between;
display: flex;
align-items: center;
}
.email-app .email-list-wrapper .email-list {
height: calc(100vh - 70px);
list-style-type: none;
padding: 0;
}
.email-app .email-list-wrapper .email-list .email-list-item {
margin-bottom: 1.2rem;
background-color: #ffffff;
padding: 1rem;
display: flex;
flex-direction: column;
text-decoration: none;
border-radius: 4px;
box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
-webkit-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
-moz-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
-ms-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
}
.email-app .email-list-wrapper .email-list .email-list-item.active {
border: 1.5px solid #22b9ff;
}
.email-app .email-list-wrapper .email-list .email-list-item .recipient {
display: flex;
align-items: center;
flex-shrink: 0;
padding: 0;
margin-bottom: .7rem;
}
.email-app .email-list-wrapper .email-list .email-list-item .recipient img {
margin-right: .5rem;
width: 40px;
height: 40px;
border-radius: 100%;
}
.email-app .email-list-wrapper .email-list .email-list-item .recipient .recipient-name {
font-weight: 500;
font-size: 14px;
line-height: 1;
color: #727686;
}
.email-app .email-list-wrapper .email-list .email-list-item .recipient .recipient-name:hover {
color: #22b9ff;
text-decoration: none;
}
.email-app .email-list-wrapper .email-list .email-list-item .email-subject {
display: flex;
align-items: center;
justify-content: space-between;
color: #394044;
font-size: 1rem;
font-weight: 400;
margin-bottom: .7rem;
text-decoration: none;
line-height: 1.5;
transition: all, 0.3s;
}
@media (prefers-reduced-motion: reduce) {
.email-app .email-list-wrapper .email-list .email-list-item .email-subject {
transition: none;
}
}
.email-app .email-list-wrapper .email-list .email-list-item .email-subject .unread {
flex-shrink: 0;
margin-left: 1rem;
width: .5rem;
height: .5rem;
border-radius: 100%;
display: block;
background: #22b9ff;
}
.email-app .email-list-wrapper .email-list .email-list-item .email-subject:hover {
color: #22b9ff;
}
.email-app .email-list-wrapper .email-list .email-list-item .email-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.email-app .email-list-wrapper .email-list .email-list-item .email-footer .email-action a {
margin-right: .5rem;
transition: all, 0.3s;
}
@media (prefers-reduced-motion: reduce) {
.email-app .email-list-wrapper .email-list .email-list-item .email-footer .email-action a {
transition: none;
}
}
.email-app .email-list-wrapper .email-list .email-list-item .email-footer .email-action a.starred {
color: #fd7e14;
}
.email-app .email-list-wrapper .email-list .email-list-item .email-footer .email-action a.starred .fill {
stroke-width: 1px;
fill: #fd7e14;
color: #fd7e14;
}
.email-app .email-list-wrapper .email-list .email-list-item .email-footer .email-action a.important {
color: #ffc107;
}
.email-app .email-list-wrapper .email-list .email-list-item .email-footer .email-action a.important .fill {
stroke-width: 1px;
fill: #ffc107;
color: #ffc107;
}
.email-app .email-list-wrapper .email-list .email-list-item .email-footer .email-action a.attachment {
color: #727686;
}
.email-app .email-list-wrapper .email-list .email-list-item .email-footer .email-action a.attachment:hover {
color: #22b9ff;
text-decoration: none;
}
.email-app .email-list-wrapper .email-list .email-list-item .email-footer .email-action a svg {
width: 20px;
height: 20px;
}
.email-app .email-list-wrapper .email-list .email-list-item .email-footer .email-time {
color: #B1BAC5;
}
.email-app .email-desc-wrapper {
width: 50%;
background-color: #ffffff;
padding: 2rem;
border-radius: 4px;
box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
-webkit-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
-moz-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
-ms-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
}
.email-app .email-desc-wrapper .email-header {
margin-bottom: 1.5rem;
}
.email-app .email-desc-wrapper .email-header .email-date {
color: #727686;
font-size: 13px;
margin-bottom: .5rem;
}
.email-app .email-desc-wrapper .email-header .email-subject {
color: #394044;
font-size: 1.2rem;
line-height: 1.5;
font-weight: 500;
margin-bottom: .8rem;
flex-shrink: 0;
}
.email-app .email-desc-wrapper .email-header .recipient {
margin: 0;
font-size: 14px;
line-height: 1;
color: #727686;
}
.email-app .email-desc-wrapper .email-header .recipient span {
font-weight: 500;
color: #394044;
}
.email-app .email-desc-wrapper .email-body {
min-height: 350px;
color: #727686;
margin-bottom: 2rem;
}
.email-app .email-desc-wrapper .email-body p {
font-size: 13px;
margin-bottom: 1rem;
line-height: 2;
}
.email-app .email-desc-wrapper .email-attachment {
margin-bottom: 2rem;
}
.email-app .email-desc-wrapper .email-attachment .file-info {
margin-bottom: 1rem;
display: flex;
align-items: center;
}
.email-app .email-desc-wrapper .email-attachment .file-info .file-size {
color: #B1BAC5;
margin-right: .5rem;
display: flex;
align-items: center;
}
.email-app .email-desc-wrapper .email-attachment .file-info .file-size svg {
width: 20px;
height: 20px;
margin-right: .5rem;
}
.email-app .email-desc-wrapper .email-attachment .file-info .btn, .email-app .email-desc-wrapper .email-attachment .file-info .wizard > .actions a, .wizard > .actions .email-app .email-desc-wrapper .email-attachment .file-info a, .email-app .email-desc-wrapper .email-attachment .file-info .fc button, .fc .email-app .email-desc-wrapper .email-attachment .file-info button {
font-size: 13px;
margin-right: .5rem;
padding: 0.1875rem .7rem;
box-shadow: none;
}
.email-app .email-desc-wrapper .email-attachment .attachment-list {
padding: 0;
height: 100%;
}
.email-app .email-desc-wrapper .email-attachment .attachment-list .attachment-list-item {
display: inline-block;
text-align: center;
vertical-align: middle;
width: 80px;
height: 80px;
overflow: hidden;
margin: 0 .5rem .5rem 0;
background-color: #d3f1ff;
border-radius: 4px;
}
.email-app .email-desc-wrapper .email-attachment .attachment-list .attachment-list-item span {
height: 80px;
display: table-cell;
vertical-align: middle;
width: 80px;
font-weight: 300;
font-size: 1.5rem;
}
.email-app .email-desc-wrapper .email-attachment .attachment-list .attachment-list-item img {
width: 100%;
height: 100%;
}
.email-app .email-desc-wrapper .email-attachment .attachment-list .attachment-list-item:hover {
cursor: pointer;
}
.email-app .email-desc-wrapper .email-action .btn, .email-app .email-desc-wrapper .email-action .wizard > .actions a, .wizard > .actions .email-app .email-desc-wrapper .email-action a, .email-app .email-desc-wrapper .email-action .fc button, .fc .email-app .email-desc-wrapper .email-action button {
margin-right: .7rem;
}
.email-app .email-desc-wrapper .email-action .btn:first-child i, .email-app .email-desc-wrapper .email-action .wizard > .actions a:first-child i, .wizard > .actions .email-app .email-desc-wrapper .email-action a:first-child i, .email-app .email-desc-wrapper .email-action .fc button:first-child i, .fc .email-app .email-desc-wrapper .email-action button:first-child i {
font-size: 13px;
margin-left: .5rem;
}
.email-app .email-desc-wrapper .email-action .btn:last-child i, .email-app .email-desc-wrapper .email-action .wizard > .actions a:last-child i, .wizard > .actions .email-app .email-desc-wrapper .email-action a:last-child i, .email-app .email-desc-wrapper .email-action .fc button:last-child i, .fc .email-app .email-desc-wrapper .email-action button:last-child i {
font-size: 13px;
margin-right: .5rem;
}
@media (max-width: 575px) {
.email-app .email-toolbars-wrapper,
.email-app .email-desc-wrapper {
display: none;
}
.email-app .email-list-wrapper {
width: 100%;
margin: 0;
}
}
@media (min-width: 600px) and (max-width: 1024px) {
.email-app .email-toolbars-wrapper {
display: none;
}
.email-app .email-desc-wrapper {
width: 60%;
}
.email-app .email-list-wrapper {
width: 40%;
}
}
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, bs4 email app, was published on Jun 1st 2020, 14:00 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 20.6K+ 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