Bootstrap
Home
Docs
Examples
Icons
Themes
Blog
GitHub
GitHub
Twitter
Twitter
Open Collective
Open Collective
Download
Bootstrap
v5.0
v5 releases
Latest (5.2.x)
v5.1.x
v5.0.x
v4.6.x
v3.4.1
v2.3.2
All versions
Expand
Collapse
Find A Sapce
Vendor
Help
Q&A
Notifications
Clear All
Curabitur id eros quis nunc suscipit blandit.
Duis malesuada justo eu sapien elementum, in semper diam posuere.
Donec at nisi sit amet tortor commodo porttitor pretium a erat.
In gravida mauris et nisi
Praesent eu lacus in libero dictum fermentum.
Nunc fringilla lorem
Nullam euismod dolor ut quam interdum, at scelerisque ipsum imperdiet.
View all
Profile
Email
Logout
Compose
Compose New Message
Normal text
Normal text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Bold
Italic
Underline
Small
×
Insert link
Open link in new window
×
Insert image
<p>Your Message Here....</p> </div> <div class="form-group"> <div class="btn btn-info btn-file"> <i class="fa fa-paperclip"></i> Attachment <input type="file" name="attachment"> </div> <p class="help-block">Max. 32MB</p> </div> </div> <div class="modal-footer"> <div class="pull-right"> <button type="button" class="btn btn-default"><i class="fa fa-pencil"></i> Draft</button> <button type="submit" class="btn btn-success"><i class="fa fa-envelope-o"></i> Send</button> </div> <button type="reset" class="btn btn-danger"><i class="fa fa-times"></i> Discard</button> <button type="button" class="btn btn-danger text-start" data-bs-dismiss="modal">Close</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> <div class="box"> <div class="box-header with-border"> <h4 class="box-title">Folders</h4> <ul class="box-controls pull-right"> <li><a class="box-btn-slide" href="#"></a></li> </ul> </div> <div class="box-body no-padding mailbox-nav"> <ul class="nav nav-pills flex-column"> <li class="nav-item"><a class="nav-link active" href="javascript:void(0)"><i class="ion ion-ios-email-outline"></i> Inbox <span class="label label-success pull-right">12</span></a></li> <li class="nav-item"><a class="nav-link" href="javascript:void(0)"><i class="ion ion-paper-airplane"></i> Sent</a></li> <li class="nav-item"><a class="nav-link" href="javascript:void(0)"><i class="ion ion-email-unread"></i> Drafts</a></li> <li class="nav-item"><a class="nav-link" href="javascript:void(0)"><i class="ion ion-star"></i> Starred <span class="label label-warning pull-right">14</span></a> </li> <li class="nav-item"><a class="nav-link" href="javascript:void(0)"><i class="ion ion-trash-a"></i> Trash</a></li> </ul> </div> <!-- /.box-body --> </div> <!-- /. box --> <div class="box"> <div class="box-header with-border"> <h4 class="box-title">Labels</h4> <ul class="box-controls pull-right"> <li><a class="box-btn-slide" href="#"></a></li> </ul> </div> <div class="box-body no-padding mailbox-nav"> <ul class="nav nav-pills flex-column"> <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li> <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-circle-o text-warning"></i> Promotions</a></li> <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-circle-o text-info"></i> Social</a></li> </ul> </div> <!-- /.box-body --> </div> <!-- /.box --> <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 280px;"><div class="contact-bx" style="overflow: hidden; width: auto; height: 280px;"> <div class="media-list media-list-hover"> <div class="media py-10 px-0 align-items-center"> <a class="avatar avatar-lg status-success" href="#"> <img src="../images/avatar/1.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a href="#">Sarah Kortney</a> </p> </div> </div> <div class="media py-10 px-0 align-items-center"> <a class="avatar avatar-lg status-danger" href="#"> <img src="../images/avatar/2.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a href="#">Tommy Nash</a> </p> </div> </div> <div class="media py-10 px-0 align-items-center"> <a class="avatar avatar-lg status-warning" href="#"> <img src="../images/avatar/3.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a href="#">Kathryn Mengel</a> </p> </div> </div> <div class="media py-10 px-0 align-items-center"> <a class="avatar avatar-lg status-primary" href="#"> <img src="../images/avatar/4.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a href="#">Mayra Sibley</a> </p> </div> </div> <div class="media py-10 px-0 align-items-center"> <a class="avatar avatar-lg status-success" href="#"> <img src="../images/avatar/1.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a href="#">Tommy Nash</a> </p> </div> </div> <div class="media py-10 px-0 align-items-center"> <a class="avatar avatar-lg status-danger" href="#"> <img src="../images/avatar/2.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a href="#">Williemae Lagasse</a> </p> </div> </div> </div> </div><div class="slimScrollBar" style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.1; display: block; border-radius: 7px; z-index: 99; right: 1px; height: 192.157px;"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div></div> </div> <!-- /.col --> <div class="col-xl-6 col-lg-8 col-12"> <div class="box"> <div class="box-header with-border"> <h4 class="box-title">Inbox</h4> <div class="box-controls pull-right"> <div class="box-header-actions"> <div class="lookup lookup-sm lookup-right d-none d-lg-block"> <input type="text" name="s" placeholder="Search"> </div> </div> </div> </div> <!-- /.box-header --> <div class="box-body"> <div class="mailbox-controls"> <!-- Check all button --> <button type="button" class="btn btn-primary btn-sm checkbox-toggle"><i class="ion ion-android-checkbox-outline-blank"></i> </button> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm"><i class="ion ion-trash-a"></i></button> <button type="button" class="btn btn-primary btn-sm"><i class="ion ion-reply"></i></button> <button type="button" class="btn btn-primary btn-sm"><i class="ion ion-share"></i></button> </div> <!-- /.btn-group --> <div class="btn-group"> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <i class="ion ion-flag margin-r-5"></i> <span class="caret"></span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <i class="ion ion-folder margin-r-5"></i> <span class="caret"></span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> <!-- /.btn-group --> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-refresh"></i></button> <div class="pull-right"> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-chevron-left"></i></button> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-chevron-right"></i></button> </div> <!-- /.btn-group --> </div> <!-- /.pull-right --> </div> <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 540px;"><div class="mailbox-messages inbox-bx" style="overflow: hidden; width: auto; height: 540px;"> <div class="table-responsive"> <table class="table table-hover table-striped"> <tbody> <tr> <td><div class="icheckbox_flat-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="checkbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></td> <td> <p class="mailbox-name mb-0 fs-16 fw-600">Johen Doe</p> <a class="mailbox-subject" href="#"><b>Lorem Ipsum</b> - There are many variations of Ipsum available...</a> </td> <td class="mailbox-attachment"></td> <td class="mailbox-date">2:45 PM</td> </tr> <tr> <td><div class="icheckbox_flat-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="checkbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star-o text-yellow"></i></a></td> <td> <p class="mailbox-name mb-0 fs-16 fw-600">Johen Doe</p> <a class="mailbox-subject" href="#"><b>Lorem Ipsum</b> - There are many variations of Ipsum available...</a> </td> <td class="mailbox-attachment"><i class="fa fa-paperclip"></i></td> <td class="mailbox-date">2:45 PM</td> </tr> <tr> <td><div class="icheckbox_flat-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="checkbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star-o text-yellow"></i></a></td> <td> <p class="mailbox-name mb-0 fs-16 fw-600">Johen Doe</p> <a class="mailbox-subject" href="#"><b>Lorem Ipsum</b> - There are many variations of Ipsum available...</a> </td> <td class="mailbox-attachment"><i class="fa fa-paperclip"></i></td> <td class="mailbox-date">2:45 PM</td> </tr> <tr> <td><div class="icheckbox_flat-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="checkbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></td> <td> <p class="mailbox-name mb-0 fs-16 fw-600">Johen Doe</p> <a class="mailbox-subject" href="#"><b>Lorem Ipsum</b> - There are many variations of Ipsum available...</a> </td> <td class="mailbox-attachment"></td> <td class="mailbox-date">2:45 PM</td> </tr> <tr> <td><div class="icheckbox_flat-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="checkbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></td> <td> <p class="mailbox-name mb-0 fs-16 fw-600">Johen Doe</p> <a class="mailbox-subject" href="#"><b>Lorem Ipsum</b> - There are many variations of Ipsum available...</a> </td> <td class="mailbox-attachment"></td> <td class="mailbox-date">2:45 PM</td> </tr> <tr> <td><div class="icheckbox_flat-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="checkbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star-o text-yellow"></i></a></td> <td> <p class="mailbox-name mb-0 fs-16 fw-600">Johen Doe</p> <a class="mailbox-subject" href="#"><b>Lorem Ipsum</b> - There are many variations of Ipsum available...</a> </td> <td class="mailbox-attachment"><i class="fa fa-paperclip"></i></td> <td class="mailbox-date">2:45 PM</td> </tr> <tr> <td><div class="icheckbox_flat-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="checkbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star-o text-yellow"></i></a></td> <td> <p class="mailbox-name mb-0 fs-16 fw-600">Johen Doe</p> <a class="mailbox-subject" href="#"><b>Lorem Ipsum</b> - There are many variations of Ipsum available...</a> </td> <td class="mailbox-attachment"><i class="fa fa-paperclip"></i></td> <td class="mailbox-date">2:45 PM</td> </tr> <tr> <td><div class="icheckbox_flat-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="checkbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></td> <td> <p class="mailbox-name mb-0 fs-16 fw-600">Johen Doe</p> <a class="mailbox-subject" href="#"><b>Lorem Ipsum</b> - There are many variations of Ipsum available...</a> </td> <td class="mailbox-attachment"></td> <td class="mailbox-date">2:45 PM</td> </tr> </tbody> </table> </div> <!-- /.table --> </div><div class="slimScrollBar" style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.1; display: block; border-radius: 7px; z-index: 99; right: 1px; height: 481.188px;"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div></div> <!-- /.mail-box-messages --> </div> <!-- /.box-body --> <div class="box-footer"> <div class="mailbox-controls"> <!-- Check all button --> <button type="button" class="btn btn-primary btn-sm checkbox-toggle"><i class="ion ion-android-checkbox-outline-blank"></i> </button> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm"><i class="ion ion-trash-a"></i></button> <button type="button" class="btn btn-primary btn-sm"><i class="ion ion-reply"></i></button> <button type="button" class="btn btn-primary btn-sm"><i class="ion ion-share"></i></button> </div> <!-- /.btn-group --> <div class="btn-group"> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <i class="ion ion-flag margin-r-5"></i> <span class="caret"></span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <i class="ion ion-folder margin-r-5"></i> <span class="caret"></span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> <!-- /.btn-group --> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-refresh"></i></button> <div class="pull-right"> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-chevron-left"></i></button> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-chevron-right"></i></button> </div> <!-- /.btn-group --> </div> <!-- /.pull-right --> </div> </div> </div> <!-- /. box --> </div> <!-- /.col --> <div class="col-xl-4 col-12"> <div class="box"> <div class="box-body pt-10"> <div class="mailbox-read-info"> <h4>Your message title goes here</h4> </div> <div class="mailbox-read-info clearfix mb-20"> <div class="float-start me-10"><a href="#"><img src="../images/1.jpg" alt="user" width="40" class="rounded-circle"></a></div> <h5 class="no-margin"> Pavan kumar<br> <small>From: jonathan@domain.com</small> <span class="mailbox-read-time pull-right">22 JUL. 2019 08:03 PM</span></h5> </div> <!-- /.mailbox-read-info --> <div class="mailbox-controls with-border clearfix"> <div class="float-start"> <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="tooltip" title="" data-bs-original-title="Print"> <i class="fa fa-print"></i></button> </div> <div class="float-end"> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="tooltip" data-container="body" title="" data-bs-original-title="Delete"> <i class="fa fa-trash-o"></i></button> <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="tooltip" data-container="body" title="" data-bs-original-title="Reply"> <i class="fa fa-reply"></i></button> <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="tooltip" data-container="body" title="" data-bs-original-title="Forward"> <i class="fa fa-share"></i></button> </div> </div> <!-- /.btn-group --> </div> <!-- /.mailbox-controls --> <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 350px;"><div class="mailbox-read-message read-mail-bx" style="overflow: hidden; width: auto; height: 350px;"> <p>Dear USer,</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> <p>enean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar.</p> <p>Thanks,<br>Jane</p> </div><div class="slimScrollBar" style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.1; display: block; border-radius: 7px; z-index: 99; right: 1px; height: 269.824px;"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div></div> <!-- /.mailbox-read-message --> </div> <!-- /.box-body --> <div class="box-footer"> <h5><i class="fa fa-paperclip m-r-10 m-b-10"></i> Attachments <span>(3)</span></h5> <ul class="mailbox-attachments clearfix"> <li> <div class="mailbox-attachment-info"> <a href="#" class="mailbox-attachment-name"><i class="fa fa-paperclip"></i> Mag.pdf</a> <span class="mailbox-attachment-size"> 5,215 KB <a href="#" class="btn btn-primary btn-xs pull-right"><i class="fa fa-cloud-download"></i></a> </span> </div> </li> <li> <div class="mailbox-attachment-info"> <a href="#" class="mailbox-attachment-name"><i class="fa fa-paperclip"></i> Documents.docx</a> <span class="mailbox-attachment-size"> 2,145 KB <a href="#" class="btn btn-primary btn-xs pull-right"><i class="fa fa-cloud-download"></i></a> </span> </div> </li> </ul> </div> <!-- /.box-footer --> <div class="box-footer"> <div class="pull-right"> <button type="button" class="btn btn-success"><i class="fa fa-reply"></i> Reply</button> <button type="button" class="btn btn-info"><i class="fa fa-share"></i> Forward</button> </div> <button type="button" class="btn btn-danger"><i class="fa fa-trash-o"></i></button> <button type="button" class="btn btn-warning"><i class="fa fa-print"></i></button> </div> <!-- /.box-footer --> </div> <!-- /. box --> </div> <!-- /.col --> </div> </section> <!-- /.content --> </div> </div> <!-- /.content-wrapper --> <footer class="main-footer"> <div class="pull-right d-none d-sm-inline-block"> <ul class="nav nav-primary nav-dotted nav-dot-separated justify-content-center justify-content-md-end"> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)">FAQ</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Purchase Now</a> </li> </ul> </div> </footer> <!-- Control Sidebar --> <aside class="control-sidebar"> <div class="rpanel-title"><span class="pull-right btn btn-circle btn-danger" data-toggle="control-sidebar"><i class="ion ion-close text-white"></i></span> </div> <!-- Create the tabs --> <ul class="nav nav-tabs control-sidebar-tabs"> <li class="nav-item"><a href="#control-sidebar-home-tab" data-bs-toggle="tab" class="active"><i class="mdi mdi-message-text"></i></a></li> <li class="nav-item"><a href="#control-sidebar-settings-tab" data-bs-toggle="tab"><i class="mdi mdi-playlist-check"></i></a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <!-- Home tab content --> <div class="tab-pane active" id="control-sidebar-home-tab"> <div class="flexbox"> <a href="javascript:void(0)" class="text-grey"> <i class="ti-more"></i> </a> <p>Users</p> <a href="javascript:void(0)" class="text-end text-grey"><i class="ti-plus"></i></a> </div> <div class="lookup lookup-sm lookup-right d-none d-lg-block"> <input type="text" name="s" placeholder="Search" class="w-p100"> </div> <div class="media-list media-list-hover mt-20"> <div class="media py-10 px-0"> <a class="avatar avatar-lg status-success" href="#"> <img src="../images/avatar/1.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a class="hover-primary" href="#"><strong>Tyler</strong></a> </p> <p>Praesent tristique diam...</p> <span>Just now</span> </div> </div> <div class="media py-10 px-0"> <a class="avatar avatar-lg status-danger" href="#"> <img src="../images/avatar/2.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a class="hover-primary" href="#"><strong>Luke</strong></a> </p> <p>Cras tempor diam ...</p> <span>33 min ago</span> </div> </div> <div class="media py-10 px-0"> <a class="avatar avatar-lg status-warning" href="#"> <img src="../images/avatar/3.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a class="hover-primary" href="#"><strong>Evan</strong></a> </p> <p>In posuere tortor vel...</p> <span>42 min ago</span> </div> </div> <div class="media py-10 px-0"> <a class="avatar avatar-lg status-primary" href="#"> <img src="../images/avatar/4.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a class="hover-primary" href="#"><strong>Evan</strong></a> </p> <p>In posuere tortor vel...</p> <span>42 min ago</span> </div> </div> <div class="media py-10 px-0"> <a class="avatar avatar-lg status-success" href="#"> <img src="../images/avatar/1.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a class="hover-primary" href="#"><strong>Tyler</strong></a> </p> <p>Praesent tristique diam...</p> <span>Just now</span> </div> </div> <div class="media py-10 px-0"> <a class="avatar avatar-lg status-danger" href="#"> <img src="../images/avatar/2.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a class="hover-primary" href="#"><strong>Luke</strong></a> </p> <p>Cras tempor diam ...</p> <span>33 min ago</span> </div> </div> <div class="media py-10 px-0"> <a class="avatar avatar-lg status-warning" href="#"> <img src="../images/avatar/3.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a class="hover-primary" href="#"><strong>Evan</strong></a> </p> <p>In posuere tortor vel...</p> <span>42 min ago</span> </div> </div> <div class="media py-10 px-0"> <a class="avatar avatar-lg status-primary" href="#"> <img src="../images/avatar/4.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a class="hover-primary" href="#"><strong>Evan</strong></a> </p> <p>In posuere tortor vel...</p> <span>42 min ago</span> </div> </div> </div> </div> <!-- /.tab-pane --> <!-- Settings tab content --> <div class="tab-pane" id="control-sidebar-settings-tab"> <div class="flexbox"> <a href="javascript:void(0)" class="text-grey"> <i class="ti-more"></i> </a> <p>Todo List</p> <a href="javascript:void(0)" class="text-end text-grey"><i class="ti-plus"></i></a> </div> <ul class="todo-list mt-20"> <li class="py-15 px-5 by-1"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_1" class="filled-in"> <label for="basic_checkbox_1" class="mb-0 h-15"></label> <!-- todo text --> <span class="text-line">Nulla vitae purus</span> <!-- Emphasis label --> <small class="badge bg-danger"><i class="fa fa-clock-o"></i> 2 mins</small> <!-- General tools such as edit or delete--> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> <li class="py-15 px-5"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_2" class="filled-in"> <label for="basic_checkbox_2" class="mb-0 h-15"></label> <span class="text-line">Phasellus interdum</span> <small class="badge bg-info"><i class="fa fa-clock-o"></i> 4 hours</small> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> <li class="py-15 px-5 by-1"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_3" class="filled-in"> <label for="basic_checkbox_3" class="mb-0 h-15"></label> <span class="text-line">Quisque sodales</span> <small class="badge bg-warning"><i class="fa fa-clock-o"></i> 1 day</small> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> <li class="py-15 px-5"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_4" class="filled-in"> <label for="basic_checkbox_4" class="mb-0 h-15"></label> <span class="text-line">Proin nec mi porta</span> <small class="badge bg-success"><i class="fa fa-clock-o"></i> 3 days</small> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> <li class="py-15 px-5 by-1"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_5" class="filled-in"> <label for="basic_checkbox_5" class="mb-0 h-15"></label> <span class="text-line">Maecenas scelerisque</span> <small class="badge bg-primary"><i class="fa fa-clock-o"></i> 1 week</small> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> <li class="py-15 px-5"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_6" class="filled-in"> <label for="basic_checkbox_6" class="mb-0 h-15"></label> <span class="text-line">Vivamus nec orci</span> <small class="badge bg-info"><i class="fa fa-clock-o"></i> 1 month</small> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> <li class="py-15 px-5 by-1"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_7" class="filled-in"> <label for="basic_checkbox_7" class="mb-0 h-15"></label> <!-- todo text --> <span class="text-line">Nulla vitae purus</span> <!-- Emphasis label --> <small class="badge bg-danger"><i class="fa fa-clock-o"></i> 2 mins</small> <!-- General tools such as edit or delete--> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> <li class="py-15 px-5"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_8" class="filled-in"> <label for="basic_checkbox_8" class="mb-0 h-15"></label> <span class="text-line">Phasellus interdum</span> <small class="badge bg-info"><i class="fa fa-clock-o"></i> 4 hours</small> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> <li class="py-15 px-5 by-1"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_9" class="filled-in"> <label for="basic_checkbox_9" class="mb-0 h-15"></label> <span class="text-line">Quisque sodales</span> <small class="badge bg-warning"><i class="fa fa-clock-o"></i> 1 day</small> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> <li class="py-15 px-5"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_10" class="filled-in"> <label for="basic_checkbox_10" class="mb-0 h-15"></label> <span class="text-line">Proin nec mi porta</span> <small class="badge bg-success"><i class="fa fa-clock-o"></i> 3 days</small> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> </ul> </div> <!-- /.tab-pane --> </div> </aside> <!-- /.control-sidebar --> <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar --> <div class="control-sidebar-bg"></div> </div> <!-- ./wrapper --> <!-- ./side demo panel --> <div class="sticky-toolbar"> <a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="" class="waves-effect waves-light btn btn-success btn-flat mb-5 btn-sm" target="_blank" data-bs-original-title="Buy Now"> <span class="icon-Money"><span class="path1"></span><span class="path2"></span></span> </a> <a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="" class="waves-effect waves-light btn btn-danger btn-flat mb-5 btn-sm" target="_blank" data-bs-original-title="Portfolio"> <span class="icon-Image"></span> </a> <a id="chat-popup" href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="" class="waves-effect waves-light btn btn-warning btn-flat btn-sm" data-bs-original-title="Live Chat"> <span class="icon-Group-chat"><span class="path1"></span><span class="path2"></span></span> </a> </div> <!-- Sidebar --> <div id="chat-box-body"> <div id="chat-circle" class="waves-effect waves-circle btn btn-circle btn-lg btn-warning l-h-70"> <div id="chat-overlay"></div> <span class="icon-Group-chat fs-30"><span class="path1"></span><span class="path2"></span></span> </div> <div class="chat-box"> <div class="chat-box-header p-15 d-flex justify-content-between align-items-center"> <div class="btn-group"> <button class="waves-effect waves-circle btn btn-circle btn-primary-light h-40 w-40 rounded-circle l-h-45" type="button" data-bs-toggle="dropdown"> <span class="icon-Add-user fs-22"><span class="path1"></span><span class="path2"></span></span> </button> <div class="dropdown-menu min-w-200"> <a class="dropdown-item fs-16" href="#"> <span class="icon-Color me-15"></span> New Group</a> <a class="dropdown-item fs-16" href="#"> <span class="icon-Clipboard me-15"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></span> Contacts</a> <a class="dropdown-item fs-16" href="#"> <span class="icon-Group me-15"><span class="path1"></span><span class="path2"></span></span> Groups</a> <a class="dropdown-item fs-16" href="#"> <span class="icon-Active-call me-15"><span class="path1"></span><span class="path2"></span></span> Calls</a> <a class="dropdown-item fs-16" href="#"> <span class="icon-Settings1 me-15"><span class="path1"></span><span class="path2"></span></span> Settings</a> <div class="dropdown-divider"></div> <a class="dropdown-item fs-16" href="#"> <span class="icon-Question-circle me-15"><span class="path1"></span><span class="path2"></span></span> Help</a> <a class="dropdown-item fs-16" href="#"> <span class="icon-Notifications me-15"><span class="path1"></span><span class="path2"></span></span> Privacy</a> </div> </div> <div class="text-center flex-grow-1"> <div class="text-dark fs-18">Mayra Sibley</div> <div> <span class="badge badge-sm badge-dot badge-primary"></span> <span class="text-muted fs-12">Active</span> </div> </div> <div class="chat-box-toggle"> <button id="chat-box-toggle" class="waves-effect waves-circle btn btn-circle btn-danger-light h-40 w-40 rounded-circle l-h-45" type="button"> <span class="icon-Close fs-22"><span class="path1"></span><span class="path2"></span></span> </button> </div> </div> <div class="chat-box-body"> <div class="chat-box-overlay"> </div> <div class="chat-logs"> <div class="chat-msg user"> <div class="d-flex align-items-center"> <span class="msg-avatar"> <img src="../images/avatar/2.jpg" class="avatar avatar-lg" alt=""> </span> <div class="mx-10"> <a href="#" class="text-dark hover-primary fw-bold">Mayra Sibley</a> <p class="text-muted fs-12 mb-0">2 Hours</p> </div> </div> <div class="cm-msg-text"> Hi there, I'm Jesse and you? </div> </div> <div class="chat-msg self"> <div class="d-flex align-items-center justify-content-end"> <div class="mx-10"> <a href="#" class="text-dark hover-primary fw-bold">You</a> <p class="text-muted fs-12 mb-0">3 minutes</p> </div> <span class="msg-avatar"> <img src="../images/avatar/3.jpg" class="avatar avatar-lg" alt=""> </span> </div> <div class="cm-msg-text"> My name is Anne Clarc. </div> </div> <div class="chat-msg user"> <div class="d-flex align-items-center"> <span class="msg-avatar"> <img src="../images/avatar/2.jpg" class="avatar avatar-lg" alt=""> </span> <div class="mx-10"> <a href="#" class="text-dark hover-primary fw-bold">Mayra Sibley</a> <p class="text-muted fs-12 mb-0">40 seconds</p> </div> </div> <div class="cm-msg-text"> Nice to meet you Anne.<br>How can i help you? </div> </div> </div><!--chat-log --> </div> <div class="chat-input"> <form> <input type="text" id="chat-input" placeholder="Send a message..."> <button type="submit" class="chat-submit" id="chat-submit"> <span class="icon-Send fs-22"></span> </button> </form> </div> </div> </div> <!-- Page Content overlay --> <!-- Vendor JS --> <!-- Deposito Admin App --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </body> </html>
