File: /home/austral3d/fourdplan.com/php/projects-v2/shortcode-navs.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<!--META CHARSET -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--PAGE TITLE -->
<title>Shortcodes navs for the template</title>
<!-- MOBILE SPECIFIC -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- FAVICON -->
<link rel="shortcut icon" href="http://www.themacart.com/demo/melvin/html/img/favicon.ico">
<!-- CSS -->
<link rel="stylesheet" href="css/application.min.css" media="all">
<link rel="stylesheet" href="css/inputmask.css" media="all">
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css" media="all">
<link rel="stylesheet" href="css/tempusdominus-bootstrap-4.min.css">
<link rel="stylesheet" href="css/fullcalendar.print.min.css" media="print">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/ionicons.min.css" rel="stylesheet" type="text/css">
<!-- FONTS -->
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,400italic,700'>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,600">
<!-- TWITTER META -->
<meta name="twitter:site" content="@themacart">
<meta name="twitter:creator" content="@themacart">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Shortcodes navs for the template">
<meta name="twitter:description" content="Shortcodes for the navs.">
<meta name="twitter:image" content="http://www.themacart.com/demo/melvin/html/img/presentation-1.jpg">
<!-- OPEN GRAPH META -->
<meta property="og:url" content="http://www.themacart.com/demo/melvin/html/shortcode-navs.html">
<meta property="og:title" content="Shortcodes navs for the template">
<meta property="og:description" content="Shortcodes for the navs.">
<meta property="og:image" content="http://www.themacart.com/demo/melvin/html/img/presentation-1.jpg">
<meta property="og:type" content="article">
<meta property="fb:admins" content="1777918968915806" />
<!-- OTHER META -->
<meta name="description" content="Shortcodes for the navs.">
<meta name="author" content="themacart.com">
</head>
<!--BEGIN BODY -->
<!-- change color of link in the page by default -->
<body class="text-gray-600 body-link-gray-800 bg-page app sidebar-mini sidenav-toggled" itemscope itemtype="https://schema.org/WebPage">
<!-- BEGIN HEADER FIXED -->
<header class="app-header app-header-white">
<span itemscope itemtype="https://schema.org/Organization">
<!-- Begin brand meta props for seo -->
<!-- change absolute url in gulp.config or here -->
<meta itemprop="logo" content="http://www.themacart.com/demo/melvin/html/img/logo-mobile-light.png">
<meta itemprop="name" content="Themacart">
<!-- End seo brand meta -->
<span class="d-none d-md-flex h-100">
<a class="app-header-brand my-auto mx-auto" href="index.html" itemprop="url">
<img src="./img/logo-desktop-light.png" class="img-fluid" alt="Themacart premium template" id="desktopimage">
</a>
</span>
<span class="d-flex d-md-none h-100 px-1">
<a class="app-header-brand my-auto mx-auto" href="index.html" itemprop="url">
<img src="./img/logo-mobile-light.png" class="img-fluid" alt="Themacart premium template" id="mobileimage">
</a>
</span>
</span>
<!-- Sidebar toggle button-->
<button class="app-header-toggler" type="button" data-toggle="sidebar" aria-label="Hide Sidebar">
<span class="app-header-toggler-icon"></span>
</button>
<!-- Navbar Right Menu-->
<ul class="list-inline app-header-nav" itemscope itemtype="https://schema.org/WebSite">
<li class="app-header-form d-none d-md-flex">
<meta itemprop="url" content="http://www.themacart.com/demo/melvin/html">
<form itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
<meta itemprop="target" content="http://www.themacart.com/demo/melvin/html/?q={query}">
<input itemprop="query-input" class="app-header-form-input" type="search" data-i18n="[placeholder]input.placeholder" name="query">
<button class="app-header-form-button">
<i class="ion ion-ios-search h5"></i>
</button>
</form>
</li>
<li class="list-inline-item dropdown">
<a class="nav-link d-flex" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="small text-uppercase font-weight-light my-auto">
<span id="langFlag"></span>
<span class="d-none d-md-inline-flex" id="langText" data-i18n="header.language"></span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right shadow-3 py-0 min-width-300">
<a class="dropdown-item font-weight-light lang" data-lang="en-GB" itemprop="url" href="javascript:void(0);">
<img src="img/flags/GB.png" alt="English translate" class=" mr-2"> English
</a>
<a class="dropdown-item font-weight-light lang" data-lang="fr-FR" itemprop="url" href="javascript:void(0);">
<img src="img/flags/FR.png" alt="French translate" class=" mr-2"> French
</a>
<a class="dropdown-item font-weight-light lang" data-lang="de-DE" itemprop="url" href="javascript:void(0);">
<img src="img/flags/DE.png" alt="German translate" class=" mr-2"> German
</a>
</div>
</li>
<!-- User Menu-->
<li class="list-inline-item dropdown">
<a class="nav-link d-flex" href="#" data-toggle="dropdown" aria-label="Open Profile Menu">
<span class="my-auto ie-cover-fit" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img class="img-sq-35 rounded-circle img-profile-light" src="img/60x60.png" alt="User Image">
<meta itemprop="url" content="img/60x60.png">
</span>
</a>
<div class="dropdown-menu dropdown-menu-right py-0 min-width-300 shadow-3">
<div class="d-flex flex-column rounded">
<div class="px-4 py-2 bg-white border-bottom">
<div itemscope itemtype="https://schema.org/Person" class="media">
<span class="ie-cover-fit d-flex mr-3" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img class="img-sq-50 rounded-circle img-profile-light" src="img/60x60.png" alt="User Image">
<meta itemprop="url" content="img/60x60.png">
</span>
<i class="bullet bullet-avatar bullet-warning"></i>
<div class="media-body my-auto">
<p class="my-0">
<span itemprop="name" class="font-weight-bold h5">John Frank</span>
</p>
<span itemprop="email" class="h6 font-weight-light">
john.frank@example.com
</span>
</div>
</div>
</div>
<div class="p-2">
<ul class="list-group list-group-flush w-100 m-0 p-0">
<li class="list-group-item list-group-item-action w-100 p-0 border-0">
<a href="#" class="d-flex w-100 px-4">
<i class="ion size-21 ion-ios-toggle-outline my-auto mr-3"></i>
<span data-i18n="header.settings"></span>
</a>
</li>
<li class="list-group-item list-group-item-action w-100 p-0 border-0">
<a href="profile.html" class="d-flex w-100 px-4">
<i class="ion size-24 ion-ios-person-outline my-auto mr-3"></i>
<span data-i18n="header.profile"></span>
</a>
</li>
<li class="list-group-item list-group-item-action w-100 p-0 border-0">
<a href="project-details.html" class="d-flex w-100 px-4">
<i class="ion size-21 ion-ios-albums-outline my-auto mr-3"></i>
<span data-i18n="header.project"></span>
</a>
</li>
<li class="list-group-item list-group-item-action w-100 p-0 border-0">
<a href="inbox.html" class="d-flex w-100 px-4">
<i class="ion size-24 ion-ios-email-outline my-auto mr-3"></i>
<span data-i18n="header.inbox"></span>
<span class="numberCircle bg-primary text-white ml-auto my-auto ">12</span>
</a>
</li>
</ul>
</div>
<div class="px-4 bg-white border-top">
<div class="row no-gutters">
<div class="col-6 text-center p-2">
<a href="#" class="btn btn-primary btn-block text-white">
<span data-i18n="header.newaccount"></span>
</a>
</div>
<div class="col-6 text-center p-2">
<a href="#" class="btn btn-success btn-block text-white">
<span data-i18n="header.logout"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<!--Notification Menu-->
<li class="list-inline-item dropdown">
<a class="nav-link d-flex" href="#" data-toggle="collapsenotifications">
<span class="my-auto">
<i class="ion size-24 ion-android-notifications-none mr--1"></i>
</span>
<span class="my-auto">
<span class="numberCircle bg-danger text-white mt--1">6</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right py-0 min-width-300 shadow-3">
<div class="d-flex flex-column align-items-stretch h-100">
<div class="mb-auto">
<div class="p-4 text-center ">
<span class="font-weight-bold text-uppercase h6 my-0" data-i18n="header.newnots"></span>
</div>
</div>
<div class="mCustomScrollbar h-75" data-mcs-theme="dark-thin">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-warning p-3">
<i class="ion ion-ios-people size-24 mt-0 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.filesuploaded"></span>
</p>
<span class="font-weight-light small pull-right">
15 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-primary p-3">
<i class="ion ion-erlenmeyer-flask size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.chatbotinit"></span>
</p>
<span class="font-weight-light small pull-right">
21 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-quaternary p-3">
<i class="ion ion-eye size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.serverfailed"></span>
</p>
<span class="font-weight-light small pull-right">
35 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-success p-3">
<i class="ion ion-flash size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.ticketswaiting"></span>
</p>
<span class="font-weight-light small pull-right">
47 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-info p-3">
<i class="ion ion-funnel size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.newfiles"></span>
</p>
<span class="font-weight-light small pull-right">
1 hour ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-danger p-3">
<i class="ion ion-hammer size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.newproduct"></span>
</p>
<span class="font-weight-light small pull-right">
1 day ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-quinary p-3">
<i class="ion ion-images size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.filesuploaded"></span>
</p>
<span class="font-weight-light small pull-right">
15 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-warning p-3">
<i class="ion ion-ios-analytics size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.chatbotinit"></span>
</p>
<span class="font-weight-light small pull-right">
21 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-primary p-3">
<i class="ion ion-ios-bell size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.serverfailed"></span>
</p>
<span class="font-weight-light small pull-right">
35 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-danger p-3">
<i class="ion ion-ios-briefcase size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.ticketswaiting"></span>
</p>
<span class="font-weight-light small pull-right">
47 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-quinary p-3">
<i class="ion ion-ios-camera size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.newfiles"></span>
</p>
<span class="font-weight-light small pull-right">
1 hour ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-primary p-3">
<i class="ion ion-ios-people size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.newproduct"></span>
</p>
<span class="font-weight-light small pull-right">
1 day ago
</span>
</div>
</div>
</li>
</ul>
</div>
<div class="mt-auto">
<div class="p-4 text-center">
<a href="#" class="h6 text-center" data-i18n="header.seeallnots"></a>
</div>
</div>
</div>
</div>
</li>
<!-- Begin message -->
<li class="list-inline-item dropdown">
<a class="nav-link d-flex" href="#" data-toggle="collapsemessages">
<span class="my-auto">
<i class="ion size-24 ion-at mr--1"></i>
</span>
<span class="my-auto">
<span class=" numberCircle bg-info text-white mt--1">2</span>
</span>
</a>
</li>
<!-- End message -->
<!--Settings Menu-->
<li class="list-inline-item dropdown">
<a class="nav-link d-flex" href="#" data-toggle="collapsesettings">
<span class="my-auto">
<i class="ion size-24 ion-gear-a"></i>
</span>
</a>
</li>
</ul>
</header>
<!-- END HEADER FIXED -->
<!-- BEGIN SIDEBAR MENU-->
<div class="left-sidebar__overlay" data-toggle="sidebar"></div>
<aside class="left-sidebar left-sidebar-dark mCS_disabled" itemscope itemtype="https://schema.org/Organization" id="leftSidebar">
<ul class="sidebar-menu" itemscope itemtype="https://schema.org/SiteNavigationElement">
<!-- BEGIN DASHBOARD ITEM -->
<li class="treeview ">
<a class="sidebar-menu-item" href="#" data-toggle="treeview">
<i class="sidebar-menu-icon ion ion-ios-speedometer-outline"></i>
<span class="sidebar-menu-label" data-i18n="sidebar.dashboard">
</span>
<i class="treeview-indicator fa fa-angle-right"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="treeview-item " href="index.html" itemprop="url" data-i18n="sidebar.dashboard">
</a>
</li>
</ul>
</li>
<!-- END DASHBOARD ITEM -->
<!-- BEGIN TRANSLATION ITEM -->
<li class="treeview ">
<a class="sidebar-menu-item" href="#" data-toggle="treeview">
<i class="sidebar-menu-icon ion ion-ios-flag-outline"></i>
<span class="sidebar-menu-label" data-i18n="sidebar.translation">
</span>
<i class="treeview-indicator fa fa-angle-right"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="treeview-item" href="index.html?lng=fr-FR" itemprop="url" data-i18n="sidebar.frenchdashboard">
</a>
</li>
<li>
<a class="treeview-item" href="index.html?lng=en-GB" itemprop="url" data-i18n="sidebar.englishdashboard">
</a>
</li>
<li>
<a class="treeview-item" href="index.html?lng=de-DE" itemprop="url" data-i18n="sidebar.germandashboard">
</a>
</li>
<li>
<a class="treeview-item " href="calendar.html?lng=fr-FR" itemprop="url" data-i18n="sidebar.frenchcalendar">
</a>
</li>
<li>
<a class="treeview-item" href="calendar.html?lng=en-GB" itemprop="url" data-i18n="sidebar.englishcalendar">
</a>
</li>
<li>
<a class="treeview-item" href="calendar.html?lng=de-DE" itemprop="url" data-i18n="sidebar.germancalendar">
</a>
</li>
<li>
<a class="treeview-item " href="multi-lang-tables.html?lng=fr-FR" itemprop="url" data-i18n="sidebar.frenchtable">
</a>
</li>
<li>
<a class="treeview-item" href="multi-lang-tables.html?lng=en-GB" itemprop="url" data-i18n="sidebar.englishtable">
</a>
</li>
<li>
<a class="treeview-item" href="multi-lang-tables.html?lng=de-DE" itemprop="url" data-i18n="sidebar.germantable">
</a>
</li>
</ul>
</li>
<!-- END TRANSLATION ITEM -->
<!-- BEGIN LAYOUT ITEM -->
<li class="treeview ">
<a class="sidebar-menu-item" href="#" data-toggle="treeview">
<i class="sidebar-menu-icon ion ion-ios-speedometer-outline"></i>
<span class="sidebar-menu-label">Layout</span>
<i class="treeview-indicator fa fa-angle-right"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="treeview-item" href="#" data-toggle="sidebar">Toggle Sidebar</a>
</li>
<li>
<a class="treeview-item" href="#" data-toggle="toggleSidebarMini">Toggle Sidebar mini</a>
</li>
<li>
<a class="treeview-item " href="mega-menu.html" itemprop="url">Mega Menu</a>
</li>
<li>
<div class="list-group list-group-root border-0">
<!-- Begin header colors categorie -->
<a href="#headerColors" class="list-group-item list-group-flush treeview-item border-0 w-100 d-flex" data-toggle="collapse">
Header Colors
<span class="small ml-2">(14)</span>
</a>
<div class="list-group collapse" id="headerColors">
<!-- Begin header colors categorie sub categorie-->
<a href="#" data-background="white" class="changeHeaderBackground list-group-item treeview-item ml-3 border-0">White</a>
<a href="#" data-background="dark" class="changeHeaderBackground list-group-item treeview-item ml-3 border-0">Dark</a>
<a href="#" data-background="primary" class="changeHeaderBackground list-group-item treeview-item ml-3 border-0">Primary</a>
<a href="#" data-background="danger" class="changeHeaderBackground list-group-item treeview-item ml-3 border-0">Danger</a>
<a href="#" data-background="success" class="changeHeaderBackground list-group-item treeview-item ml-3 border-0">Success</a>
<a href="#" data-background="info" class="changeHeaderBackground list-group-item treeview-item ml-3 border-0">Info</a>
<a href="#" data-background="warning" class="changeHeaderBackground list-group-item treeview-item ml-3 border-0">Warning</a>
<a href="#" data-background="quaternary" class="changeHeaderBackground list-group-item treeview-item ml-3 border-0">Quaternary</a>
<a href="#" data-background="quinary" class="changeHeaderBackground list-group-item treeview-item ml-3 border-0">Quinary</a>
<a href="#" data-background="senary" class="changeHeaderBackground list-group-item treeview-item ml-3 border-0">Senary</a>
<a href="#" data-background="septenary" class="changeHeaderBackground list-group-item treeview-item ml-3 border-0">Septenary</a>
<a href="#" data-background="octonary" class="changeHeaderBackground list-group-item treeview-item ml-3 border-0">Octonary</a>
<a href="#" data-background="nonary" class="changeHeaderBackground list-group-item treeview-item ml-3 border-0">Nonary</a>
<a href="#" data-background="denary" class="changeHeaderBackground list-group-item treeview-item ml-3 border-0">Denary</a>
<!-- End header colors categorie sub categorie-->
</div>
</div>
</li>
<li>
<div class="list-group list-group-root border-0">
<!-- Begin sidebar colors categorie -->
<a href="#sidebarColors" class="list-group-item list-group-flush treeview-item border-0 w-100 d-flex" data-toggle="collapse">
Sidebar Colors
<span class="small ml-2">(2)</span>
</a>
<div class="list-group collapse" id="sidebarColors">
<!-- Begin sidebar colors categorie sub categorie-->
<a href="#" data-background="white" class="changeSidebarBackground list-group-item treeview-item ml-3 border-0">White</a>
<a href="#" data-background="dark" class="changeSidebarBackground list-group-item treeview-item ml-3 border-0">Dark</a>
<!-- End sidebar colors categorie sub categorie-->
</div>
</div>
</li>
</ul>
</li>
<!-- END LAYOUT ITEM -->
<!-- BEGIN MESSAGE ITEM -->
<li class="treeview ">
<a class="sidebar-menu-item" href="#" data-toggle="treeview">
<i class="sidebar-menu-icon ion ion-ios-email-outline"></i>
<span class="sidebar-menu-label">
<span data-i18n="sidebar.messages">
</span>
<span class="d-inline-block">
<i class="numberCircle text-white bg-primary ml-2">16</i>
</span>
</span>
<i class="treeview-indicator fa fa-angle-right"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="treeview-item " href="inbox.html" itemprop="url" data-i18n="sidebar.inbox">
</a>
</li>
<li>
<a class="treeview-item " href="compose.html" itemprop="url" data-i18n="sidebar.compose">
</a>
</li>
</ul>
</li>
<!-- END MESSAGE ITEM -->
<!-- BEGIN CHAT ITEM -->
<li class="treeview ">
<a class="sidebar-menu-item" href="#" data-toggle="treeview">
<i class="sidebar-menu-icon ion ion-ios-chatboxes-outline"></i>
<span class="sidebar-menu-label">
<span data-i18n="sidebar.chat">
</span>
<span class="d-inline-block">
<i class="numberCircle text-white bg-primary ml-2">8</i>
</span>
</span>
<i class="treeview-indicator fa fa-angle-right"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="treeview-item " href="chat.html" itemprop="url" data-i18n="sidebar.chatroom">
</a>
</li>
</ul>
</li>
<!-- END CHAT ITEM -->
<!-- BEGIN CALENDAR ITEM -->
<li class="treeview ">
<a class="sidebar-menu-item" href="#" data-toggle="treeview">
<i class="sidebar-menu-icon ion ion-ios-calendar-outline"></i>
<span class="sidebar-menu-label" data-i18n="sidebar.events"></span>
<i class="treeview-indicator fa fa-angle-right"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="treeview-item " href="calendar.html" itemprop="url" data-i18n="sidebar.calendar">
</a>
</li>
<li>
<a class="treeview-item " href="agenda.html" itemprop="url" data-i18n="sidebar.agenda">
</a>
</li>
<li>
<a class="treeview-item " href="listview-events.html" itemprop="url" data-i18n="sidebar.listviewevents">
</a>
</li>
<li>
<a class="treeview-item " href="google-calendar.html" itemprop="url" data-i18n="sidebar.googlecalendar">
</a>
</li>
</ul>
</li>
<!-- END CALENDAR ITEM -->
<!-- BEGIN PROJECT ITEM -->
<li class="treeview ">
<a class="sidebar-menu-item" href="#" data-toggle="treeview">
<i class="sidebar-menu-icon ion ion-ios-paw-outline"></i>
<span class="sidebar-menu-label" data-i18n="sidebar.project"></span>
<i class="treeview-indicator fa fa-angle-right"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="treeview-item " href="project-details.html" itemprop="url" data-i18n="sidebar.projectdetails">
</a>
</li>
<li>
<a class="treeview-item " href="project-tasks.html" itemprop="url" data-i18n="sidebar.projecttasks">
</a>
</li>
<li>
<a class="treeview-item " href="task-message.html" itemprop="url" data-i18n="sidebar.readtask">
</a>
</li>
<li>
<a class="treeview-item " href="new-task.html" itemprop="url" data-i18n="sidebar.newtask">
</a>
</li>
<li>
<a class="treeview-item " href="project-participents.html" itemprop="url" data-i18n="sidebar.projectparticipents">
</a>
</li>
<li>
<a class="treeview-item " href="project-files.html" itemprop="url" data-i18n="sidebar.projectfiles">
</a>
</li>
<li>
<a class="treeview-item " href="project-discussions.html" itemprop="url" data-i18n="sidebar.projectdiscussions">
</a>
</li>
<li>
<a class="treeview-item " href="project-tickets.html" itemprop="url" data-i18n="sidebar.projecttickets">
</a>
</li>
<li>
<a class="treeview-item " href="ticket.html" itemprop="url" data-i18n="sidebar.readticket">
</a>
</li>
<li>
<a class="treeview-item " href="new-ticket.html" itemprop="url" data-i18n="sidebar.createticket">
</a>
</li>
<li>
<a class="treeview-item " href="project-notes.html" itemprop="url" data-i18n="sidebar.projectnotes">
</a>
</li>
</ul>
</li>
<!-- END PROJECT ITEM -->
<!-- BEGIN SALES ITEM -->
<li class="treeview ">
<a class="sidebar-menu-item" href="#" data-toggle="treeview">
<i class="sidebar-menu-icon ion ion-ios-cart-outline"></i>
<span class="sidebar-menu-label" data-i18n="sidebar.sales"></span>
<i class="treeview-indicator fa fa-angle-right"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="treeview-item " href="shopping-cart.html" itemprop="url" data-i18n="sidebar.shoppingcart">
</a>
</li>
<li>
<a class="treeview-item " href="checkout.html" itemprop="url" data-i18n="sidebar.billingpayments">
</a>
</li>
<li>
<a class="treeview-item " href="invoice.html" itemprop="url" data-i18n="sidebar.invoice">
</a>
</li>
</ul>
</li>
<!-- END SALES ITEM -->
<!-- BEGIN CHARTS ITEM -->
<li class="treeview ">
<a class="sidebar-menu-item" href="#" data-toggle="treeview">
<i class="sidebar-menu-icon ion ion-ios-pulse"></i>
<span class="sidebar-menu-label" data-i18n="sidebar.charts"></span>
<i class="treeview-indicator fa fa-angle-right"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="treeview-item " href="bar-charts.html" itemprop="url" data-i18n="sidebar.barcharts">
</a>
</li>
<li>
<a class="treeview-item " href="line-charts.html" itemprop="url" data-i18n="sidebar.linecharts">
</a>
</li>
<li>
<a class="treeview-item " href="area-charts.html" itemprop="url" data-i18n="sidebar.areacharts">
</a>
</li>
<li>
<a class="treeview-item " href="other-charts.html" itemprop="url" data-i18n="sidebar.othercharts">
</a>
</li>
<li>
<a class="treeview-item " href="flot-charts.html" itemprop="url" data-i18n="sidebar.flotcharts">
</a>
</li>
<li>
<a class="treeview-item " href="echarts.html" itemprop="url" data-i18n="sidebar.echarts">
</a>
</li>
</ul>
</li>
<!-- END CHARTS ITEM -->
<!-- BEGIN TABLES ITEM -->
<li class="treeview ">
<a class="sidebar-menu-item" href="#" data-toggle="treeview">
<i class="sidebar-menu-icon ion ion-ios-list-outline"></i>
<span class="sidebar-menu-label" data-i18n="sidebar.tables"></span>
<i class="treeview-indicator fa fa-angle-right"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="treeview-item " href="basic-tables.html" itemprop="url" data-i18n="sidebar.basictables">
</a>
</li>
<li>
<a class="treeview-item " href="multi-lang-tables.html" itemprop="url" data-i18n="sidebar.multilangtables">
</a>
</li>
<li>
<a class="treeview-item " href="column-searching-tables.html" itemprop="url"
data-i18n="sidebar.columnsearchingtables">
</a>
</li>
<li>
<a class="treeview-item " href="show-hide-dynamically-tables.html" itemprop="url"
data-i18n="sidebar.showhidedynamicallytables">
</a>
</li>
<li>
<a class="treeview-item " href="tabs-tables.html" itemprop="url" data-i18n="sidebar.tabstables">
</a>
</li>
</ul>
</li>
<!-- END TABLES ITEM -->
<!-- BEGIN FORMS ITEM -->
<li class="treeview ">
<a class="sidebar-menu-item" href="#" data-toggle="treeview">
<i class="sidebar-menu-icon ion ion-ios-paper-outline"></i>
<span class="sidebar-menu-label" data-i18n="sidebar.forms">Forms</span>
<i class="treeview-indicator fa fa-angle-right"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="treeview-item " href="form-components.html" itemprop="url" data-i18n="sidebar.formcomponents">
</a>
</li>
<li>
<a class="treeview-item " href="form-extended.html" itemprop="url" data-i18n="sidebar.formextended">
</a>
</li>
<li>
<a class="treeview-item " href="summernote.html" itemprop="url" data-i18n="sidebar.summernote">
</a>
</li>
<li>
<a class="treeview-item " href="dropzone.html" itemprop="url" data-i18n="sidebar.dropzone">
</a>
</li>
<li>
<a class="treeview-item " href="inputmask.html" itemprop="url" data-i18n="sidebar.inputmask">
</a>
</li>
<li>
<a class="treeview-item " href="bootstrap-slider.html" itemprop="url" data-i18n="sidebar.bootstrapslider">
</a>
</li>
<li>
<a class="treeview-item " href="ion-range-slider.html" itemprop="url" data-i18n="sidebar.ionrangeslider">
</a>
</li>
</ul>
</li>
<!-- END FORMS ITEM -->
<!-- BEGIN FEEDBACK ITEM -->
<li class="treeview ">
<a class="sidebar-menu-item" href="#" data-toggle="treeview">
<i class="sidebar-menu-icon ion ion-ios-bell-outline"></i>
<span class="sidebar-menu-label">
<span data-i18n="sidebar.feedback">
</span>
<span class="d-inline-block">
<i class="numberCircle text-white bg-primary ml-2">12</i>
</span>
</span>
<i class="treeview-indicator fa fa-angle-right"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="treeview-item " href="toastr.html" itemprop="url" data-i18n="sidebar.toastr">
</a>
</li>
<li>
<a class="treeview-item " href="sweetalert.html" itemprop="url" data-i18n="sidebar.sweetalert">
</a>
</li>
</ul>
</li>
<!-- END FEEDBACK ITEM -->
<!-- BEGIN MAPS ITEM -->
<li class="treeview ">
<a class="sidebar-menu-item" href="#" data-toggle="treeview">
<i class="sidebar-menu-icon ion ion-ios-location-outline"></i>
<span class="sidebar-menu-label" data-i18n="sidebar.maps"></span>
<i class="treeview-indicator fa fa-angle-right"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="treeview-item " href="clickable-maps.html" itemprop="url" data-i18n="sidebar.jqvmap">
</a>
</li>
<li>
<a class="treeview-item " href="google-maps.html" itemprop="url" data-i18n="sidebar.googlemap">
</a>
</li>
</ul>
</li>
<!-- END MAPS ITEM -->
<!-- BEGIN UI ELEMENTS ITEM -->
<li class="treeview is-expanded">
<a class="sidebar-menu-item" href="#" data-toggle="treeview">
<i class="sidebar-menu-icon ion ion-ios-barcode-outline"></i>
<span class="sidebar-menu-label" data-i18n="sidebar.uielements">Ui Elements</span>
<i class="treeview-indicator fa fa-angle-right"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="treeview-item " href="color-shades.html" itemprop="url">
Color Shades</a>
</li>
<li>
<a class="treeview-item " href="shortcode-alerts.html" itemprop="url">
Alerts</a>
</li>
<li>
<a class="treeview-item " href="shortcode-badges.html" itemprop="url">
Badges</a>
</li>
<li>
<a class="treeview-item " href="shortcode-boxes.html" itemprop="url">
Boxes</a>
</li>
<li>
<a class="treeview-item " href="shortcode-buttons.html" itemprop="url">
Buttons</a>
</li>
<li>
<a class="treeview-item " href="shortcode-cards.html" itemprop="url">
Cards</a>
</li>
<li>
<a class="treeview-item " href="shortcode-collapse.html" itemprop="url">
Collapse</a>
</li>
<li>
<a class="treeview-item " href="shortcode-lines.html" itemprop="url">
Lines</a>
</li>
<li>
<a class="treeview-item active" href="shortcode-navs.html" itemprop="url">
Navigation</a>
</li>
<li>
<a class="treeview-item " href="shortcode-pagination.html" itemprop="url">
Pagination</a>
</li>
<li>
<a class="treeview-item " href="shortcode-popovers.html" itemprop="url">
Popovers</a>
</li>
<li>
<a class="treeview-item " href="shortcode-progress.html" itemprop="url">
Progress Bars</a>
</li>
<li>
<a class="treeview-item " href="shortcode-tooltips.html" itemprop="url">
Tooltips</a>
</li>
</ul>
</li>
<!-- END UI ELEMENTS ITEM -->
<!-- BEGIN EXTRA PAGES ITEM -->
<li class="treeview ">
<a class="sidebar-menu-item" href="#" data-toggle="treeview">
<i class="sidebar-menu-icon ion ion-ios-albums-outline"></i>
<span class="sidebar-menu-label" data-i18n="sidebar.extrapages"></span>
<i class="treeview-indicator fa fa-angle-right"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="treeview-item" href="login.html" itemprop="url" data-i18n="sidebar.login">
</a>
</li>
<li>
<a class="treeview-item" href="register.html" itemprop="url" data-i18n="sidebar.register">
</a>
</li>
<li>
<a class="treeview-item " href="error-404.html" itemprop="url" data-i18n="sidebar.error404">
</a>
</li>
<li>
<a class="treeview-item " href="under-construction.html" itemprop="url" data-i18n="sidebar.underconstruction">
</a>
</li>
<li class="pb-5">
<a class="treeview-item " href="blank.html" itemprop="url" data-i18n="sidebar.blankpage">
</a>
</li>
<!-- END EXTRA PAGES ITEM -->
</ul>
</li>
</ul>
</aside>
<!-- END SIDEBAR MENU -->
<main class="app-content">
<!-- BEGIN BREADCRUMB -->
<div class="d-none d-md-flex bg-white d-print-none breadcrumb-container">
<div class="row no-gutters w-100">
<div class="col-md-6 d-flex justify-content-start">
<div class="my-auto d-flex flex-row">
<div class="my-auto text-dark">
<i class="size-24 ion ion-ios-barcode-outline"></i>
</div>
<div class="ml-4 my-auto border-left border-dark">
</div>
<div class="my-auto ml-3 font-weight-bold text-dark">Navigation Shortcode</div>
</div>
</div>
<div class="col-md-6 d-flex">
<ul class="ml-md-auto breadcrumb bg-white my-auto p-0">
<li class="breadcrumb-item">
<i class="ion size-16 ion-ios-home-outline text-dark mr-2"></i>
<a href="index.html" class="text-dark font-weight-light" data-i18n="breadcrumb.home"></a>
</li>
<li class="breadcrumb-item">
<a href="shortcode-navs.html" class="text-dark font-weight-light mr-2">UI Elements</a>
</li>
<li class="breadcrumb-item active font-weight-light m-0 p-0" aria-current="page">Navigation Shortcode
</li>
</ul>
</div>
<!-- end ./col-md-6 -->
</div>
<!-- end ./row -->
</div>
<!--end ./ -->
<!-- END BREADCRUMB -->
<div class="page">
<div class="page-header">
<div class="row">
<div class="col-md-6">
<div class="page-title h4">Navigation between tabs example</div>
<div class="page-subtitle">Add new colors and classes
</div>
</div>
<div class="col-md-6 d-flex flex-row justify-content-md-end mt-3 mt-md-0">
<div class="align-self-end">
<div class="d-flex flex-column">
<div class="my-auto mr-auto font-weight-light">
<div class="h5 text-dark mb-0" data-i18n="table.tasks"></div>
<span class="counter" data-count="116">0</span>
<span data-i18n="table.thisweek"></span>
</div>
</div>
</div>
<div class="align-self-center d-flex">
<div class="sparkreveal ml-auto mt-auto"></div>
</div>
</div>
</div>
</div>
<div class="page-body">
<div class="row">
<div class="col-md-6">
<div class="x-card">
<div class="x-card-header">
<div class="x-card-title h4">Bootstrap Use</div>
<a class="heading-elements-toggle">
<i class="ion size-18 ion-ios-more"></i>
</a>
<div class="heading-elements">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a data-action="collapse">
<i class="ion ion-minus-round"></i>
</a>
</li>
<li class="list-inline-item">
<a data-action="close">
<i class="ion ion-android-close"></i>
</a>
</li>
<li class="list-inline-item">
<a data-action="reload">
<i class="ion ion-android-refresh"></i>
</a>
</li>
<li class="list-inline-item">
<a data-action="expand">
<i class="ion ion-android-expand"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="x-card-body collapse show">
<div class="mb-4">
Use
<code>.nav-pills</code> and tabs content.
</div>
<ul class="nav nav-pills flex-column flex-md-row mb-3" id="tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="pill" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="pill" href="#profile" role="tab" aria-controls="profile" aria-expanded="true">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="settings-tab" data-toggle="pill" href="#settings" role="tab" aria-controls="settings" aria-expanded="true">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" id="notifications-tab" data-toggle="pill" href="#notifications" role="tab" aria-controls="notifications"
aria-expanded="true">Notifications</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="pill" aria-controls="dropdown1">Tab 1</a>
<a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="pill" aria-controls="dropdown2">Tab 2</a>
</div>
</li>
</ul>
<div class="tab-content" id="tabContent1">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<p>Aliquam a porttitor justo. Duis eget dictum mauris. Phasellus vehicula vulputate rutrum.
Sed bibendum urna vitae lobortis iaculis. In hac habitasse platea dictumst. Duis pulvinar
magna eu augue ullamcorper, nec semper mi aliquam. Maecenas at tincidunt augue, sed sollicitudin
elit. Nam nibh nisl, faucibus non ante sit amet, facilisis tempor arcu. Nulla ut sodales
tellus. Nunc hendrerit vitae mi maximus tempus. Donec erat mauris, tincidunt in ornare
sed, tincidunt egestas nisi. Aliquam erat volutpat. Etiam non massa at orci vulputate
condimentum. Etiam mattis arcu non dolor tempus maximus.
</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at facilisis ligula. Mauris semper
pulvinar lorem, in laoreet felis mollis at. Donec eros est, posuere vitae blandit vel,
facilisis a arcu. Nulla placerat id eros ut dictum. Nulla molestie dui id mauris aliquam
varius. Donec sed mi vel dolor suscipit feugiat sed non leo. Orci varius natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Quisque velit leo, porta vel
congue eu, consectetur id nisl.</p>
</div>
<div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
<p>Aliquam vitae malesuada enim. Curabitur et vestibulum sem. Pellentesque leo ligula, convallis
nec vehicula convallis, pharetra sed mauris. Curabitur neque purus, luctus sit amet nunc
non, pellentesque interdum sapien. Integer ut dapibus lectus, ac porttitor turpis. Quisque
tellus eros, congue et eros sed, imperdiet tincidunt lorem. Nullam at ipsum egestas,
elementum leo quis, tincidunt felis. Donec placerat aliquam facilisis. Sed ut tincidunt
ante. In sem magna, fermentum ut turpis id, imperdiet accumsan tortor.</p>
</div>
<div class="tab-pane fade" id="notifications" role="tabpanel" aria-labelledby="notifications-tab">
<p>Sed interdum felis sit amet massa euismod, convallis sagittis ex tempor. Suspendisse sed
massa hendrerit, elementum augue non, porttitor enim. Duis ut enim lacinia, tincidunt
ligula at, mattis ante. Praesent dapibus sem ante. Nulla hendrerit ullamcorper risus,
nec interdum nibh consectetur ac. Sed hendrerit tellus eros, sit amet ultrices erat tincidunt
et.</p>
</div>
<div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">
<p>Curabitur varius risus quis egestas consectetur. Donec suscipit ornare nulla, sit amet luctus
sapien sagittis pharetra. Duis tincidunt libero risus, a tempor risus suscipit ac. Suspendisse
et felis eu ante aliquam facilisis eu ut orci. Praesent ut nunc eget tellus aliquam rhoncus
eu quis est. Nunc a tellus et ante gravida vulputate non ac dui. Proin auctor nunc dolor,
quis laoreet leo faucibus eu. Duis bibendum pulvinar est
</p>
</div>
<div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">
<p>Aliquam malesuada vestibulum mauris quis venenatis. Mauris libero erat, ultricies vitae elit
ut, pellentesque suscipit ex. Sed porta malesuada turpis a tincidunt. Sed massa quam,
gravida dapibus justo a, gravida aliquam lectus. Nam sit amet turpis nec mi varius tincidunt.
Proin lobortis et justo vel luctus. Mauris pellentesque justo eu turpis pulvinar consectetur.
Integer felis neque, interdum a consequat vel, tincidunt at nulla. Quisque ut sem facilisis
libero aliquam posuere a sed justo. Etiam sed dapibus tortor, nec euismod enim. Donec
commodo sed orci eget laoreet. Donec aliquam ex ut diam pulvinar, non semper neque dictum.
Nullam ornare accumsan tellus at bibendum.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="x-card">
<div class="x-card-header">
<div class="x-card-title h4">Nav Pills</div>
<a class="heading-elements-toggle">
<i class="ion size-18 ion-ios-more"></i>
</a>
<div class="heading-elements">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a data-action="collapse">
<i class="ion ion-minus-round"></i>
</a>
</li>
<li class="list-inline-item">
<a data-action="close">
<i class="ion ion-android-close"></i>
</a>
</li>
<li class="list-inline-item">
<a data-action="reload">
<i class="ion ion-android-refresh"></i>
</a>
</li>
<li class="list-inline-item">
<a data-action="expand">
<i class="ion ion-android-expand"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="x-card-body collapse show">
<div class="mb-4">
Use
<code>.nav-pills .nav-pills-primary</code> and pills will be rounded.
</div>
<ul class="nav nav-pills-primary flex-column flex-md-row mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home"
aria-expanded="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile"
aria-expanded="true">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-settings-tab" data-toggle="pill" href="#pills-settings" role="tab" aria-controls="pills-settings"
aria-expanded="true">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-notifications-tab" data-toggle="pill" href="#pills-notifications" role="tab" aria-controls="pills-notifications"
aria-expanded="true">Notifications</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">@fat</a>
<a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">@mdo</a>
</div>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<p>Aliquam a porttitor justo. Duis eget dictum mauris. Phasellus vehicula vulputate rutrum.
Sed bibendum urna vitae lobortis iaculis. In hac habitasse platea dictumst. Duis pulvinar
magna eu augue ullamcorper, nec semper mi aliquam. Maecenas at tincidunt augue, sed sollicitudin
elit. Nam nibh nisl, faucibus non ante sit amet, facilisis tempor arcu. Nulla ut sodales
tellus. Nunc hendrerit vitae mi maximus tempus. Donec erat mauris, tincidunt in ornare
sed, tincidunt egestas nisi. Aliquam erat volutpat. Etiam non massa at orci vulputate
condimentum. Etiam mattis arcu non dolor tempus maximus.
</p>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at facilisis ligula. Mauris semper
pulvinar lorem, in laoreet felis mollis at. Donec eros est, posuere vitae blandit vel,
facilisis a arcu. Nulla placerat id eros ut dictum. Nulla molestie dui id mauris aliquam
varius. Donec sed mi vel dolor suscipit feugiat sed non leo. Orci varius natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Quisque velit leo, porta vel
congue eu, consectetur id nisl.</p>
</div>
<div class="tab-pane fade" id="pills-settings" role="tabpanel" aria-labelledby="pills-settings-tab">
<p>Aliquam vitae malesuada enim. Curabitur et vestibulum sem. Pellentesque leo ligula, convallis
nec vehicula convallis, pharetra sed mauris. Curabitur neque purus, luctus sit amet nunc
non, pellentesque interdum sapien. Integer ut dapibus lectus, ac porttitor turpis. Quisque
tellus eros, congue et eros sed, imperdiet tincidunt lorem. Nullam at ipsum egestas,
elementum leo quis, tincidunt felis. Donec placerat aliquam facilisis. Sed ut tincidunt
ante. In sem magna, fermentum ut turpis id, imperdiet accumsan tortor.</p>
</div>
<div class="tab-pane fade" id="pills-notifications" role="tabpanel" aria-labelledby="pills-notifications-tab">
<p>Sed interdum felis sit amet massa euismod, convallis sagittis ex tempor. Suspendisse sed
massa hendrerit, elementum augue non, porttitor enim. Duis ut enim lacinia, tincidunt
ligula at, mattis ante. Praesent dapibus sem ante. Nulla hendrerit ullamcorper risus,
nec interdum nibh consectetur ac. Sed hendrerit tellus eros, sit amet ultrices erat tincidunt
et.</p>
</div>
<div class="tab-pane fade" id="pills-dropdown1" role="tabpanel" aria-labelledby="pills-dropdown1-tab">
<p>Curabitur varius risus quis egestas consectetur. Donec suscipit ornare nulla, sit amet luctus
sapien sagittis pharetra. Duis tincidunt libero risus, a tempor risus suscipit ac. Suspendisse
et felis eu ante aliquam facilisis eu ut orci. Praesent ut nunc eget tellus aliquam rhoncus
eu quis est. Nunc a tellus et ante gravida vulputate non ac dui. Proin auctor nunc dolor,
quis laoreet leo faucibus eu. Duis bibendum pulvinar est
</p>
</div>
<div class="tab-pane fade" id="pills-dropdown2" role="tabpanel" aria-labelledby="pills-dropdown2-tab">
<p>Aliquam malesuada vestibulum mauris quis venenatis. Mauris libero erat, ultricies vitae elit
ut, pellentesque suscipit ex. Sed porta malesuada turpis a tincidunt. Sed massa quam,
gravida dapibus justo a, gravida aliquam lectus. Nam sit amet turpis nec mi varius tincidunt.
Proin lobortis et justo vel luctus. Mauris pellentesque justo eu turpis pulvinar consectetur.
Integer felis neque, interdum a consequat vel, tincidunt at nulla. Quisque ut sem facilisis
libero aliquam posuere a sed justo. Etiam sed dapibus tortor, nec euismod enim. Donec
commodo sed orci eget laoreet. Donec aliquam ex ut diam pulvinar, non semper neque dictum.
Nullam ornare accumsan tellus at bibendum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="x-card">
<div class="x-card-header">
<div class="x-card-title h4">Nav masthead</div>
<a class="heading-elements-toggle">
<i class="ion size-18 ion-ios-more"></i>
</a>
<div class="heading-elements">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a data-action="collapse">
<i class="ion ion-minus-round"></i>
</a>
</li>
<li class="list-inline-item">
<a data-action="close">
<i class="ion ion-android-close"></i>
</a>
</li>
<li class="list-inline-item">
<a data-action="reload">
<i class="ion ion-android-refresh"></i>
</a>
</li>
<li class="list-inline-item">
<a data-action="expand">
<i class="ion ion-android-expand"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="x-card-body collapse show">
<div class="mb-4">
Add new class
<code>.nav nav-masthead-primary</code> with color choice.
</div>
<ul class="nav nav-masthead-primary flex-column flex-md-row mb-3" id="masthead-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="masthead-home-tab" data-toggle="pill" href="#masthead-home" role="tab" aria-controls="masthead-home"
aria-expanded="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="masthead-profile-tab" data-toggle="pill" href="#masthead-profile" role="tab" aria-controls="masthead-profile"
aria-expanded="true">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="masthead-settings-tab" data-toggle="pill" href="#masthead-settings" role="tab" aria-controls="masthead-settings"
aria-expanded="true">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" id="masthead-notifications-tab" data-toggle="pill" href="#masthead-notifications" role="tab" aria-controls="masthead-notifications"
aria-expanded="true">Notifications</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="masthead-dropdown1-tab" href="#masthead-dropdown1" role="tab" data-toggle="pill" aria-controls="masthead-dropdown1">@fat</a>
<a class="dropdown-item" id="masthead-dropdown2-tab" href="#masthead-dropdown2" role="tab" data-toggle="pill" aria-controls="masthead-dropdown2">@mdo</a>
</div>
</li>
</ul>
<div class="tab-content" id="tabContent3">
<div class="tab-pane fade show active" id="masthead-home" role="tabpanel" aria-labelledby="home-tab">
<p>Aliquam a porttitor justo. Duis eget dictum mauris. Phasellus vehicula vulputate rutrum.
Sed bibendum urna vitae lobortis iaculis. In hac habitasse platea dictumst. Duis pulvinar
magna eu augue ullamcorper, nec semper mi aliquam. Maecenas at tincidunt augue, sed sollicitudin
elit. Nam nibh nisl, faucibus non ante sit amet, facilisis tempor arcu. Nulla ut sodales
tellus. Nunc hendrerit vitae mi maximus tempus. Donec erat mauris, tincidunt in ornare
sed, tincidunt egestas nisi. Aliquam erat volutpat. Etiam non massa at orci vulputate
condimentum. Etiam mattis arcu non dolor tempus maximus.
</p>
</div>
<div class="tab-pane fade" id="masthead-profile" role="tabpanel" aria-labelledby="profile-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at facilisis ligula. Mauris semper
pulvinar lorem, in laoreet felis mollis at. Donec eros est, posuere vitae blandit vel,
facilisis a arcu. Nulla placerat id eros ut dictum. Nulla molestie dui id mauris aliquam
varius. Donec sed mi vel dolor suscipit feugiat sed non leo. Orci varius natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Quisque velit leo, porta vel
congue eu, consectetur id nisl.</p>
</div>
<div class="tab-pane fade" id="masthead-settings" role="tabpanel" aria-labelledby="settings-tab">
<p>Aliquam vitae malesuada enim. Curabitur et vestibulum sem. Pellentesque leo ligula, convallis
nec vehicula convallis, pharetra sed mauris. Curabitur neque purus, luctus sit amet nunc
non, pellentesque interdum sapien. Integer ut dapibus lectus, ac porttitor turpis. Quisque
tellus eros, congue et eros sed, imperdiet tincidunt lorem. Nullam at ipsum egestas,
elementum leo quis, tincidunt felis. Donec placerat aliquam facilisis. Sed ut tincidunt
ante. In sem magna, fermentum ut turpis id, imperdiet accumsan tortor.</p>
</div>
<div class="tab-pane fade" id="masthead-notifications" role="tabpanel" aria-labelledby="notifications-tab">
<p>Sed interdum felis sit amet massa euismod, convallis sagittis ex tempor. Suspendisse sed
massa hendrerit, elementum augue non, porttitor enim. Duis ut enim lacinia, tincidunt
ligula at, mattis ante. Praesent dapibus sem ante. Nulla hendrerit ullamcorper risus,
nec interdum nibh consectetur ac. Sed hendrerit tellus eros, sit amet ultrices erat tincidunt
et.</p>
</div>
<div class="tab-pane fade" id="masthead-dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">
<p>Curabitur varius risus quis egestas consectetur. Donec suscipit ornare nulla, sit amet luctus
sapien sagittis pharetra. Duis tincidunt libero risus, a tempor risus suscipit ac. Suspendisse
et felis eu ante aliquam facilisis eu ut orci. Praesent ut nunc eget tellus aliquam rhoncus
eu quis est. Nunc a tellus et ante gravida vulputate non ac dui. Proin auctor nunc dolor,
quis laoreet leo faucibus eu. Duis bibendum pulvinar est
</p>
</div>
<div class="tab-pane fade" id="masthead-dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">
<p>Aliquam malesuada vestibulum mauris quis venenatis. Mauris libero erat, ultricies vitae elit
ut, pellentesque suscipit ex. Sed porta malesuada turpis a tincidunt. Sed massa quam,
gravida dapibus justo a, gravida aliquam lectus. Nam sit amet turpis nec mi varius tincidunt.
Proin lobortis et justo vel luctus. Mauris pellentesque justo eu turpis pulvinar consectetur.
Integer felis neque, interdum a consequat vel, tincidunt at nulla. Quisque ut sem facilisis
libero aliquam posuere a sed justo. Etiam sed dapibus tortor, nec euismod enim. Donec
commodo sed orci eget laoreet. Donec aliquam ex ut diam pulvinar, non semper neque dictum.
Nullam ornare accumsan tellus at bibendum.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="x-card">
<div class="x-card-header">
<div class="x-card-title h4">Fill justify</div>
<a class="heading-elements-toggle">
<i class="ion size-18 ion-ios-more"></i>
</a>
<div class="heading-elements">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a data-action="collapse">
<i class="ion ion-minus-round"></i>
</a>
</li>
<li class="list-inline-item">
<a data-action="close">
<i class="ion ion-android-close"></i>
</a>
</li>
<li class="list-inline-item">
<a data-action="reload">
<i class="ion ion-android-refresh"></i>
</a>
</li>
<li class="list-inline-item">
<a data-action="expand">
<i class="ion ion-android-expand"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="x-card-body collapse show">
<div class="mb-4">
Add new class
<code>.nav .nav-pills-primary .nav-fill</code> with color choice.
</div>
<ul class="nav nav-pills-primary nav-fill" id="fill-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="fill-home-tab" data-toggle="pill" href="#fill-home" role="tab" aria-controls="masthead-home"
aria-expanded="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="fill-profile-tab" data-toggle="pill" href="#fill-profile" role="tab" aria-controls="masthead-profile"
aria-expanded="true">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="fill-settings-tab" data-toggle="pill" href="#fill-settings" role="tab" aria-controls="masthead-settings"
aria-expanded="true">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" id="fill-notifications-tab" data-toggle="pill" href="#fill-notifications" role="tab" aria-controls="masthead-notifications"
aria-expanded="true">Notifications</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="fill-dropdown1-tab" href="#fill-dropdown1" role="tab" data-toggle="pill" aria-controls="masthead-dropdown1">@fat</a>
<a class="dropdown-item" id="fill-dropdown2-tab" href="#fill-dropdown2" role="tab" data-toggle="pill" aria-controls="masthead-dropdown2">@mdo</a>
</div>
</li>
</ul>
<div class="tab-content mt-4" id="tabContent4">
<div class="tab-pane fade show active" id="fill-home" role="tabpanel" aria-labelledby="home-tab">
<p>Aliquam a porttitor justo. Duis eget dictum mauris. Phasellus vehicula vulputate rutrum.
Sed bibendum urna vitae lobortis iaculis. In hac habitasse platea dictumst. Duis pulvinar
magna eu augue ullamcorper, nec semper mi aliquam. Maecenas at tincidunt augue, sed sollicitudin
elit. Nam nibh nisl, faucibus non ante sit amet, facilisis tempor arcu. Nulla ut sodales
tellus. Nunc hendrerit vitae mi maximus tempus. Donec erat mauris, tincidunt in ornare
sed, tincidunt egestas nisi. Aliquam erat volutpat. Etiam non massa at orci vulputate
condimentum. Etiam mattis arcu non dolor tempus maximus.
</p>
</div>
<div class="tab-pane fade" id="fill-profile" role="tabpanel" aria-labelledby="profile-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at facilisis ligula. Mauris semper
pulvinar lorem, in laoreet felis mollis at. Donec eros est, posuere vitae blandit vel,
facilisis a arcu. Nulla placerat id eros ut dictum. Nulla molestie dui id mauris aliquam
varius. Donec sed mi vel dolor suscipit feugiat sed non leo. Orci varius natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Quisque velit leo, porta vel
congue eu, consectetur id nisl.</p>
</div>
<div class="tab-pane fade" id="fill-settings" role="tabpanel" aria-labelledby="settings-tab">
<p>Aliquam vitae malesuada enim. Curabitur et vestibulum sem. Pellentesque leo ligula, convallis
nec vehicula convallis, pharetra sed mauris. Curabitur neque purus, luctus sit amet nunc
non, pellentesque interdum sapien. Integer ut dapibus lectus, ac porttitor turpis. Quisque
tellus eros, congue et eros sed, imperdiet tincidunt lorem. Nullam at ipsum egestas,
elementum leo quis, tincidunt felis. Donec placerat aliquam facilisis. Sed ut tincidunt
ante. In sem magna, fermentum ut turpis id, imperdiet accumsan tortor.</p>
</div>
<div class="tab-pane fade" id="fill-notifications" role="tabpanel" aria-labelledby="notifications-tab">
<p>Sed interdum felis sit amet massa euismod, convallis sagittis ex tempor. Suspendisse sed
massa hendrerit, elementum augue non, porttitor enim. Duis ut enim lacinia, tincidunt
ligula at, mattis ante. Praesent dapibus sem ante. Nulla hendrerit ullamcorper risus,
nec interdum nibh consectetur ac. Sed hendrerit tellus eros, sit amet ultrices erat tincidunt
et.</p>
</div>
<div class="tab-pane fade" id="fill-dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">
<p>Curabitur varius risus quis egestas consectetur. Donec suscipit ornare nulla, sit amet luctus
sapien sagittis pharetra. Duis tincidunt libero risus, a tempor risus suscipit ac. Suspendisse
et felis eu ante aliquam facilisis eu ut orci. Praesent ut nunc eget tellus aliquam rhoncus
eu quis est. Nunc a tellus et ante gravida vulputate non ac dui. Proin auctor nunc dolor,
quis laoreet leo faucibus eu. Duis bibendum pulvinar est
</p>
</div>
<div class="tab-pane fade" id="fill-dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">
<p>Aliquam malesuada vestibulum mauris quis venenatis. Mauris libero erat, ultricies vitae elit
ut, pellentesque suscipit ex. Sed porta malesuada turpis a tincidunt. Sed massa quam,
gravida dapibus justo a, gravida aliquam lectus. Nam sit amet turpis nec mi varius tincidunt.
Proin lobortis et justo vel luctus. Mauris pellentesque justo eu turpis pulvinar consectetur.
Integer felis neque, interdum a consequat vel, tincidunt at nulla. Quisque ut sem facilisis
libero aliquam posuere a sed justo. Etiam sed dapibus tortor, nec euismod enim. Donec
commodo sed orci eget laoreet. Donec aliquam ex ut diam pulvinar, non semper neque dictum.
Nullam ornare accumsan tellus at bibendum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="x-card">
<div class="x-card-header">
<div class="x-card-title h4">Fill justify end</div>
<a class="heading-elements-toggle">
<i class="ion size-18 ion-ios-more"></i>
</a>
<div class="heading-elements">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a data-action="collapse">
<i class="ion ion-minus-round"></i>
</a>
</li>
<li class="list-inline-item">
<a data-action="close">
<i class="ion ion-android-close"></i>
</a>
</li>
<li class="list-inline-item">
<a data-action="reload">
<i class="ion ion-android-refresh"></i>
</a>
</li>
<li class="list-inline-item">
<a data-action="expand">
<i class="ion ion-android-expand"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="x-card-body collapse show">
<div class="mb-4">
Add new class
<code>.nav .nav-pills-primary .justify-content-end</code> with color choice.
</div>
<ul class="nav nav-pills-primary justify-content-end" id="justify-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="justify-home-tab" data-toggle="pill" href="#justify-home" role="tab" aria-controls="masthead-home"
aria-expanded="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="justify-profile-tab" data-toggle="pill" href="#justify-profile" role="tab" aria-controls="masthead-profile"
aria-expanded="true">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="justify-settings-tab" data-toggle="pill" href="#justify-settings" role="tab" aria-controls="masthead-settings"
aria-expanded="true">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" id="justify-notifications-tab" data-toggle="pill" href="#justify-notifications" role="tab" aria-controls="masthead-notifications"
aria-expanded="true">Notifications</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="justify-dropdown1-tab" href="#justify-dropdown1" role="tab" data-toggle="pill" aria-controls="masthead-dropdown1">@fat</a>
<a class="dropdown-item" id="justify-dropdown2-tab" href="#justify-dropdown2" role="tab" data-toggle="pill" aria-controls="masthead-dropdown2">@mdo</a>
</div>
</li>
</ul>
<div class="tab-content mt-4" id="tabContent5">
<div class="tab-pane fade show active" id="justify-home" role="tabpanel" aria-labelledby="home-tab">
<p>Aliquam a porttitor justo. Duis eget dictum mauris. Phasellus vehicula vulputate rutrum.
Sed bibendum urna vitae lobortis iaculis. In hac habitasse platea dictumst. Duis pulvinar
magna eu augue ullamcorper, nec semper mi aliquam. Maecenas at tincidunt augue, sed sollicitudin
elit. Nam nibh nisl, faucibus non ante sit amet, facilisis tempor arcu. Nulla ut sodales
tellus. Nunc hendrerit vitae mi maximus tempus. Donec erat mauris, tincidunt in ornare
sed, tincidunt egestas nisi. Aliquam erat volutpat. Etiam non massa at orci vulputate
condimentum. Etiam mattis arcu non dolor tempus maximus.
</p>
</div>
<div class="tab-pane fade" id="justify-profile" role="tabpanel" aria-labelledby="profile-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at facilisis ligula. Mauris semper
pulvinar lorem, in laoreet felis mollis at. Donec eros est, posuere vitae blandit vel,
facilisis a arcu. Nulla placerat id eros ut dictum. Nulla molestie dui id mauris aliquam
varius. Donec sed mi vel dolor suscipit feugiat sed non leo. Orci varius natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Quisque velit leo, porta vel
congue eu, consectetur id nisl.</p>
</div>
<div class="tab-pane fade" id="justify-settings" role="tabpanel" aria-labelledby="settings-tab">
<p>Aliquam vitae malesuada enim. Curabitur et vestibulum sem. Pellentesque leo ligula, convallis
nec vehicula convallis, pharetra sed mauris. Curabitur neque purus, luctus sit amet nunc
non, pellentesque interdum sapien. Integer ut dapibus lectus, ac porttitor turpis. Quisque
tellus eros, congue et eros sed, imperdiet tincidunt lorem. Nullam at ipsum egestas,
elementum leo quis, tincidunt felis. Donec placerat aliquam facilisis. Sed ut tincidunt
ante. In sem magna, fermentum ut turpis id, imperdiet accumsan tortor.</p>
</div>
<div class="tab-pane fade" id="justify-notifications" role="tabpanel" aria-labelledby="notifications-tab">
<p>Sed interdum felis sit amet massa euismod, convallis sagittis ex tempor. Suspendisse sed
massa hendrerit, elementum augue non, porttitor enim. Duis ut enim lacinia, tincidunt
ligula at, mattis ante. Praesent dapibus sem ante. Nulla hendrerit ullamcorper risus,
nec interdum nibh consectetur ac. Sed hendrerit tellus eros, sit amet ultrices erat tincidunt
et.</p>
</div>
<div class="tab-pane fade" id="justify-dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">
<p>Curabitur varius risus quis egestas consectetur. Donec suscipit ornare nulla, sit amet luctus
sapien sagittis pharetra. Duis tincidunt libero risus, a tempor risus suscipit ac. Suspendisse
et felis eu ante aliquam facilisis eu ut orci. Praesent ut nunc eget tellus aliquam rhoncus
eu quis est. Nunc a tellus et ante gravida vulputate non ac dui. Proin auctor nunc dolor,
quis laoreet leo faucibus eu. Duis bibendum pulvinar est
</p>
</div>
<div class="tab-pane fade" id="justify-dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">
<p>Aliquam malesuada vestibulum mauris quis venenatis. Mauris libero erat, ultricies vitae elit
ut, pellentesque suscipit ex. Sed porta malesuada turpis a tincidunt. Sed massa quam,
gravida dapibus justo a, gravida aliquam lectus. Nam sit amet turpis nec mi varius tincidunt.
Proin lobortis et justo vel luctus. Mauris pellentesque justo eu turpis pulvinar consectetur.
Integer felis neque, interdum a consequat vel, tincidunt at nulla. Quisque ut sem facilisis
libero aliquam posuere a sed justo. Etiam sed dapibus tortor, nec euismod enim. Donec
commodo sed orci eget laoreet. Donec aliquam ex ut diam pulvinar, non semper neque dictum.
Nullam ornare accumsan tellus at bibendum.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="x-card">
<div class="x-card-header">
<div class="x-card-title h4">Vertical</div>
<a class="heading-elements-toggle">
<i class="ion size-18 ion-ios-more"></i>
</a>
<div class="heading-elements">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a data-action="collapse">
<i class="ion ion-minus-round"></i>
</a>
</li>
<li class="list-inline-item">
<a data-action="close">
<i class="ion ion-android-close"></i>
</a>
</li>
<li class="list-inline-item">
<a data-action="reload">
<i class="ion ion-android-refresh"></i>
</a>
</li>
<li class="list-inline-item">
<a data-action="expand">
<i class="ion ion-android-expand"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="x-card-body collapse show">
<div class="mb-4">
Add new class
<code>.nav .nav-pills-primary .d-inline-flex .flex-column</code> with color choice.
</div>
<ul class="nav nav-pills-primary d-inline-flex flex-column" id="column-tab" role="tablist">
<li class="nav-item mb-2">
<a class="nav-link active" id="column-home-tab" data-toggle="pill" href="#column-home" role="tab" aria-controls="masthead-home"
aria-expanded="true">Home</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" id="column-profile-tab" data-toggle="pill" href="#column-profile" role="tab" aria-controls="masthead-profile"
aria-expanded="true">Profile</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" id="column-settings-tab" data-toggle="pill" href="#column-settings" role="tab" aria-controls="masthead-settings"
aria-expanded="true">Settings</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" id="column-notifications-tab" data-toggle="pill" href="#column-notifications" role="tab" aria-controls="masthead-notifications"
aria-expanded="true">Notifications</a>
</li>
<li class="nav-item dropdown mb-2">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="column-dropdown1-tab" href="#column-dropdown1" role="tab" data-toggle="pill" aria-controls="masthead-dropdown1">@fat</a>
<a class="dropdown-item" id="column-dropdown2-tab" href="#column-dropdown2" role="tab" data-toggle="pill" aria-controls="masthead-dropdown2">@mdo</a>
</div>
</li>
</ul>
<div class="tab-content mt-4" id="tabContent6">
<div class="tab-pane fade show active" id="column-home" role="tabpanel" aria-labelledby="home-tab">
<p>Aliquam a porttitor justo. Duis eget dictum mauris. Phasellus vehicula vulputate rutrum.
Sed bibendum urna vitae lobortis iaculis. In hac habitasse platea dictumst. Duis pulvinar
magna eu augue ullamcorper, nec semper mi aliquam. Maecenas at tincidunt augue, sed sollicitudin
elit. Nam nibh nisl, faucibus non ante sit amet, facilisis tempor arcu. Nulla ut sodales
tellus. Nunc hendrerit vitae mi maximus tempus. Donec erat mauris, tincidunt in ornare
sed, tincidunt egestas nisi. Aliquam erat volutpat. Etiam non massa at orci vulputate
condimentum. Etiam mattis arcu non dolor tempus maximus.
</p>
</div>
<div class="tab-pane fade" id="column-profile" role="tabpanel" aria-labelledby="profile-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at facilisis ligula. Mauris semper
pulvinar lorem, in laoreet felis mollis at. Donec eros est, posuere vitae blandit vel,
facilisis a arcu. Nulla placerat id eros ut dictum. Nulla molestie dui id mauris aliquam
varius. Donec sed mi vel dolor suscipit feugiat sed non leo. Orci varius natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Quisque velit leo, porta vel
congue eu, consectetur id nisl.</p>
</div>
<div class="tab-pane fade" id="column-settings" role="tabpanel" aria-labelledby="settings-tab">
<p>Aliquam vitae malesuada enim. Curabitur et vestibulum sem. Pellentesque leo ligula, convallis
nec vehicula convallis, pharetra sed mauris. Curabitur neque purus, luctus sit amet nunc
non, pellentesque interdum sapien. Integer ut dapibus lectus, ac porttitor turpis. Quisque
tellus eros, congue et eros sed, imperdiet tincidunt lorem. Nullam at ipsum egestas,
elementum leo quis, tincidunt felis. Donec placerat aliquam facilisis. Sed ut tincidunt
ante. In sem magna, fermentum ut turpis id, imperdiet accumsan tortor.</p>
</div>
<div class="tab-pane fade" id="column-notifications" role="tabpanel" aria-labelledby="notifications-tab">
<p>Sed interdum felis sit amet massa euismod, convallis sagittis ex tempor. Suspendisse sed
massa hendrerit, elementum augue non, porttitor enim. Duis ut enim lacinia, tincidunt
ligula at, mattis ante. Praesent dapibus sem ante. Nulla hendrerit ullamcorper risus,
nec interdum nibh consectetur ac. Sed hendrerit tellus eros, sit amet ultrices erat tincidunt
et.
</p>
</div>
<div class="tab-pane fade" id="column-dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">
<p>Curabitur varius risus quis egestas consectetur. Donec suscipit ornare nulla, sit amet luctus
sapien sagittis pharetra. Duis tincidunt libero risus, a tempor risus suscipit ac. Suspendisse
et felis eu ante aliquam facilisis eu ut orci. Praesent ut nunc eget tellus aliquam rhoncus
eu quis est. Nunc a tellus et ante gravida vulputate non ac dui. Proin auctor nunc dolor,
quis laoreet leo faucibus eu. Duis bibendum pulvinar est
</p>
</div>
<div class="tab-pane fade" id="column-dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">
<p>Aliquam malesuada vestibulum mauris quis venenatis. Mauris libero erat, ultricies vitae elit
ut, pellentesque suscipit ex. Sed porta malesuada turpis a tincidunt. Sed massa quam,
gravida dapibus justo a, gravida aliquam lectus. Nam sit amet turpis nec mi varius tincidunt.
Proin lobortis et justo vel luctus. Mauris pellentesque justo eu turpis pulvinar consectetur.
Integer felis neque, interdum a consequat vel, tincidunt at nulla. Quisque ut sem facilisis
libero aliquam posuere a sed justo. Etiam sed dapibus tortor, nec euismod enim. Donec
commodo sed orci eget laoreet. Donec aliquam ex ut diam pulvinar, non semper neque dictum.
Nullam ornare accumsan tellus at bibendum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer border-top d-print-none" id="footer">
<div class="row">
<div class="col-md-6 d-flex">
<div class="my-auto text-gray-600 small text-uppercase">
<span data-i18n="dashboard.allright"></span>
<a href="http://themacart.com" class="text-dark">Themacart.com</a>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="ml-md-auto my-auto text-gray-600 small text-uppercase">
<span data-i18n="dashboard.designby"></span>
<a href="http://www.themacart.com/melvin" class="text-dark">Melvin</a>
</div>
</div>
</div>
</footer>
</main>
<div class="collapse-sidebar bg-banner border-left text-white ">
<div class="collapse-sidebar-content d-flex flex-column">
<button class="ml-3 mr-auto btn btn-link" type="button" data-toggle="collapsesidebar" aria-label="Hide Sidebar">
<i class="ion ion-android-arrow-forward size-24"></i>
</button>
<!-- Nav tabs -->
<ul class="nav nav-pills-primary mb-4" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active text-white" id="notifications-tab" data-toggle="tab" href="#notifications" role="tab" aria-controls="notifications"
aria-selected="false">Notification</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Mails</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content collapse-tab-content">
<div class="tab-pane active h-100" id="notifications" role="tabpanel" aria-labelledby="notifications-tab">
<div class="d-flex flex-column align-items-stretch h-100">
<div class="mb-auto">
<div class="p-4 text-center ">
<span class="font-weight-bold text-uppercase h6 my-0" data-i18n="header.newnots"></span>
</div>
</div>
<div class="mCustomScrollbar h-75" data-mcs-theme="dark-thin">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-warning p-3">
<i class="ion ion-ios-people size-24 mt-0 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.filesuploaded"></span>
</p>
<span class="font-weight-light small pull-right">
15 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-primary p-3">
<i class="ion ion-erlenmeyer-flask size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.chatbotinit"></span>
</p>
<span class="font-weight-light small pull-right">
21 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-quaternary p-3">
<i class="ion ion-eye size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.serverfailed"></span>
</p>
<span class="font-weight-light small pull-right">
35 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-success p-3">
<i class="ion ion-flash size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.ticketswaiting"></span>
</p>
<span class="font-weight-light small pull-right">
47 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-info p-3">
<i class="ion ion-funnel size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.newfiles"></span>
</p>
<span class="font-weight-light small pull-right">
1 hour ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-danger p-3">
<i class="ion ion-hammer size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.newproduct"></span>
</p>
<span class="font-weight-light small pull-right">
1 day ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-quinary p-3">
<i class="ion ion-images size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.filesuploaded"></span>
</p>
<span class="font-weight-light small pull-right">
15 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-warning p-3">
<i class="ion ion-ios-analytics size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.chatbotinit"></span>
</p>
<span class="font-weight-light small pull-right">
21 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-primary p-3">
<i class="ion ion-ios-bell size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.serverfailed"></span>
</p>
<span class="font-weight-light small pull-right">
35 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-danger p-3">
<i class="ion ion-ios-briefcase size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.ticketswaiting"></span>
</p>
<span class="font-weight-light small pull-right">
47 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-quinary p-3">
<i class="ion ion-ios-camera size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.newfiles"></span>
</p>
<span class="font-weight-light small pull-right">
1 hour ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="d-flex mr-3">
<span class="numberCircle bg-primary p-3">
<i class="ion ion-ios-people size-24 text-white"></i>
</span>
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.newproduct"></span>
</p>
<span class="font-weight-light small pull-right">
1 day ago
</span>
</div>
</div>
</li>
</ul>
</div>
<div class="mt-auto">
<div class="p-4 text-center">
<a href="#" class="h6 text-center" data-i18n="header.seeallnots"></a>
</div>
</div>
</div>
</div>
<div class="tab-pane h-100" id="messages" role="tabpanel" aria-labelledby="messages-tab">
<div class="d-flex flex-column align-items-stretch h-100">
<div class="mb-auto">
<div class="p-4 text-center ">
<span class="font-weight-bold text-uppercase h6 my-0" data-i18n="header.newnots"></span>
</div>
</div>
<div class="mCustomScrollbar h-75" data-mcs-theme="dark-thin">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="media">
<span class="text-info size-32 d-flex mr-3 ie-cover-fit">
<img src="img/60x60.png" class="img-sq-50 rounded-circle img-profile-dark" alt="User Avatar">
</span>
<i class="bullet bullet-avatar bullet-warning"></i>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.filesuploaded"></span>
</p>
<span class="font-weight-light small">
@frankwilliams
</span>
<span class="font-weight-light small pull-right">
15 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="text-success size-32 d-flex mr-3 ie-cover-fit">
<img src="img/60x60.png" class="img-sq-50 rounded-circle img-profile-dark" alt="User Avatar">
</span>
<i class="bullet bullet-avatar bullet-danger"></i>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.chatbotinit"></span>
</p>
<span class="font-weight-light small">
@mollysims
</span>
<span class="font-weight-light small pull-right">
21 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="text-danger size-32 d-flex mr-3 ie-cover-fit">
<img src="img/60x60.png" class="img-sq-50 rounded-circle img-profile-dark" alt="User Avatar">
</span>
<i class="bullet bullet-avatar bullet-primary"></i>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.serverfailed"></span>
</p>
<span class="font-weight-light small">
@johndoe
</span>
<span class="font-weight-light small pull-right">
35 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="text-warning size-32 d-flex mr-3 ie-cover-fit">
<img src="img/60x60.png" class="img-sq-50 rounded-circle img-profile-dark" alt="User Avatar">
</span>
<i class="bullet bullet-avatar bullet-quinary"></i>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.ticketswaiting"></span>
</p>
<span class="font-weight-light small">
@frankwilliams
</span>
<span class="font-weight-light small pull-right">
47 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="text-info size-32 d-flex mr-3 ie-cover-fit">
<img src="img/60x60.png" class="img-sq-50 rounded-circle img-profile-dark" alt="User Avatar">
</span>
<i class="bullet bullet-avatar bullet-quaternary"></i>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.newfiles"></span>
</p>
<span class="font-weight-light small">
@nellyfrank
</span>
<span class="font-weight-light small pull-right">
1 hour ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="text-success size-32 d-flex mr-3 ie-cover-fit">
<img src="img/60x60.png" class="img-sq-50 rounded-circle img-profile-dark" alt="User Avatar">
</span>
<i class="bullet bullet-avatar bullet-success"></i>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.newproduct"></span>
</p>
<span class="font-weight-light small">
@bertkramp
</span>
<span class="font-weight-light small pull-right">
1 day ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="text-info size-32 d-flex mr-3 ie-cover-fit">
<img src="img/60x60.png" class="img-sq-50 rounded-circle img-profile-dark" alt="User Avatar">
</span>
<i class="bullet bullet-avatar bullet-warning"></i>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.filesuploaded"></span>
</p>
<span class="font-weight-light small">
@frankwilliams
</span>
<span class="font-weight-light small pull-right">
15 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="text-success size-32 d-flex mr-3 ie-cover-fit">
<img src="img/60x60.png" class="img-sq-50 rounded-circle img-profile-dark" alt="User Avatar">
</span>
<i class="bullet bullet-avatar bullet-danger"></i>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.chatbotinit"></span>
</p>
<span class="font-weight-light small">
@mollysims
</span>
<span class="font-weight-light small pull-right">
21 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="text-danger size-32 d-flex mr-3 ie-cover-fit">
<img src="img/60x60.png" class="img-sq-50 rounded-circle img-profile-dark" alt="User Avatar">
</span>
<i class="bullet bullet-avatar bullet-primary"></i>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.serverfailed"></span>
</p>
<span class="font-weight-light small">
@johndoe
</span>
<span class="font-weight-light small pull-right">
35 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="text-warning size-32 d-flex mr-3 ie-cover-fit">
<img src="img/60x60.png" class="img-sq-50 rounded-circle img-profile-dark" alt="User Avatar">
</span>
<i class="bullet bullet-avatar bullet-warning"></i>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.ticketswaiting"></span>
</p>
<span class="font-weight-light small">
@frankwilliams
</span>
<span class="font-weight-light small pull-right">
47 mns ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="text-info size-32 d-flex mr-3 ie-cover-fit">
<img src="img/60x60.png" class="img-sq-50 rounded-circle img-profile-dark" alt="User Avatar">
</span>
<i class="bullet bullet-avatar bullet-primary"></i>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.newfiles"></span>
</p>
<span class="font-weight-light small">
@nellyfrank
</span>
<span class="font-weight-light small pull-right">
1 hour ago
</span>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<span class="text-success size-32 d-flex mr-3 ie-cover-fit">
<img src="img/60x60.png" class="img-sq-50 rounded-circle img-profile-dark" alt="User Avatar">
</span>
<div class="media-body my-auto">
<p class="my-0">
<span class="font-weight-bold" data-i18n="header.newproduct"></span>
</p>
<span class="font-weight-light small">
@bertkramp
</span>
<span class="font-weight-light small pull-right">
1 day ago
</span>
</div>
</div>
</li>
</ul>
</div>
<div class="mt-auto">
<div class="p-4 text-center">
<a href="#" class="h6 text-center" data-i18n="header.seeallnots"></a>
</div>
</div>
</div>
</div>
<div class="tab-pane h-100" id="settings" role="tabpanel" aria-labelledby="settings-tab">
<div class="d-flex flex-column align-items-stretch h-100">
<div class="p-2 mCustomScrollbar h-100" data-mcs-theme="dark-thin">
<h4 class="mb-4 border-bottom">Header Color</h4>
<div class="row size-12">
<div class="col-md-3">
<a href="#" class="changeHeaderBackground" data-background="white" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)">
<div>
<span class="bg-gray-200" style="display:block; width: 100%; float: left; height: 7px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 20px;background: #4B64A6;"></span>
<span class="bg-gray-100" style="display:block; width: 80%; float: left; height: 20px;"></span>
</div>
</a>
<p class="text-center m-0">White</p>
</div>
<div class="col-md-3">
<a href="#" class="changeHeaderBackground" data-background="dark">
<div>
<span class="bg-dark" style="display:block; width: 100%; float: left; height: 7px;"></span>
</div>
<div>
<span class style="display:block; width: 20%; float: left; height: 20px;background: #4B64A6;"></span>
<span class="bg-gray-100" style="display:block; width: 80%; float: left; height: 20px;"></span>
</div>
</a>
<p class="text-center m-0">Dark</p>
</div>
<div class="col-md-3">
<a href="#" class="changeHeaderBackground" data-background="primary">
<div>
<span class="bg-primary" style="display:block; width: 100%; float: left; height: 7px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 20px;background: #4B64A6;"></span>
<span class="bg-gray-100" style="display:block; width: 80%; float: left; height: 20px;"></span>
</div>
</a>
<p class="text-center m-0">Primary</p>
</div>
<div class="col-md-3">
<a href="#" class="changeHeaderBackground" data-background="danger">
<div>
<span class="bg-danger" style="display:block; width: 100%; float: left; height: 7px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 20px;background: #4B64A6;"></span>
<span class="bg-gray-100" style="display:block; width: 80%; float: left; height: 20px;"></span>
</div>
</a>
<p class="text-center m-0">Danger</p>
</div>
<div class="col-md-3">
<a href="#" class="mb-2 changeHeaderBackground" data-background="success">
<div>
<span class="bg-success" style="display:block; width: 100%; float: left; height: 7px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 20px;background: #4B64A6;"></span>
<span class="bg-gray-100" style="display:block; width: 80%; float: left; height: 20px;"></span>
</div>
</a>
<p class="text-center m-0">Success</p>
</div>
<div class="col-md-3">
<a href="#" class="mb-2 changeHeaderBackground" data-background="info">
<div>
<span class="bg-info" style="display:block; width: 100%; float: left; height: 7px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 20px;background: #4B64A6;"></span>
<span class="bg-gray-100" style="display:block; width: 80%; float: left; height: 20px;"></span>
</div>
</a>
<p class="text-center m-0">Info</p>
</div>
<div class="col-md-3">
<a href="#" class="mb-2 changeHeaderBackground" data-background="warning">
<div>
<span class="bg-warning" style="display:block; width: 100%; float: left; height: 7px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 20px;background: #4B64A6;"></span>
<span class="bg-gray-100" style="display:block; width: 80%; float: left; height: 20px;"></span>
</div>
</a>
<p class="text-center m-0">Warning</p>
</div>
<div class="col-md-3">
<a href="#" class="mb-2 changeHeaderBackground" data-background="quaternary">
<div>
<span class="bg-quaternary" style="display:block; width: 100%; float: left; height: 7px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 20px;background: #4B64A6;"></span>
<span class="bg-gray-100" style="display:block; width: 80%; float: left; height: 20px;"></span>
</div>
</a>
<p class="text-center m-0">Quaternary</p>
</div>
<div class="col-md-3">
<a href="#" class="mb-2 changeHeaderBackground" data-background="quinary">
<div>
<span class="bg-quinary" style="display:block; width: 100%; float: left; height: 7px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 20px;background: #4B64A6;"></span>
<span class="bg-gray-100" style="display:block; width: 80%; float: left; height: 20px;"></span>
</div>
</a>
<p class="text-center m-0">Quinary</p>
</div>
<div class="col-md-3">
<a href="#" class="mb-2 changeHeaderBackground" data-background="senary">
<div>
<span class="bg-senary" style="display:block; width: 100%; float: left; height: 7px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 20px;background: #4B64A6;"></span>
<span class="bg-gray-100" style="display:block; width: 80%; float: left; height: 20px;"></span>
</div>
</a>
<p class="text-center m-0">Senary</p>
</div>
<div class="col-md-3">
<a href="#" class="mb-2 changeHeaderBackground" data-background="septenary">
<div>
<span class="bg-septenary" style="display:block; width: 100%; float: left; height: 7px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 20px;background: #4B64A6;"></span>
<span class="bg-gray-100" style="display:block; width: 80%; float: left; height: 20px;"></span>
</div>
</a>
<p class="text-center m-0">Septenary</p>
</div>
<div class="col-md-3">
<a href="#" class="mb-2 changeHeaderBackground" data-background="octonary">
<div>
<span class="bg-primary" style="display:block; width: 100%; float: left; height: 7px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 20px;background: #4B64A6;"></span>
<span class="bg-gray-100" style="display:block; width: 80%; float: left; height: 20px;"></span>
</div>
</a>
<p class="text-center m-0">Octonary</p>
</div>
<div class="col-md-3">
<a href="#" class="mb-2 changeHeaderBackground" data-background="nonary">
<div>
<span class="bg-nonary" style="display:block; width: 100%; float: left; height: 7px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 20px;background: #4B64A6;"></span>
<span class="bg-gray-100" style="display:block; width: 80%; float: left; height: 20px;"></span>
</div>
</a>
<p class="text-center m-0">Nonary</p>
</div>
<div class="col-md-3">
<a href="#" class="mb-2 changeHeaderBackground" data-background="denary">
<div>
<span class="bg-denary" style="display:block; width: 100%; float: left; height: 7px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 20px;background: #4B64A6;"></span>
<span class="bg-gray-100" style="display:block; width: 80%; float: left; height: 20px;"></span>
</div>
</a>
<p class="text-center m-0">Denary</p>
</div>
</div>
<h4 class=" mt-5 mb-4 border-bottom">Sidebar Color</h4>
<div class="row size-12">
<div class="col-md-3">
<a href="#" class="mb-2 changeSidebarBackground" data-background="dark">
<div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix">
<span class="bg-gray-200" style="display:block; width: 20%; float: left; height: 7px;"></span>
<span class="bg-gray-200" style="display:block; width: 80%; float: left; height: 7px;"></span>
</div>
<div>
<span class="bg-dark" style="display:block; width: 20%; float: left; height: 20px;"></span>
<span class="bg-gray-100" style="display:block; width: 80%; float: left; height: 20px;"></span>
</div>
</a>
<p class="text-center m-0">Dark</p>
</div>
<div class="col-md-3">
<a href="#" class="mb-2 changeSidebarBackground" data-background="white">
<div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix">
<span class="bg-gray-200" style="display:block; width: 20%; float: left; height: 7px;"></span>
<span class="bg-gray-200" style="display:block; width: 80%; float: left; height: 7px;"></span>
</div>
<div>
<span class="bg-gray-200 border-dark border-right" style="display:block; width: 20%; float: left; height: 20px;"></span>
<span class="bg-gray-100" style="display:block; width: 80%; float: left; height: 20px;"></span>
</div>
</a>
<p class="text-center m-0">White</p>
</div>
</div>
<h4 class=" mt-5 mb-4 border-bottom">Sidebar Layout</h4>
<p>Toggle the left sidebar's state (open or collapse)</p>
<button class="btn btn-pill btn-primary mb-4" data-toggle="sidebar">Toggle Sidebar</button>
<p>Sowh hide Sidebar in minimum size</p>
<button class="btn btn-pill btn-primary mb-4" data-toggle="toggleSidebarMini">Toggle Sidebar mini</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- MOMENT JAVASCRIPT -->
<script src="js/moment.min.js"></script>
<script src="js/moment-timezone.min.js"></script>
<script src="js/moment-timezone-with-data-2012-2022.min.js"></script>
<!-- JQUERY JAVASCRIPT -->
<script src="js/jquery.min.js"></script>
<!-- BLOCK UI FOR RELOAD X-CARD EVENT JAVASCRIPT -->
<script src="js/blockUI.min.js"></script>
<!-- I18NEXT TRANSLATION SYSTEM JAVASCRIPT -->
<script src="js/i18next.min.js"></script>
<script src="js/jquery-i18next.min.js"></script>
<script src="js/i18nextXHRBackend.min.js"></script>
<script src="js/i18nextBrowserLanguageDetector.min.js"></script>
<!--DROPZONE JAVASCRIPT -->
<script src="js/dropzone.js"></script>
<script>
Dropzone.autoDiscover = false;
</script>
<!-- JQUERY DRAG AND DROP JAVASCRIPT -->
<script src="js/jquery-ui.min.js"></script>
<!-- CALENDAR JAVASCRIPT -->
<script src="js/fullcalendar.min.js"></script>
<script src="js/gcal.min.js"></script>
<script src="js/locale-all.js"></script>
<!-- DATE PICKER JAVASCRIPT -->
<script src="js/tempusdominus-bootstrap-4.min.js"></script>
<!-- INPUT MASK JAVASCRIPT -->
<script src="js/jquery.inputmask.bundle.js"></script>
<!-- IE COVER JAVASCRIPT -->
<script src="js/modernizr-custom.min.js"></script>
<!-- SPARKLINE JAVASCRIPT -->
<script src="js/jquery.sparkline.min.js"></script>
<!-- BOOTSTRAP AND APPLICATION JAVASCRIPT -->
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/application.js"></script>
<!-- CUSTOM SCROLLBAR JAVASCRIPT -->
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- CHART.JS JAVASCRIPT -->
<script src="js/Chart.bundle.min.js"></script>
<!-- TOASTR FEEDBACK JAVASCRIPT -->
<script src="js/toastr.min.js"></script>
<script src="js/promise.min.js"></script>
<!-- SWEETALERT FEEDBACK JAVASCRIPT -->
<script src="js/sweetalert2.min.js"></script>
<!--END BODY -->
</body>
</html>