Bootstrap snippet. bs4 email app

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

HTML code

This is the html code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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 &amp; Android - Need confirmation to start project execution<i class="unread">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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 &lt;paul.smith@domain.com&gt;</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 &amp; 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

This is the css code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

body{
    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%;
  }
}

Similar snippets

Bootstrap read email example

read email

Bootstrap email inbox card example

email inbox card

Bootstrap colored inbox mail list and compose example

colored inbox mail list and compose

Bootstrap bs4 email view example

bs4 email view

Bootstrap messages like material design example

messages like material design

Bootstrap bs4 compose email example

bs4 compose email

Bootstrap simple social network post example

simple social network post

Bootstrap bs4 payments profile example

bs4 payments profile

Comments

Bootstrap snippets. bs4 email app

About this bootstrap snippet

This bootstrap snippet, bs4 email app, was published on Jun 1st, 14:00 by Dey Dey and it is free.

We hope you will enjoy this awesome snippet and stay tuned for the latest updates, bootdey snippets are already used in thousands of blogs, websites and projects. We believe it will save your precious time and gives trendy look to your next web project.

We always try to offer the best beautiful and responsive source of Bootstrap code examples and components.

This snippet currectly have 1.7K views, Using this bootstrap snippet you have the following benefits:

Bootstrap 4.4.1

This snippet 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

Jquery plugins

Great built-in plugins with jquery framework, you can easy to change all declarations

semantic html 5

Built on html / css3 the code quality is really amazing

Simple Integration

This snippet can be simply integrated on existing sites and new ones too, all you need to do is copy the code and start working