Level 50
If you want to hide a sidebar for a specific URL which displays a specific view then you can try this method
@if(!(Request::is('your/url/path/which-youhave-tohide'))
Your SIde bar code or your sidebar
@endif
Jun 7, 2022
5
Level 1
Removing sidebar from bootstrap template and ensuring layout is correct
Hi all,
I am trying to remove the sidebar from my view file as I do not need a sidebar and just the top nav bar.
When I remove the sidebar section from the html code, it ends up ruining the page layout. Can I please get some tips on how to remove the sidebar, without ruining the layout of the page itself.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Purpose Application UI is the following chapter we've finished in order to create a complete and robust solution next to the already known Purpose Website UI.">
<meta name="author" content="Webpixels">
<title>Purpose – Application UI Kit</title>
<!-- Favicon -->
<link rel="icon" href="../../assets/img/brand/favicon.png" type="image/png">
<!-- Font Awesome 5 -->
<link rel="stylesheet" href="../../assets/libs/@fortawesome/fontawesome-free/css/all.min.css"><!-- Purpose CSS -->
<link rel="stylesheet" href="../../assets/css/purpose.css" id="stylesheet">
</head>
<body class="application application-offset">
<!-- Chat modal -->
<!-- Customizer modal -->
<div class="modal fade fixed-right" id="modal-chat" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-vertical" role="document">
<div class="modal-content">
<div class="modal-header align-items-center">
<div class="modal-title">
<h6 class="mb-0">Chat</h6>
<span class="d-block text-sm">3 new conversations</span>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="scrollbar-inner">
<!-- Chat contacts -->
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">John Sullivan</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">Heather Wright</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">James Lewis</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-4-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">Martin Gray</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-5-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">John Snow</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">John Michael</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">Monroe Parker</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">Danielle Levin</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-4-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">Jesse Stevens</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-5-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">John Snow</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">John Sullivan</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">Heather Wright</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">James Lewis</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-4-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">Martin Gray</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-5-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">John Snow</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">John Michael</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">Monroe Parker</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">Danielle Levin</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-4-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">Jesse Stevens</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="">
<div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-5-800x800.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
</div>
<div class="flex-fill ml-3">
<h6 class="text-sm mb-0">John Snow</h6>
<p class="text-sm mb-0">
Working remotely
</p>
</div>
</div>
</a>
</div>
</div>
<div class="modal-footer py-3 mt-auto">
<a href="#" class="btn btn-block btn-sm btn-neutral btn-icon rounded-pill">
<span class="btn-inner--icon"><i class="fab fa-facebook-messenger"></i></span>
<span class="btn-inner--text">Open Chat</span>
</a>
</div>
</div>
</div>
</div>
<!-- Application container -->
<div class="container-fluid container-application">
<!-- Sidenav -->
<div class="sidenav" id="sidenav-main">
<!-- Sidenav header -->
<div class="sidenav-header d-flex align-items-center">
<a class="navbar-brand" href="../../index.html">
<img src="../../assets/img/brand/white.png" class="navbar-brand-img" alt="...">
</a>
<div class="ml-auto">
<!-- Sidenav toggler -->
<div class="sidenav-toggler sidenav-toggler-dark d-md-none" data-action="sidenav-unpin" data-target="#sidenav-main">
<div class="sidenav-toggler-inner">
<i class="sidenav-toggler-line bg-white"></i>
<i class="sidenav-toggler-line bg-white"></i>
<i class="sidenav-toggler-line bg-white"></i>
</div>
</div>
</div>
</div>
<!-- User mini profile -->
<div class="sidenav-user d-flex flex-column align-items-center justify-content-between text-center">
<!-- Avatar -->
<div>
<a href="#" class="avatar rounded-circle avatar-xl">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">
</a>
<div class="mt-4">
<h5 class="mb-0 text-white">Heather Parker</h5>
<span class="d-block text-sm text-white opacity-8 mb-3">Web Architect</span>
<a href="#" class="btn btn-sm btn-white btn-icon rounded-pill shadow hover-translate-y-n3">
<span class="btn-inner--icon"><i class="fas fa-coins"></i></span>
<span class="btn-inner--text">.300</span>
</a>
</div>
</div>
<!-- User info -->
<!-- Actions -->
<div class="w-100 mt-4 actions d-flex justify-content-between">
<a href="../../application/user/profile.html" class="action-item action-item-lg text-white pl-0">
<i class="fas fa-user"></i>
</a>
<a href="#modal-chat" class="action-item action-item-lg text-white" data-toggle="modal">
<i class="fas fa-comment-alt"></i>
</a>
<a href="../../application/shop/invoices.html" class="action-item action-item-lg text-white pr-0">
<i class="fas fa-receipt"></i>
</a>
</div>
</div>
<!-- Application nav -->
<div class="nav-application clearfix">
<a href="../../application/home.html" class="btn btn-square text-sm">
<span class="btn-inner--icon d-block"><i class="fas fa-home fa-2x"></i></span>
<span class="btn-inner--icon d-block pt-2">Home</span>
</a>
<a href="../../application/project/card-listing.html" class="btn btn-square text-sm active">
<span class="btn-inner--icon d-block"><i class="fas fa-project-diagram fa-2x"></i></span>
<span class="btn-inner--icon d-block pt-2">Projects</span>
</a>
<a href="../../application/task/table-listing.html" class="btn btn-square text-sm">
<span class="btn-inner--icon d-block"><i class="fas fa-tasks fa-2x"></i></span>
<span class="btn-inner--icon d-block pt-2">Tasks</span>
</a>
<a href="../../application/task/kanban-board.html" class="btn btn-square text-sm">
<span class="btn-inner--icon d-block"><i class="fas fa-columns fa-2x"></i></span>
<span class="btn-inner--icon d-block pt-2">Kanban</span>
</a>
<a href="../../application/user/card-listing.html" class="btn btn-square text-sm">
<span class="btn-inner--icon d-block"><i class="fas fa-users-cog fa-2x"></i></span>
<span class="btn-inner--icon d-block pt-2">Users</span>
</a>
<a href="../../application/user/profile.html" class="btn btn-square text-sm">
<span class="btn-inner--icon d-block"><i class="fas fa-user-ninja fa-2x"></i></span>
<span class="btn-inner--icon d-block pt-2">Profile</span>
</a>
<a href="../../application/shop/invoices.html" class="btn btn-square text-sm">
<span class="btn-inner--icon d-block"><i class="fas fa-receipt fa-2x"></i></span>
<span class="btn-inner--icon d-block pt-2">Invoices</span>
</a>
<a href="../../application/widgets.html" class="btn btn-square text-sm">
<span class="btn-inner--icon d-block"><i class="fas fa-cogs fa-2x"></i></span>
<span class="btn-inner--icon d-block pt-2">Widgets</span>
</a>
</div>
<!-- Misc area -->
<div class="card bg-gradient-warning">
<div class="card-body">
<h5 class="text-white">Hello, Friend!</h5>
<p class="text-white mb-4">
Why not start using Purpose Application UI Kit and create something amazing today?
</p>
<a href="https://themes.getbootstrap.com/product/purpose-application-ui-kit/" class="btn btn-sm btn-block btn-white rounded-pill" target="_blank">Get started</a>
</div>
</div>
</div>
<!-- Content -->
<div class="main-content position-relative">
<!-- Main nav -->
<nav class="navbar navbar-main navbar-expand-lg navbar-dark bg-primary navbar-border" id="navbar-main">
<div class="container-fluid">
<!-- Brand + Toggler (for mobile devices) -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-main-collapse" aria-controls="navbar-main-collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- User's navbar -->
<div class="navbar-user d-lg-none ml-auto">
<ul class="navbar-nav flex-row align-items-center">
<li class="nav-item">
<a href="#" class="nav-link nav-link-icon sidenav-toggler" data-action="sidenav-pin" data-target="#sidenav-main"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link nav-link-icon" data-action="omnisearch-open" data-target="#omnisearch"><i class="fas fa-search"></i></a>
</li>
<li class="nav-item dropdown dropdown-animate">
<a class="nav-link nav-link-icon" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-bell"></i></a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg dropdown-menu-arrow p-0">
<div class="py-3 px-3">
<h5 class="heading h6 mb-0">Notifications</h5>
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="2 hrs ago">
<div>
<span class="avatar bg-primary text-white rounded-circle">AM</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Alex Michael <small class="float-right text-muted">2 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="3 hrs ago">
<div>
<span class="avatar bg-warning text-white rounded-circle">SW</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Sandra Wayne <small class="float-right text-muted">3 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="5 hrs ago">
<div>
<span class="avatar bg-info text-white rounded-circle">JM</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Jason Miller <small class="float-right text-muted">5 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="2 hrs ago">
<div>
<span class="avatar bg-dark text-white rounded-circle">MJ</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Mike Thomson <small class="float-right text-muted">2 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="3 hrs ago">
<div>
<span class="avatar bg-primary text-white rounded-circle">RN</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Richard Nixon <small class="float-right text-muted">3 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
</div>
<div class="py-3 text-center">
<a href="#" class="link link-sm link--style-3">View all notifications</a>
</div>
</div>
</li>
<li class="nav-item dropdown dropdown-animate">
<a class="nav-link pr-lg-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="avatar avatar-sm rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-4-800x800.jpg">
</span>
</a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right dropdown-menu-arrow">
<h6 class="dropdown-header px-0">Hi, Heather!</h6>
<a href="../../application/user/profile.html" class="dropdown-item">
<i class="fas fa-user"></i>
<span>My profile</span>
</a>
<a href="../../application/account/settings.html" class="dropdown-item">
<i class="fas fa-cog"></i>
<span>Settings</span>
</a>
<a href="../../application/account/billing.html" class="dropdown-item">
<i class="fas fa-credit-card"></i>
<span>Billing</span>
</a>
<a href="../../application/shop/orders.html" class="dropdown-item">
<i class="fas fa-shopping-basket"></i>
<span>Orders</span>
</a>
<div class="dropdown-divider"></div>
<a href="../../application/authentication/login.html" class="dropdown-item">
<i class="fas fa-sign-out-alt"></i>
<span>Logout</span>
</a>
</div>
</li>
</ul>
</div>
<!-- Navbar nav -->
<div class="collapse navbar-collapse navbar-collapse-fade" id="navbar-main-collapse">
<ul class="navbar-nav align-items-lg-center">
<!-- Overview -->
<li class="nav-item d-lg-none ">
<a class="nav-link" href="../../index.html">
Overview
</a>
</li>
<li class="border-top opacity-2 my-2"></li>
<!-- Home -->
<li class="nav-item ">
<a class="nav-link pl-lg-0" href="../../application/home.html">
Home
</a>
</li>
<!-- Application menu -->
<li class="nav-item dropdown dropdown-animate" data-toggle="hover">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Application
</a>
<div class="dropdown-menu dropdown-menu-arrow p-lg-0">
<!-- Top dropdown menu -->
<div class="p-lg-4">
<div class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="dropdown-item dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Project
</a>
<div class="dropdown-menu"><a class="dropdown-item" href="../../application/project/card-listing.html">
Card listing
</a>
<a class="dropdown-item" href="../../application/project/table-listing.html">
Table listing
</a>
<a class="dropdown-item" href="../../application/project/overview.html">
Overview
</a>
<a class="dropdown-item" href="../../application/project/create-new.html">
Create new
</a>
</div>
</div>
<div class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="dropdown-item dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Task
</a>
<div class="dropdown-menu"><a class="dropdown-item" href="../../application/task/table-listing.html">
Table listing
</a>
<a class="dropdown-item" href="../../application/task/kanban-board.html">
Kanban board
</a>
<a class="dropdown-item" href="../../application/task/create-new.html">
Create new
</a>
</div>
</div>
<div class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="dropdown-item dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
User
</a>
<div class="dropdown-menu"><a class="dropdown-item" href="../../application/user/card-listing.html">
Card listing
</a>
<a class="dropdown-item" href="../../application/user/table-listing.html">
Table listing
</a>
<a class="dropdown-item" href="../../application/user/profile.html">
Profile
</a>
</div>
</div>
<div class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="dropdown-item dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Authentication
</a>
<div class="dropdown-menu"><a class="dropdown-item" href="../../application/authentication/login.html">
Login
</a>
<a class="dropdown-item" href="../../application/authentication/register.html">
Register
</a>
<a class="dropdown-item" href="../../application/authentication/recover.html">
Recover
</a>
</div>
</div>
<div class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="dropdown-item dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account
</a>
<div class="dropdown-menu"><a class="dropdown-item" href="../../application/account/profile.html">
Profile
</a>
<a class="dropdown-item" href="../../application/account/settings.html">
Settings
</a>
<a class="dropdown-item" href="../../application/account/billing.html">
Billing
</a>
<a class="dropdown-item" href="../../application/account/notifications.html">
Notifications
</a>
<a class="dropdown-item" href="../../application/account/addresses.html">
Addresses
</a>
</div>
</div>
<div class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="dropdown-item dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Shop
</a>
<div class="dropdown-menu"><a class="dropdown-item" href="../../application/shop/card-listing.html">
Card listing
</a>
<a class="dropdown-item" href="../../application/shop/table-listing.html">
Table listing
</a>
<a class="dropdown-item" href="../../application/shop/product.html">
Product
</a>
<a class="dropdown-item" href="../../application/shop/orders.html">
Orders
</a>
<a class="dropdown-item" href="../../application/shop/order-description.html">
Order description
</a>
<a class="dropdown-item" href="../../application/shop/cart.html">
Cart
</a>
<a class="dropdown-item" href="../../application/shop/sellers.html">
Sellers
</a>
<a class="dropdown-item" href="../../application/shop/invoices.html">
Invoices
</a>
<a class="dropdown-item" href="../../application/shop/invoice-description.html">
Invoice description
</a>
</div>
</div>
<div class="dropdown dropdown-animate dropdown-submenu" data-toggle="hover">
<a href="#" class="dropdown-item dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Utility
</a>
<div class="dropdown-menu"><a class="dropdown-item" href="../../application/utility/error-404.html">
Error 404
</a>
<a class="dropdown-item" href="../../application/utility/error-500.html">
Error 500
</a>
<a class="dropdown-item" href="../../application/utility/maintenance-mode.html">
Maintenance mode
</a>
<a class="dropdown-item" href="../../application/utility/faq.html">
Faq
</a>
<a class="dropdown-item" href="../../application/utility/topic.html">
Topic
</a>
</div>
</div>
</div>
<!-- Bottom dropdown menu -->
<div class="dropdown-menu-links rounded-bottom delimiter-top p-lg-4">
<div class="row">
<div class="col-sm-6">
<a href="../../application/calendar.html" class="dropdown-item">Calendar</a>
<a href="../../application/timeline.html" class="dropdown-item">Timeline</a>
</div>
<div class="col-sm-6">
<a href="../../application/task/kanban-board.html" class="dropdown-item">Kanban board</a>
<a href="../../application/google-map.html" class="dropdown-item">Google map</a>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../../application/widgets.html">
Widgets
</a>
</li>
<li class="nav-item dropdown dropdown-animate" data-toggle="hover">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg dropdown-menu-arrow p-0">
<ul class="list-group list-group-flush">
<li>
<a href="../../docs/index.html" class="list-group-item list-group-item-action" role="button">
<div class="media d-flex align-items-center">
<!-- SVG icon -->
<figure style="width: 50px;">
<img alt="Image placeholder" src="../../assets/img/icons/essential/detailed/DOC_File.svg" class="svg-inject img-fluid" style="height: 50px;">
</figure>
<!-- Media body -->
<div class="media-body ml-3">
<h6 class="mb-1">Documentation</h6>
<p class="mb-0">Awesome section examples for any scenario.</p>
</div>
</div>
</a>
</li>
<li>
<a href="../../docs/components/index.html" class="list-group-item list-group-item-action" role="button">
<div class="media d-flex align-items-center">
<!-- SVG icon -->
<figure style="width: 50px;">
<img alt="Image placeholder" src="../../assets/img/icons/essential/detailed/Mobile_UI.svg" class="svg-inject img-fluid" style="height: 50px;">
</figure>
<!-- Media body -->
<div class="media-body ml-3">
<h6 class="mb-1">Components</h6>
<p class="mb-0">Awesome section examples for any scenario.</p>
</div>
</div>
</a>
</li>
</ul>
<div class="dropdown-menu-links rounded-bottom delimiter-top p-4">
<div class="row">
<div class="col-sm-6">
<a href="../../docs/getting-started/installation.html" class="dropdown-item">Installation</a>
<a href="../../docs/getting-started/file-structure.html" class="dropdown-item">File structure</a>
<a href="../../docs/getting-started/build-tools.html" class="dropdown-item">Build tools</a>
<a href="../../docs/getting-started/customization.html" class="dropdown-item">Customization</a>
</div>
<div class="col-sm-6">
<a href="../../docs/getting-started/plugins.html" class="dropdown-item">Using plugins</a>
<a href="../../docs/components/index.html" class="dropdown-item">Components</a>
<a href="../../docs/plugins/animate.html" class="dropdown-item">Plugins</a>
<a href="../../docs/support.html" class="dropdown-item">Support</a>
</div>
</div>
</div>
</div>
</li>
<li class="border-top opacity-2 my-2"></li>
<!-- Docs menu -->
<li class="nav-item d-lg-none">
<a class="nav-link" href="../../docs/index.html">
Docs
</a>
</li>
<li class="nav-item d-lg-none">
<a class="nav-link" href="../../application/authentication/register.html">
Register
</a>
</li>
<li class="nav-item d-lg-none">
<a class="nav-link" href="../../application/authentication/login.html">
Sign in
</a>
</li>
</ul><!-- Right menu -->
<ul class="navbar-nav ml-lg-auto align-items-center d-none d-lg-flex">
<li class="nav-item">
<a href="#" class="nav-link nav-link-icon sidenav-toggler" data-action="sidenav-pin" data-target="#sidenav-main"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link nav-link-icon" data-action="omnisearch-open" data-target="#omnisearch"><i class="fas fa-search"></i></a>
</li>
<li class="nav-item">
<a href="#modal-chat" class="nav-link nav-link-icon" data-toggle="modal"><i class="fas fa-comment-alt"></i></a>
</li>
<li class="nav-item dropdown dropdown-animate">
<a class="nav-link nav-link-icon" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-bell"></i></a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg dropdown-menu-arrow p-0">
<div class="py-3 px-3">
<h5 class="heading h6 mb-0">Notifications</h5>
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="2 hrs ago">
<div>
<span class="avatar bg-primary text-white rounded-circle">AM</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Alex Michael <small class="float-right text-muted">2 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="3 hrs ago">
<div>
<span class="avatar bg-warning text-white rounded-circle">SW</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Sandra Wayne <small class="float-right text-muted">3 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="5 hrs ago">
<div>
<span class="avatar bg-info text-white rounded-circle">JM</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Jason Miller <small class="float-right text-muted">5 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="2 hrs ago">
<div>
<span class="avatar bg-dark text-white rounded-circle">MJ</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Mike Thomson <small class="float-right text-muted">2 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="3 hrs ago">
<div>
<span class="avatar bg-primary text-white rounded-circle">RN</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Richard Nixon <small class="float-right text-muted">3 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
</div>
<div class="py-3 text-center">
<a href="#" class="link link-sm link--style-3">View all notifications</a>
</div>
</div>
</li>
<li class="nav-item dropdown dropdown-animate">
<a class="nav-link pr-lg-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="media media-pill align-items-center">
<span class="avatar rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-4-800x800.jpg">
</span>
<div class="ml-2 d-none d-lg-block">
<span class="mb-0 text-sm font-weight-bold">John Snow</span>
</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right dropdown-menu-arrow">
<h6 class="dropdown-header px-0">Hi, John!</h6>
<a href="#!" class="dropdown-item">
<i class="fas fa-user"></i>
<span>My profile</span>
</a>
<a href="#!" class="dropdown-item">
<i class="fas fa-cog"></i>
<span>Settings</span>
</a>
<a href="#!" class="dropdown-item">
<i class="fas fa-credit-card"></i>
<span>Billing</span>
</a>
<a href="#!" class="dropdown-item">
<i class="fas fa-tasks"></i>
<span>Activity</span>
</a>
<div class="dropdown-divider"></div>
<a href="#!" class="dropdown-item">
<i class="fas fa-sign-out-alt"></i>
<span>Logout</span>
</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!-- Omnisearch -->
<div id="omnisearch" class="omnisearch">
<div class="container">
<!-- Search form -->
<form class="omnisearch-form">
<div class="form-group">
<div class="input-group input-group-merge input-group-flush">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-search"></i></span>
</div>
<input type="text" class="form-control" placeholder="Type and hit enter ...">
</div>
</div>
</form>
<div class="omnisearch-suggestions">
<h6 class="heading">Search Suggestions</h6>
<div class="row">
<div class="col-sm-6">
<ul class="list-unstyled mb-0">
<li>
<a class="list-link" href="#">
<i class="fas fa-search"></i>
<span>macbook pro</span> in Laptops
</a>
</li>
<li>
<a class="list-link" href="#">
<i class="fas fa-search"></i>
<span>iphone 8</span> in Smartphones
</a>
</li>
<li>
<a class="list-link" href="#">
<i class="fas fa-search"></i>
<span>macbook pro</span> in Laptops
</a>
</li>
<li>
<a class="list-link" href="#">
<i class="fas fa-search"></i>
<span>beats pro solo 3</span> in Headphones
</a>
</li>
<li>
<a class="list-link" href="#">
<i class="fas fa-search"></i>
<span>smasung galaxy 10</span> in Phones
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Page content -->
<div class="page-content">
<!-- Team selection modal -->
<div class="modal fade" id="modal-users" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header align-items-center">
<div class="modal-title">
<h6 class="mb-0">Select team</h6>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Connections -->
<div class="row">
<div class="col-6 col-md-3">
<div class="card">
<div class="card-body text-center">
<div class="avatar-parent-child">
<a href="#" class="avatar avatar-lg rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg">
</a>
<span class="avatar-child avatar-badge bg-success"></span>
</div>
<h6 class="text-sm my-3">John Sullivan</h6>
<button type="button" class="btn btn-xs btn-secondary">Add</button>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card">
<div class="card-body text-center">
<div class="avatar-parent-child">
<a href="#" class="avatar avatar-lg rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg">
</a>
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
<h6 class="text-sm my-3">Heather Wright</h6>
<button type="button" class="btn btn-xs btn-secondary">Add</button>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card">
<div class="card-body text-center">
<div class="avatar-parent-child">
<a href="#" class="avatar avatar-lg rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg">
</a>
<span class="avatar-child avatar-badge bg-danger"></span>
</div>
<h6 class="text-sm my-3">James Lewis</h6>
<button type="button" class="btn btn-xs btn-secondary">Add</button>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card">
<div class="card-body text-center">
<div class="avatar-parent-child">
<a href="#" class="avatar avatar-lg rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-4-800x800.jpg">
</a>
<span class="avatar-child avatar-badge bg-success"></span>
</div>
<h6 class="text-sm my-3">Martin Gray</h6>
<button type="button" class="btn btn-xs btn-secondary">Add</button>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card">
<div class="card-body text-center">
<div class="avatar-parent-child">
<a href="#" class="avatar avatar-lg rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-5-800x800.jpg">
</a>
<span class="avatar-child avatar-badge bg-success"></span>
</div>
<h6 class="text-sm my-3">John Snow</h6>
<button type="button" class="btn btn-xs btn-secondary">Add</button>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card">
<div class="card-body text-center">
<div class="avatar-parent-child">
<a href="#" class="avatar avatar-lg rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-6-800x800.jpg">
</a>
<span class="avatar-child avatar-badge bg-success"></span>
</div>
<h6 class="text-sm my-3">John Michael</h6>
<button type="button" class="btn btn-xs btn-secondary">Add</button>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card">
<div class="card-body text-center">
<div class="avatar-parent-child">
<a href="#" class="avatar avatar-lg rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-7-800x800.jpg">
</a>
<span class="avatar-child avatar-badge bg-warning"></span>
</div>
<h6 class="text-sm my-3">Monroe Parker</h6>
<button type="button" class="btn btn-xs btn-secondary">Add</button>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card">
<div class="card-body text-center">
<div class="avatar-parent-child">
<a href="#" class="avatar avatar-lg rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-8-800x800.jpg">
</a>
<span class="avatar-child avatar-badge bg-danger"></span>
</div>
<h6 class="text-sm my-3">Danielle Levin</h6>
<button type="button" class="btn btn-xs btn-secondary">Add</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Page title -->
<div class="page-title">
<div class="row justify-content-between align-items-center">
<div class="col-md-6 d-flex align-items-center justify-content-between justify-content-md-start mb-3 mb-md-0">
<!-- Page title + Go Back button -->
<div class="d-inline-block">
<h5 class="h4 d-inline-block font-weight-400 mb-0 text-white">Application UI Design</h5>
</div>
<!-- Additional info -->
</div>
<div class="col-md-6 d-flex align-items-center justify-content-between justify-content-md-end">
<div class="avatar-group">
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
<a href="#modal-users" class="btn btn-sm btn-white rounded-circle btn-icon-only ml-2" data-toggle="modal">
<span class="btn-inner--icon"><i class="fas fa-user-plus"></i></span>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-3 col-sm-6">
<!-- Stats card -->
<div class="card card-stats border-0">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h6 class="text-muted mb-1">Spendings</h6>
<span class="h3 font-weight-bold mb-0 ">.500</span>
</div>
<div class="col-auto">
<div class="progress-circle progress-sm" id="progress-circle-1" data-progress="40" data-text="40%" data-color="primary"></div>
</div>
</div>
</div>
</div>
<!-- Project performance -->
<div class="card">
<div class="card-body">
<div class="">
<div class="row">
<div class="col-6">
<h6 class="mb-0">357</h6>
<span class="text-sm text-muted">Tasks done</span>
</div>
<div class="col-6 text-right">
<span class="badge badge-pill badge-success">Good</h6>
</div>
</div>
</div>
<div class="w-100 pt-4 pb-5">
<div class="spark-chart" data-toggle="spark-chart" data-color="info" data-dataset="[47, 94, 24, 18, 26, 65, 31, 47, 10, 44, 45]"></div>
</div>
<div class="progress-wrapper mb-3">
<small class="progress-label">Concept</small>
<div class="progress mt-0" style="height: 3px;">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
</div>
</div>
<div class="progress-wrapper">
<small class="progress-label">Prototyping</small>
<div class="progress mt-0" style="height: 3px;">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
</div>
</div>
<div class="progress-wrapper">
<small class="progress-label">Testing</small>
<div class="progress mt-0" style="height: 3px;">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6">
<!-- Stats card -->
<div class="card card-stats">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h6 class="text-muted mb-1">New tasks</h6>
<span class="h3 font-weight-bold mb-0 ">34</span>
</div>
<div class="col-auto">
<div class="progress-circle progress-sm" id="progress-circle-2" data-progress="60" data-text="60%" data-color="primary"></div>
</div>
</div>
</div>
</div>
<!-- Project performance -->
<div class="card">
<div class="card-body">
<div class="">
<div class="row">
<div class="col-6">
<h6 class="mb-0">642</h6>
<span class="text-sm text-muted">Hours spent</span>
</div>
<div class="col-6 text-right">
<span class="badge badge-pill badge-danger">At risk</h6>
</div>
</div>
</div>
<div class="w-100 pt-4 pb-5">
<div class="spark-chart" data-toggle="spark-chart" data-color="warning" data-dataset="[47, 94, 24, 18, 26, 65, 31, 47, 10, 44, 45]"></div>
</div>
<div class="progress-wrapper mb-3">
<small class="progress-label">Concept</small>
<div class="progress mt-0" style="height: 3px;">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
</div>
</div>
<div class="progress-wrapper">
<small class="progress-label">Prototyping</small>
<div class="progress mt-0" style="height: 3px;">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
</div>
</div>
<div class="progress-wrapper">
<small class="progress-label">Testing</small>
<div class="progress mt-0" style="height: 3px;">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<!-- Project overview -->
<div class="card card-fluid">
<div class="card-header">
<h6 class="mb-0">Project overview</h6>
</div>
<div class="card-body py-3 flex-grow-1">
<!-- Progress -->
<div class="pb-3 mb-3 border-bottom">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-2.png" class="avatar rounded-circle">
</div>
<div class="col ml-n2">
<div class="progress-wrapper">
<span class="progress-percentage"><small class="font-weight-bold">Completed: </small>70%</span>
<div class="progress progress-xs mt-2">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Description -->
<p class="text-sm mb-0">
Purpose Application UI is unique and beautiful collection of elements that are all flexible and modular.
</p>
</div>
<div class="card-footer py-0">
<ul class="list-group list-group-flush">
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-6">
<span class="form-control-label">Private project:</span>
</div>
<div class="col-6 text-right">
<span class="badge badge-success badge-pill">Yes</span>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-6">
<span class="form-control-label">Published:</span>
</div>
<div class="col-6 text-right">
<span class="badge badge-danger badge-pill">No</span>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-6">
<small>Start date:</small>
<div class="h6 mb-0">23-05-2018</div>
</div>
<div class="col-6">
<small>End date:</small>
<div class="h6 mb-0">30-06-2019</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Project details -->
<div class="row">
<div class="col-xl-12">
<div class="card">
<div class="card-header border-0">
<div class="row align-items-center">
<div class="col">
<h6 class="mb-0">User performance</h6>
</div>
<div class="col-auto">
<div class="actions">
<a href="#!" class="action-item">
<i class="fas fa-file-export"></i>
<span class="d-none d-sm-inline-block mr-4">Export</span>
</a>
<a href="#!" class="action-item">
<i class="fas fa-print"></i>
<span class="d-none d-sm-inline-block">Print</span>
</a>
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table align-items-center">
<thead>
<tr>
<th scope="col" class="sort" data-sort="name">Name</th>
<th scope="col" class="sort" data-sort="groups">Groups</th>
<th scope="col" class="sort" data-sort="tasks">Tasks</th>
<th scope="col" class="sort" data-sort="billing">Hours billed</th>
<th scope="col">Completion</th>
<th scope="col" class="sort" data-sort="issues">Closed issues</th>
</tr>
</thead>
<tbody class="list">
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar rounded-circle avatar-sm">
</div>
<div class="media-body ml-3">
<a href="overview.html" class="name mb-0 h6 text-sm">John Sullivan</a>
</div>
</div>
</th>
<td>
<a href="#" class="badge badge-secondary">Design</a>
<a href="#" class="badge badge-secondary">Marketing</a>
</td>
<td class="budget">
<span>11</span>
</td>
<td>
80 h
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">14%</span>
<div>
<div class="progress" style="width: 100px;">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100" style="width: 14%;"></div>
</div>
</div>
</div>
</td>
<td>
<span class="badge badge-secondary mr-2">7</span>
<a href="#" class="text-muted" data-toggle="tooltip" data-original-title="Unclosed issues">8</a>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="avatar rounded-circle avatar-sm">
</div>
<div class="media-body ml-3">
<a href="overview.html" class="name mb-0 h6 text-sm">Heather Wright</a>
</div>
</div>
</th>
<td>
<a href="#" class="badge badge-secondary">Dev</a>
<a href="#" class="badge badge-secondary">Testing</a>
</td>
<td class="budget">
<span>22</span>
</td>
<td>
160 h
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">28%</span>
<div>
<div class="progress" style="width: 100px;">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100" style="width: 28%;"></div>
</div>
</div>
</div>
</td>
<td>
<span class="badge badge-secondary mr-2">14</span>
<a href="#" class="text-muted" data-toggle="tooltip" data-original-title="Unclosed issues">16</a>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="avatar rounded-circle avatar-sm">
</div>
<div class="media-body ml-3">
<a href="overview.html" class="name mb-0 h6 text-sm">James Lewis</a>
</div>
</div>
</th>
<td>
<a href="#" class="badge badge-secondary">Design</a>
<a href="#" class="badge badge-secondary">Mobile</a>
</td>
<td class="budget">
<span>33</span>
</td>
<td>
240 h
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">42%</span>
<div>
<div class="progress" style="width: 100px;">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100" style="width: 42%;"></div>
</div>
</div>
</div>
</td>
<td>
<span class="badge badge-secondary mr-2">21</span>
<a href="#" class="text-muted" data-toggle="tooltip" data-original-title="Unclosed issues">24</a>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/team-4-800x800.jpg" class="avatar rounded-circle avatar-sm">
</div>
<div class="media-body ml-3">
<a href="overview.html" class="name mb-0 h6 text-sm">Martin Gray</a>
</div>
</div>
</th>
<td>
<a href="#" class="badge badge-secondary">Dev</a>
<a href="#" class="badge badge-secondary">Mobile</a>
</td>
<td class="budget">
<span>44</span>
</td>
<td>
320 h
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">56%</span>
<div>
<div class="progress" style="width: 100px;">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100" style="width: 56%;"></div>
</div>
</div>
</div>
</td>
<td>
<span class="badge badge-secondary mr-2">28</span>
<a href="#" class="text-muted" data-toggle="tooltip" data-original-title="Unclosed issues">32</a>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/team-5-800x800.jpg" class="avatar rounded-circle avatar-sm">
</div>
<div class="media-body ml-3">
<a href="overview.html" class="name mb-0 h6 text-sm">John Snow</a>
</div>
</div>
</th>
<td>
<a href="#" class="badge badge-secondary">Sales</a>
<a href="#" class="badge badge-secondary">Marketing</a>
</td>
<td class="budget">
<span>55</span>
</td>
<td>
400 h
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">70%</span>
<div>
<div class="progress" style="width: 100px;">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
</div>
</div>
</div>
</td>
<td>
<span class="badge badge-secondary mr-2">35</span>
<a href="#" class="text-muted" data-toggle="tooltip" data-original-title="Unclosed issues">40</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-0">Attachments</h6>
</div>
<div class="text-right">
<div class="actions">
<a href="#" class="action-item"><i class="fas fa-sync"></i></a>
<div class="dropdown action-item" data-toggle="dropdown">
<a href="#" class="action-item"><i class="fas fa-ellipsis-h"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-wrapper p-3">
<!-- Files -->
<div class="card mb-3 border shadow-none">
<div class="px-3 py-3">
<div class="row align-items-center">
<div class="col-auto">
<img alt="Image placeholder" src="../../assets/img/icons/files/pdf.png" class="img-fluid" style="width: 40px;">
</div>
<div class="col ml-n2">
<h6 class="text-sm mb-0">
<a href="#!">design-principles.pdf</a>
</h6>
<p class="card-text small text-muted">
189 KB
</p>
</div>
<div class="col-auto actions">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-3 border shadow-none">
<div class="px-3 py-3">
<div class="row align-items-center">
<div class="col-auto">
<img alt="Image placeholder" src="../../assets/img/icons/files/psd.png" class="img-fluid" style="width: 40px;">
</div>
<div class="col ml-n2">
<h6 class="text-sm mb-0">
<a href="#!">website-wireframe.psd</a>
</h6>
<p class="card-text small text-muted">
45.9 MB
</p>
</div>
<div class="col-auto actions">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-3 border shadow-none">
<div class="px-3 py-3">
<div class="row align-items-center">
<div class="col-auto">
<img alt="Image placeholder" src="../../assets/img/icons/files/doc.png" class="img-fluid" style="width: 40px;">
</div>
<div class="col ml-n2">
<h6 class="text-sm mb-0">
<a href="#!">product-guidelines.doc</a>
</h6>
<p class="card-text small text-muted">
87 KB
</p>
</div>
<div class="col-auto actions">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-3 border shadow-none">
<div class="px-3 py-3">
<div class="row align-items-center">
<div class="col-auto">
<img alt="Image placeholder" src="../../assets/img/icons/files/avi.png" class="img-fluid" style="width: 40px;">
</div>
<div class="col ml-n2">
<h6 class="text-sm mb-0">
<a href="#!">banner-video.avi</a>
</h6>
<p class="card-text small text-muted">
23 MB
</p>
</div>
<div class="col-auto actions">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-3 border shadow-none">
<div class="px-3 py-3">
<div class="row align-items-center">
<div class="col-auto">
<img alt="Image placeholder" src="../../assets/img/icons/files/png.png" class="img-fluid" style="width: 40px;">
</div>
<div class="col ml-n2">
<h6 class="text-sm mb-0">
<a href="#!">logo.png</a>
</h6>
<p class="card-text small text-muted">
189 kb
</p>
</div>
<div class="col-auto actions">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card card-fluid">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-0">Latest comments</h6>
</div>
<div class="text-right">
<div class="actions">
<a href="#" class="action-item"><i class="fas fa-sync"></i></a>
<div class="dropdown action-item" data-toggle="dropdown">
<a href="#" class="action-item"><i class="fas fa-ellipsis-h"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="2 hrs ago">
<div>
<span class="avatar bg-primary text-white rounded-circle">AM</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Alex Michael <small class="float-right text-muted">2 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="3 hrs ago">
<div>
<span class="avatar bg-warning text-white rounded-circle">SW</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Sandra Wayne <small class="float-right text-muted">3 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="5 hrs ago">
<div>
<span class="avatar bg-info text-white rounded-circle">JM</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Jason Miller <small class="float-right text-muted">5 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="2 hrs ago">
<div>
<span class="avatar bg-dark text-white rounded-circle">MJ</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Mike Thomson <small class="float-right text-muted">2 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="3 hrs ago">
<div>
<span class="avatar bg-primary text-white rounded-circle">RN</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Richard Nixon <small class="float-right text-muted">3 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
</div>
<div class="card-footer py-2 text-center">
<a href="#" class="text-sm text-muted font-weight-bold">See all notifications</a>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer pt-5 pb-4 footer-light" id="footer-main">
<div class="row text-center text-sm-left align-items-sm-center">
<div class="col-sm-6">
<p class="text-sm mb-0">© 2019 <a href="https://webpixels.io" class="h6 text-sm" target="_blank">Webpixels</a>. All rights reserved.</p>
</div>
<div class="col-sm-6 mb-md-0">
<ul class="nav justify-content-center justify-content-md-end">
<li class="nav-item dropdown border-right">
<a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img alt="Image placeholder" src="../../assets/img/icons/flags/ro.svg">
<span class="h6 text-sm mb-0">RO</span>
</a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a href="#" class="dropdown-item"><img alt="Image placeholder" src="../../assets/img/icons/flags/es.svg" class="mr-2">Spanish</a>
<a href="#" class="dropdown-item"><img alt="Image placeholder" src="../../assets/img/icons/flags/us.svg" class="mr-2">English</a>
<a href="#" class="dropdown-item"><img alt="Image placeholder" src="../../assets/img/icons/flags/gr.svg" class="mr-2">Greek</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Terms</a>
</li>
<li class="nav-item">
<a class="nav-link pr-0" href="#">Privacy</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<!-- Core JS - includes jquery, bootstrap, popper, in-view and sticky-kit -->
<script src="../../assets/js/purpose.core.js"></script>
<!-- Page JS -->
<script src="../../assets/libs/progressbar.js/dist/progressbar.min.js"></script>
<script src="../../assets/libs/apexcharts/dist/apexcharts.min.js"></script>
<!-- Purpose JS -->
<script src="../../assets/js/purpose.js"></script>
<!-- Demo JS - remove it when starting your project -->
<script src="../../assets/js/demo.js"></script>
</body>
</html>
I believe this may have something to do with css, but my knowledge with that is limited, and the entire theme uses the one css file.
Any help would be greatly appreciated.
Cheers Michael
Level 122
Level 122
it's not appropriate to post so much boilerplate here and expect anyone to try and understand it
if your editor supports code folding, collapse each section of your template so that you know where each section starts and ends so that you can correctly delete a section and the right number of divs
how easy this is depends on how good the original designer was
Please or to participate in this conversation.