@digitallyhappy/backstrap

<!DOCTYPE html>  <html lang="en"> <head> <base href="./../"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta name="description" content="Backstrap - Open Source Bootstrap 4 Admin Template on top of CoreUI"> <meta name="author" content="Cristian Tabacitu"> <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard,CoreUI"> <title>BackStrap - Free Bootstrap 4 Admin Template</title>  <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet"> <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet"> <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet"> <link href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic" rel="stylesheet">  <link href="css/style.css" rel="stylesheet"> <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet"> </head> <body class="app aside-menu-fixed sidebar-lg-show"> <header class="app-header bg-light border-0 navbar"> <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto ml-3" type="button" data-toggle="sidebar-show"><span class="navbar-toggler-icon"></span></button><a class="navbar-brand" href="#"><b>Back</b><span>strap</span></a> <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show"><span class="navbar-toggler-icon"></span></button> <ul class="nav navbar-nav d-md-down-none"> <li class="nav-item px-3"><a class="nav-link" href="#">Dashboard</a></li> <li class="nav-item px-3"><a class="nav-link" href="#">Users</a></li> <li class="nav-item px-3"><a class="nav-link" href="#">Settings</a></li> </ul> <ul class="nav navbar-nav ml-auto"> <li class="nav-item d-md-down-none"><a class="nav-link" href="#"><i class="icon-bell"></i><span class="badge badge-pill badge-danger">5</span></a></li> <li class="nav-item d-md-down-none"><a class="nav-link" href="#"><i class="icon-list"></i></a></li> <li class="nav-item d-md-down-none"><a class="nav-link" href="#"><i class="icon-location-pin"></i></a></li> <li class="nav-item dropdown"><a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com"></a> <div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-header text-center"><strong>Account</strong></div><a class="dropdown-item" href="#"><i class="fa fa-bell-o"></i> Updates<span class="badge badge-info">42</span></a><a class="dropdown-item" href="#"><i class="fa fa-envelope-o"></i> Messages<span class="badge badge-success">42</span></a><a class="dropdown-item" href="#"><i class="fa fa-tasks"></i> Tasks<span class="badge badge-danger">42</span></a><a class="dropdown-item" href="#"><i class="fa fa-comments"></i> Comments<span class="badge badge-warning">42</span></a> <div class="dropdown-header text-center"><strong>Settings</strong></div><a class="dropdown-item" href="#"><i class="fa fa-user"></i> Profile</a><a class="dropdown-item" href="#"><i class="fa fa-wrench"></i> Settings</a><a class="dropdown-item" href="#"><i class="fa fa-usd"></i> Payments<span class="badge badge-secondary">42</span></a><a class="dropdown-item" href="#"><i class="fa fa-file"></i> Projects<span class="badge badge-primary">42</span></a> <div class="dropdown-divider"></div><a class="dropdown-item" href="#"><i class="fa fa-shield"></i> Lock Account</a><a class="dropdown-item" href="#"><i class="fa fa-lock"></i> Logout</a> </div> </li> </ul> <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show"><span class="navbar-toggler-icon"></span></button> <button class="navbar-toggler aside-menu-toggler d-lg-none mr-3" type="button" data-toggle="aside-menu-show"><span class="navbar-toggler-icon"></span></button> </header> <div class="app-body"> <div class="sidebar sidebar-pills bg-transparent"> <nav class="sidebar-nav"> <ul class="nav"> <li class="nav-item"><a class="nav-link" href="index.html"><i class="nav-icon la la-lg la-dashboard"></i> Dashboard</a></li> <li class="nav-title">Theme</li> <li class="nav-item"><a class="nav-link" href="colors.html"><i class="nav-icon la la-lg la-bullseye"></i> Colors</a></li> <li class="nav-item"><a class="nav-link" href="typography.html"><i class="nav-icon la la-lg la-pencil"></i> Typography</a></li> <li class="nav-title">Components</li> <li class="nav-item nav-dropdown"><a class="nav-link nav-dropdown-toggle" href="#"><i class="nav-icon la la-lg la-bank"></i> Base</a> <ul class="nav-dropdown-items"> <li class="nav-item"><a class="nav-link" href="base/breadcrumb.html"><i class="nav-icon la la-lg la-puzzle"></i> Breadcrumb</a></li> <li class="nav-item"><a class="nav-link" href="base/cards.html"><i class="nav-icon la la-lg la-puzzle"></i> Cards</a></li> <li class="nav-item"><a class="nav-link" href="base/carousel.html"><i class="nav-icon la la-lg la-puzzle"></i> Carousel</a></li> <li class="nav-item"><a class="nav-link" href="base/collapse.html"><i class="nav-icon la la-lg la-puzzle"></i> Collapse</a></li> <li class="nav-item"><a class="nav-link" href="base/forms.html"><i class="nav-icon la la-lg la-puzzle"></i> Forms</a></li> <li class="nav-item"><a class="nav-link" href="base/jumbotron.html"><i class="nav-icon la la-lg la-puzzle"></i> Jumbotron</a></li> <li class="nav-item"><a class="nav-link" href="base/list-group.html"><i class="nav-icon la la-lg la-puzzle"></i> List group</a></li> <li class="nav-item"><a class="nav-link" href="base/navs.html"><i class="nav-icon la la-lg la-puzzle"></i> Navs</a></li> <li class="nav-item"><a class="nav-link" href="base/pagination.html"><i class="nav-icon la la-lg la-puzzle"></i> Pagination</a></li> <li class="nav-item"><a class="nav-link" href="base/popovers.html"><i class="nav-icon la la-lg la-puzzle"></i> Popovers</a></li> <li class="nav-item"><a class="nav-link" href="base/progress.html"><i class="nav-icon la la-lg la-puzzle"></i> Progress</a></li> <li class="nav-item"><a class="nav-link" href="base/scrollspy.html"><i class="nav-icon la la-lg la-puzzle"></i> Scrollspy</a></li> <li class="nav-item"><a class="nav-link" href="base/switches.html"><i class="nav-icon la la-lg la-puzzle"></i> Switches</a></li> <li class="nav-item"><a class="nav-link" href="base/tables.html"><i class="nav-icon la la-lg la-puzzle"></i> Tables</a></li> <li class="nav-item"><a class="nav-link" href="base/tabs.html"><i class="nav-icon la la-lg la-puzzle"></i> Tabs</a></li> <li class="nav-item"><a class="nav-link" href="base/tooltips.html"><i class="nav-icon la la-lg la-puzzle"></i> Tooltips</a></li> </ul> </li> <li class="nav-item nav-dropdown"><a class="nav-link nav-dropdown-toggle" href="#"><i class="nav-icon la la-lg la-hand-pointer-o"></i> Buttons</a> <ul class="nav-dropdown-items"> <li class="nav-item"><a class="nav-link" href="buttons/buttons.html"><i class="nav-icon la la-lg la-cursor"></i> Buttons</a></li> <li class="nav-item"><a class="nav-link" href="buttons/button-group.html"><i class="nav-icon la la-lg la-cursor"></i> Buttons Group</a></li> <li class="nav-item"><a class="nav-link" href="buttons/dropdowns.html"><i class="nav-icon la la-lg la-cursor"></i> Dropdowns</a></li> <li class="nav-item"><a class="nav-link" href="buttons/brand-buttons.html"><i class="nav-icon la la-lg la-cursor"></i> Brand Buttons</a></li> </ul> </li> <li class="nav-item"><a class="nav-link" href="charts.html"><i class="nav-icon la la-lg la-pie-chart"></i> Charts</a></li> <li class="nav-item nav-dropdown"><a class="nav-link nav-dropdown-toggle" href="#"><i class="nav-icon la la-lg la-star"></i> Icons</a> <ul class="nav-dropdown-items"> <li class="nav-item"><a class="nav-link" href="icons/line-awesome.html"> Line Awesome<span class="badge badge-primary">NEW</span></a></li> <li class="nav-item"><a class="nav-link" href="icons/coreui-icons.html"> CoreUI Icons</a></li> <li class="nav-item"><a class="nav-link" href="icons/flags.html"> Flags</a></li> <li class="nav-item"><a class="nav-link" href="icons/font-awesome.html"> Font Awesome</a></li> <li class="nav-item"><a class="nav-link" href="icons/simple-line-icons.html"> Simple Line Icons</a></li> </ul> </li> <li class="nav-item nav-dropdown"><a class="nav-link nav-dropdown-toggle" href="#"><i class="nav-icon la la-lg la-bell"></i> Notifications</a> <ul class="nav-dropdown-items"> <li class="nav-item"><a class="nav-link" href="notifications/alerts.html"><i class="nav-icon la la-lg la-bell"></i> Alerts</a></li> <li class="nav-item"><a class="nav-link" href="notifications/badge.html"><i class="nav-icon la la-lg la-bell"></i> Badge</a></li> <li class="nav-item"><a class="nav-link" href="notifications/modals.html"><i class="nav-icon la la-lg la-bell"></i> Modals</a></li> </ul> </li> <li class="nav-item"><a class="nav-link" href="widgets.html"><i class="nav-icon la la-lg la-calculator"></i> Widgets</a></li> <li class="divider"></li> <li class="nav-title">Extras</li> <li class="nav-item nav-dropdown"><a class="nav-link nav-dropdown-toggle" href="#"><i class="nav-icon la la-lg la-file"></i> Pages</a> <ul class="nav-dropdown-items"> <li class="nav-item"><a class="nav-link" href="login.html" target="_top"><i class="nav-icon la la-lg la-star"></i> Login</a></li> <li class="nav-item"><a class="nav-link" href="register.html" target="_top"><i class="nav-icon la la-lg la-star"></i> Register</a></li> <li class="nav-item"><a class="nav-link" href="404.html" target="_top"><i class="nav-icon la la-lg la-star"></i> Error 404</a></li> <li class="nav-item"><a class="nav-link" href="500.html" target="_top"><i class="nav-icon la la-lg la-star"></i> Error 500</a></li> </ul> </li> </ul> </nav> </div> <main class="main">  <ol class="breadcrumb"> <li class="breadcrumb-item">Home</li> <li class="breadcrumb-item"><a href="#">Admin</a></li> <li class="breadcrumb-item active">Dashboard</li>  <li class="breadcrumb-menu d-md-down-none"> <div class="btn-group" role="group" aria-label="Button group"><a class="btn" href="#"><i class="icon-speech"></i></a><a class="btn" href="./"><i class="icon-graph"></i> Dashboard</a><a class="btn" href="#"><i class="icon-settings"></i> Settings</a></div> </li> </ol> <div class="container-fluid"> <div class="animated fadeIn"> <div class="row"> <div class="col-sm-12 col-xl-6"> <div class="card"> <div class="card-header"><i class="fa fa-align-justify"></i> Collapse <div class="card-header-actions"><a class="card-header-action" href="http://coreui.io/docs/components/bootstrap-collapse/" target="_blank"><small class="text-muted">docs</small></a></div> </div> <div class="card-body"> <p><a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Link with href</a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-target</button> </p> <div class="collapse" id="collapseExample"> <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div> </div> </div> </div> <div class="card"> <div class="card-header"><i class="fa fa-align-justify"></i> Collapse<small>multiple targets</small></div> <div class="card-body"> <p><a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle second element</button> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button> </p> <div class="row"> <div class="col-sm-12 col-md-6"> <div class="collapse multi-collapse" id="multiCollapseExample1"> <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div> </div> </div> <div class="col-sm-12 col-md-6"> <div class="collapse multi-collapse" id="multiCollapseExample2"> <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div> </div> </div> </div> </div> </div> </div> <div class="col-sm-12 col-xl-6"> <div class="card"> <div class="card-header"><i class="fa fa-align-justify"></i> Collapse<small>accordion</small></div> <div class="card-body"> <div id="accordion" role="tablist"> <div class="card mb-0"> <div class="card-header" id="headingOne" role="tab"> <h5 class="mb-0"><a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #1</a></h5> </div> <div class="collapse show" id="collapseOne" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> </div> </div> <div class="card mb-0"> <div class="card-header" id="headingTwo" role="tab"> <h5 class="mb-0"><a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #2</a></h5> </div> <div class="collapse" id="collapseTwo" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"> <div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> </div> </div> <div class="card mb-0"> <div class="card-header" id="headingThree" role="tab"> <h5 class="mb-0"><a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Collapsible Group Item #3</a></h5> </div> <div class="collapse" id="collapseThree" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"> <div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> </div> </div> </div> </div> </div> <div class="card"> <div class="card-header"><i class="fa fa-align-justify"></i> Collapse<small>custom accordion</small></div> <div class="card-body"> <div id="exampleAccordion" data-children=".item"> <div class="item"><a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion1" aria-expanded="true" aria-controls="exampleAccordion1">Toggle item</a> <div class="collapse show" id="exampleAccordion1" role="tabpanel"> <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.</p> </div> </div> <div class="item"><a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion2" aria-expanded="false" aria-controls="exampleAccordion2">Toggle item 2</a> <div class="collapse" id="exampleAccordion2" role="tabpanel"> <p class="mb-3">Donec at ipsum dignissim, rutrum turpis scelerisque, tristique lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec dui turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </main> <aside class="aside-menu"> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#timeline" role="tab"><i class="icon-list"></i></a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#messages" role="tab"><i class="icon-speech"></i></a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#settings" role="tab"><i class="icon-settings"></i></a></li> </ul>  <div class="tab-content"> <div class="tab-pane active" id="timeline" role="tabpanel"> <div class="list-group list-group-accent"> <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div> <div class="list-group-item list-group-item-accent-warning list-group-item-divider"> <div class="avatar float-right"><img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com"></div> <div>Meeting with<strong>Lucas</strong></div><small class="text-muted mr-3"><i class="icon-calendar"></i> 1 - 3pm</small><small class="text-muted"><i class="icon-location-pin"></i> Palo Alto, CA</small> </div> <div class="list-group-item list-group-item-accent-info"> <div class="avatar float-right"><img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com"></div> <div>Skype with<strong>Megan</strong></div><small class="text-muted mr-3"><i class="icon-calendar"></i> 4 - 5pm</small><small class="text-muted"><i class="icon-social-skype"></i> On-line</small> </div> <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div> <div class="list-group-item list-group-item-accent-danger list-group-item-divider"> <div>New UI Project -<strong>deadline</strong></div><small class="text-muted mr-3"><i class="icon-calendar"></i> 10 - 11pm</small><small class="text-muted"><i class="icon-home"></i> creativeLabs HQ</small> <div class="avatars-stack mt-2"> <div class="avatar avatar-xs"><img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com"></div> <div class="avatar avatar-xs"><img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com"></div> <div class="avatar avatar-xs"><img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com"></div> <div class="avatar avatar-xs"><img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com"></div> <div class="avatar avatar-xs"><img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com"></div> </div> </div> <div class="list-group-item list-group-item-accent-success list-group-item-divider"> <div><strong>#10 Startups.Garden</strong> Meetup</div><small class="text-muted mr-3"><i class="icon-calendar"></i> 1 - 3pm</small><small class="text-muted"><i class="icon-location-pin"></i> Palo Alto, CA</small> </div> <div class="list-group-item list-group-item-accent-primary list-group-item-divider"> <div><strong>Team meeting</strong></div><small class="text-muted mr-3"><i class="icon-calendar"></i> 4 - 6pm</small><small class="text-muted"><i class="icon-home"></i> creativeLabs HQ</small> <div class="avatars-stack mt-2"> <div class="avatar avatar-xs"><img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com"></div> <div class="avatar avatar-xs"><img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com"></div> <div class="avatar avatar-xs"><img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com"></div> <div class="avatar avatar-xs"><img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com"></div> <div class="avatar avatar-xs"><img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com"></div> <div class="avatar avatar-xs"><img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com"></div> <div class="avatar avatar-xs"><img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com"></div> </div> </div> </div> </div> <div class="tab-pane p-3" id="messages" role="tabpanel"> <div class="message"> <div class="py-3 pb-5 mr-3 float-left"> <div class="avatar"><img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com"><span class="avatar-status badge-success"></span></div> </div> <div><small class="text-muted">Lukasz Holeczek</small><small class="text-muted float-right mt-1">1:52 PM</small></div> <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div><small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small> </div> <hr> <div class="message"> <div class="py-3 pb-5 mr-3 float-left"> <div class="avatar"><img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com"><span class="avatar-status badge-success"></span></div> </div> <div><small class="text-muted">Lukasz Holeczek</small><small class="text-muted float-right mt-1">1:52 PM</small></div> <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div><small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small> </div> <hr> <div class="message"> <div class="py-3 pb-5 mr-3 float-left"> <div class="avatar"><img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com"><span class="avatar-status badge-success"></span></div> </div> <div><small class="text-muted">Lukasz Holeczek</small><small class="text-muted float-right mt-1">1:52 PM</small></div> <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div><small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small> </div> <hr> <div class="message"> <div class="py-3 pb-5 mr-3 float-left"> <div class="avatar"><img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com"><span class="avatar-status badge-success"></span></div> </div> <div><small class="text-muted">Lukasz Holeczek</small><small class="text-muted float-right mt-1">1:52 PM</small></div> <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div><small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small> </div> <hr> <div class="message"> <div class="py-3 pb-5 mr-3 float-left"> <div class="avatar"><img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com"><span class="avatar-status badge-success"></span></div> </div> <div><small class="text-muted">Lukasz Holeczek</small><small class="text-muted float-right mt-1">1:52 PM</small></div> <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div><small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small> </div> </div> <div class="tab-pane p-3" id="settings" role="tabpanel"> <h6>Settings</h6> <div class="aside-options"> <div class="clearfix mt-4"><small><b>Option 1</b></small> <label class="switch switch-label switch-pill switch-success switch-sm float-right"> <input class="switch-input" type="checkbox" checked=""><span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> </div> <div><small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small></div> </div> <div class="aside-options"> <div class="clearfix mt-3"><small><b>Option 2</b></small> <label class="switch switch-label switch-pill switch-success switch-sm float-right"> <input class="switch-input" type="checkbox"><span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> </div> <div><small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small></div> </div> <div class="aside-options"> <div class="clearfix mt-3"><small><b>Option 3</b></small> <label class="switch switch-label switch-pill switch-success switch-sm float-right"> <input class="switch-input" type="checkbox"><span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> </div> </div> <div class="aside-options"> <div class="clearfix mt-3"><small><b>Option 4</b></small> <label class="switch switch-label switch-pill switch-success switch-sm float-right"> <input class="switch-input" type="checkbox" checked=""><span class="switch-slider" data-checked="On" data-unchecked="Off"></span> </label> </div> </div> <hr> <h6>System Utilization</h6> <div class="text-uppercase mb-1 mt-4"><small><b>CPU Usage</b></small></div> <div class="progress progress-xs"> <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div><small class="text-muted">348 Processes. 1/4 Cores.</small> <div class="text-uppercase mb-1 mt-2"><small><b>Memory Usage</b></small></div> <div class="progress progress-xs"> <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div> </div><small class="text-muted">11444GB/16384MB</small> <div class="text-uppercase mb-1 mt-2"><small><b>SSD 1 Usage</b></small></div> <div class="progress progress-xs"> <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div> </div><small class="text-muted">243GB/256GB</small> <div class="text-uppercase mb-1 mt-2"><small><b>SSD 2 Usage</b></small></div> <div class="progress progress-xs"> <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div> </div><small class="text-muted">25GB/256GB</small> </div> </div> </aside> </div> <footer class="app-footer"> <div><a href="http://backstrap.net">BackStrap </a><span> © 2019 Cristian Tabacitu.</span></div> <div class="ml-auto"><span>Powered by </span><a href="https://coreui.io">CoreUI</a><span> & </span><a href="https://backpackforlaravel.com">Backpack for Laravel</a></div> </footer>  <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/popper.js/dist/umd/popper.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script src="node_modules/pace-progress/pace.min.js"></script> <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script> <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script> <script src="node_modules/pnotify/dist/iife/Pnotify.js"></script> <script src="node_modules/pnotify/dist/iife/PnotifyButtons.js"></script> <script src="node_modules/pnotify/dist/iife/PnotifyConfirm.js"></script> <script src="node_modules/pnotify/dist/iife/PnotifyMobile.js"></script> <script src="node_modules/pnotify/dist/iife/PnotifyNonBlock.js"></script> <script> PNotify.defaults.styling = 'bootstrap4'; </script> </body> </html>