1000 lines
72 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<title>Zoogler - Responsive Bootstrap 4 Admin Dashboard</title>
<meta content="Admin Dashboard" name="description" />
<meta content="Mannatthemes" name="author" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="shortcut icon" href="assets/images/favicon.ico">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/icons.css" rel="stylesheet" type="text/css">
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
</head>
<body class="fixed-left">
<!-- Loader -->
<div id="preloader"><div id="status"><div class="spinner"></div></div></div>
<!-- Begin page -->
<div id="wrapper">
<!-- ========== Left Sidebar Start ========== -->
<div class="left side-menu">
<button type="button" class="button-menu-mobile button-menu-mobile-topbar open-left waves-effect">
<i class="ion-close"></i>
</button>
<!-- LOGO -->
<div class="topbar-left">
<div class="text-center bg-logo">
<a href="index.html" class="logo"><i class="mdi mdi-bowling text-success"></i> Zoogler</a>
<!-- <a href="index.html" class="logo"><img src="assets/images/logo.png" height="24" alt="logo"></a> -->
</div>
</div>
<div class="sidebar-user">
<img src="assets/images/users/avatar-6.jpg" alt="user" class="rounded-circle img-thumbnail mb-1">
<h6 class="">Mr. Michael Hill </h6>
<p class=" online-icon text-dark"><i class="mdi mdi-record text-success"></i>online</p>
<ul class="list-unstyled list-inline mb-0 mt-2">
<li class="list-inline-item">
<a href="#" class="" data-toggle="tooltip" data-placement="top" title="Profile"><i class="dripicons-user text-purple"></i></a>
</li>
<li class="list-inline-item">
<a href="#" class="" data-toggle="tooltip" data-placement="top" title="Settings"><i class="dripicons-gear text-dark"></i></a>
</li>
<li class="list-inline-item">
<a href="#" class="" data-toggle="tooltip" data-placement="top" title="Log out"><i class="dripicons-power text-danger"></i></a>
</li>
</ul>
</div>
<div class="sidebar-inner slimscrollleft">
<div id="sidebar-menu">
<ul>
<li class="menu-title">Main</li>
<li>
<a href="index.html" class="waves-effect">
<i class="dripicons-device-desktop"></i>
<span> Dashboard <span class="badge badge-pill badge-primary float-right">7</span></span>
</a>
</li>
<li>
<a href="calendar.html" class="waves-effect"><i class="dripicons-to-do"></i><span> Calendar </span></a>
</li>
<li class="menu-title">Components</li>
<li class="has_sub">
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-jewel"></i> <span> UI Elements </span> <span class="float-right"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="list-unstyled">
<li><a href="ui-alerts.html">Alerts</a></li>
<li><a href="ui-alertify.html">Alertify</a></li>
<li><a href="ui-badge.html">Badge</a></li>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-carousel.html">Carousel</a></li>
<li><a href="ui-cards.html">Cards</a></li>
<li><a href="ui-dropdowns.html">Dropdowns</a></li>
<li><a href="ui-grid.html">Grid</a></li>
<li><a href="ui-images.html">Images</a></li>
<li><a href="ui-lightbox.html">Lightbox</a></li>
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-navs.html">Navs</a></li>
<li><a href="ui-progressbars.html">Progress Bars</a></li>
<li><a href="ui-pagination.html">Pagination</a></li>
<li><a href="ui-popover-tooltips.html">Popover & Tooltips</a></li>
<li><a href="ui-rating.html">Rating</a></li>
<li><a href="ui-rangeslider.html">Range Slider</a></li>
<li><a href="ui-sweet-alert.html">Sweet-Alert</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-tabs-accordions.html">Tabs &amp; Accordions</a></li>
<li><a href="ui-video.html">Video</a></li>
</ul>
</li>
<li class="has_sub">
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-blog"></i><span> Forms </span> <span class="badge badge-pill badge-info float-right">8</span></a>
<ul class="list-unstyled">
<li><a href="form-advanced.html">Form Advanced</a></li>
<li><a href="form-elements.html">Form Elements</a></li>
<li><a href="form-editors.html">Form Editors</a></li>
<li><a href="form-uploads.html">Form File Upload</a></li>
<li><a href="form-mask.html">Form Mask</a></li>
<li><a href="form-summernote.html">Summernote</a></li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-xeditable.html">Form Xeditable</a></li>
</ul>
</li>
<li class="has_sub">
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-graph-pie"></i><span> Charts </span> <span class="float-right"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="list-unstyled">
<li><a href="charts-chartist.html">Chartist Chart</a></li>
<li><a href="charts-chartjs.html">Chartjs Chart</a></li>
<li><a href="charts-c3.html">C3 Chart</a></li>
<li><a href="charts-flot.html">Flot Chart</a></li>
<li><a href="charts-other.html">Jquery Knob Chart</a></li>
<li><a href="charts-morris.html">Morris Chart</a></li>
</ul>
</li>
<li class="has_sub">
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-trophy"></i> <span> Icons </span> <span class="float-right"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="list-unstyled">
<li><a href="icons-dripicons.html">Dripicons</a></li>
<li><a href="icons-fontawesome.html">Font Awesome</a></li>
<li><a href="icons-ion.html">Ion Icons</a></li>
<li><a href="icons-material.html">Material Design</a></li>
<li><a href="icons-themify.html">Themify Icons</a></li>
<li><a href="icons-typicons.html">Typicons Icons</a></li>
</ul>
</li>
<li class="has_sub">
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-card"></i><span> Tables </span> <span class="float-right"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="list-unstyled">
<li><a href="tables-basic.html">Basic Tables</a></li>
<li><a href="tables-datatable.html">Data Table</a></li>
<li><a href="tables-editable.html">Editable Table</a></li>
<li><a href="tables-responsive.html">Responsive Table</a></li>
</ul>
</li>
<li class="menu-title">Extra</li>
<li class="has_sub">
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-map"></i><span> Maps </span> <span class="badge badge-pill badge-danger float-right">2</span></a>
<ul class="list-unstyled">
<li><a href="maps-google.html"> Google Map</a></li>
<li><a href="maps-vector.html"> Vector Map</a></li>
</ul>
</li>
<li class="has_sub">
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-copy"></i><span> Pages </span> <span class="float-right"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="list-unstyled">
<li><a href="pages-login.html">Login</a></li>
<li><a href="pages-register.html">Register</a></li>
<li><a href="pages-recoverpw.html">Recover Password</a></li>
<li><a href="pages-lock-screen.html">Lock Screen</a></li>
<li><a href="pages-blank.html">Blank Page</a></li>
<li><a href="pages-404.html">Error 404</a></li>
<li><a href="pages-500.html">Error 500</a></li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"></div>
</div> <!-- end sidebarinner -->
</div>
<!-- Left Sidebar End -->
<!-- Start right Content here -->
<div class="content-page">
<!-- Start content -->
<div class="content">
<!-- Top Bar Start -->
<div class="topbar">
<nav class="navbar-custom">
<ul class="list-inline float-right mb-0">
<!-- language-->
<li class="list-inline-item dropdown notification-list hide-phone">
<a class="nav-link dropdown-toggle arrow-none waves-effect text-white" data-toggle="dropdown" href="#" role="button"
aria-haspopup="false" aria-expanded="false">
English <img src="assets/images/flags/us_flag.jpg" class="ml-2" height="16" alt=""/>
</a>
<div class="dropdown-menu dropdown-menu-right language-switch">
<a class="dropdown-item" href="#"><img src="assets/images/flags/italy_flag.jpg" alt="" height="16"/><span> Italian </span></a>
<a class="dropdown-item" href="#"><img src="assets/images/flags/french_flag.jpg" alt="" height="16"/><span> French </span></a>
<a class="dropdown-item" href="#"><img src="assets/images/flags/spain_flag.jpg" alt="" height="16"/><span> Spanish </span></a>
<a class="dropdown-item" href="#"><img src="assets/images/flags/russia_flag.jpg" alt="" height="16"/><span> Russian </span></a>
</div>
</li>
<li class="list-inline-item dropdown notification-list">
<a class="nav-link dropdown-toggle arrow-none waves-effect" data-toggle="dropdown" href="#" role="button"
aria-haspopup="false" aria-expanded="false">
<i class="dripicons-mail noti-icon"></i>
<span class="badge badge-danger noti-icon-badge">5</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-menu-lg">
<!-- item-->
<div class="dropdown-item noti-title">
<h5><span class="badge badge-danger float-right">745</span>Messages</h5>
</div>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon"><img src="assets/images/users/avatar-2.jpg" alt="user-img" class="img-fluid rounded-circle" /> </div>
<p class="notify-details"><b>Charles M. Jones</b><small class="text-muted">Dummy text of the printing and typesetting industry.</small></p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon"><img src="assets/images/users/avatar-3.jpg" alt="user-img" class="img-fluid rounded-circle" /> </div>
<p class="notify-details"><b>Thomas J. Mimms</b><small class="text-muted">You have 87 unread messages</small></p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon"><img src="assets/images/users/avatar-4.jpg" alt="user-img" class="img-fluid rounded-circle" /> </div>
<p class="notify-details"><b>Luis M. Konrad</b><small class="text-muted">It is a long established fact that a reader will</small></p>
</a>
<!-- All-->
<a href="javascript:void(0);" class="dropdown-item notify-item border-top">
View All
</a>
</div>
</li>
<li class="list-inline-item dropdown notification-list">
<a class="nav-link dropdown-toggle arrow-none waves-effect" data-toggle="dropdown" href="#" role="button"
aria-haspopup="false" aria-expanded="false">
<i class="dripicons-bell noti-icon"></i>
<span class="badge badge-success noti-icon-badge">2</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-menu-lg">
<!-- item-->
<div class="dropdown-item noti-title">
<h5><span class="badge badge-danger float-right">87</span>Notification</h5>
</div>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-primary"><i class="mdi mdi-cart-outline"></i></div>
<p class="notify-details"><b>Your order is placed</b><small class="text-muted">Dummy text of the printing and typesetting industry.</small></p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-success"><i class="mdi mdi-message"></i></div>
<p class="notify-details"><b>New Message received</b><small class="text-muted">You have 87 unread messages</small></p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-warning"><i class="mdi mdi-glass-cocktail"></i></div>
<p class="notify-details"><b>Your item is shipped</b><small class="text-muted">It is a long established fact that a reader will</small></p>
</a>
<!-- All-->
<a href="javascript:void(0);" class="dropdown-item notify-item border-top">
View All
</a>
</div>
</li>
<li class="list-inline-item dropdown notification-list">
<a class="nav-link dropdown-toggle arrow-none waves-effect nav-user" data-toggle="dropdown" href="#" role="button"
aria-haspopup="false" aria-expanded="false">
<img src="assets/images/users/avatar-6.jpg" alt="user" class="rounded-circle">
</a>
<div class="dropdown-menu dropdown-menu-right profile-dropdown ">
<!-- item-->
<div class="dropdown-item noti-title">
<h5>Welcome</h5>
</div>
<a class="dropdown-item" href="#"><i class="mdi mdi-account-circle m-r-5 text-muted"></i> Profile</a>
<a class="dropdown-item" href="#"><i class="mdi mdi-wallet m-r-5 text-muted"></i> My Wallet</a>
<a class="dropdown-item" href="#"><span class="badge badge-success float-right">5</span><i class="mdi mdi-settings m-r-5 text-muted"></i> Settings</a>
<a class="dropdown-item" href="#"><i class="mdi mdi-lock-open-outline m-r-5 text-muted"></i> Lock screen</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="mdi mdi-logout m-r-5 text-muted"></i> Logout</a>
</div>
</li>
</ul>
<ul class="list-inline menu-left mb-0">
<li class="float-left">
<button class="button-menu-mobile open-left waves-light waves-effect">
<i class="mdi mdi-menu"></i>
</button>
</li>
<li class="hide-phone app-search">
<form role="search" class="">
<input type="text" placeholder="Search..." class="form-control">
<a href=""><i class="fa fa-search"></i></a>
</form>
</li>
</ul>
<div class="clearfix"></div>
</nav>
</div>
<!-- Top Bar End -->
<div class="page-content-wrapper ">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="page-title-box">
<div class="btn-group float-right">
<ol class="breadcrumb hide-phone p-0 m-0">
<li class="breadcrumb-item"><a href="#">Zoogler</a></li>
<li class="breadcrumb-item"><a href="#">UI Kit</a></li>
<li class="breadcrumb-item active">Buttons</li>
</ol>
</div>
<h4 class="page-title">Buttons</h4>
</div>
</div>
</div>
<!-- end page title end breadcrumb -->
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">Examples</h4>
<p class="text-muted mb-4 font-13">Bootstrap includes six predefined button styles, each serving its own semantic purpose.</p>
<div class="button-items">
<button type="button" class="btn btn-primary waves-effect waves-light">Primary</button>
<button type="button" class="btn btn-secondary waves-effect">Secondary</button>
<button type="button" class="btn btn-success waves-effect waves-light">Success</button>
<button type="button" class="btn btn-info waves-effect waves-light">Info</button>
<button type="button" class="btn btn-warning waves-effect waves-light">Warning</button>
<button type="button" class="btn btn-danger waves-effect waves-light">Danger</button>
<button type="button" class="btn btn-purple waves-effect waves-light">Purple</button>
<button type="button" class="btn btn-pink waves-effect waves-light">Pink</button>
<button type="button" class="btn btn-light waves-effect">Light</button>
<button type="button" class="btn btn-dark waves-effect waves-light">Dark</button>
<button type="button" class="btn btn-link waves-effect">Link</button>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">Icon Examples</h4>
<p class="text-muted mb-4 font-13">Bootstrap includes six predefined button styles, each serving its own semantic purpose.</p>
<div class="button-items">
<button type="button" class="btn btn-primary waves-effect waves-light"><i class="mdi mdi-account mr-2"></i>Primary</button>
<button type="button" class="btn btn-secondary waves-effect"><i class="mdi mdi-cloud-download mr-2"></i>Secondary</button>
<button type="button" class="btn btn-success waves-effect waves-light"><i class="mdi mdi-check-all mr-2"></i>Success</button>
<button type="button" class="btn btn-info waves-effect waves-light"><i class="mdi mdi-send mr-2"></i>Info</button>
<button type="button" class="btn btn--warning waves-effect waves-light"><i class="mdi mdi-alert-outline mr-2"></i>Warning</button>
<button type="button" class="btn btn-danger waves-effect waves-light"><i class="mdi mdi-power mr-2"></i>Danger</button>
<button type="button" class="btn btn-purple waves-effect waves-light"><i class="mdi mdi-email-outline mr-2"></i>Purple</button>
<button type="button" class="btn btn-pink waves-effect waves-light"><i class="mdi mdi-dribbble mr-2"></i>Pink</button>
<button type="button" class="btn btn-dark waves-effect waves-light"><i class="mdi mdi-github-circle mr-2"></i>Dark</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">Gradient Buttons Examples</h4>
<p class="text-muted mb-4 font-13">Bootstrap includes six predefined button styles, each serving its own semantic purpose.</p>
<div class="button-items">
<button type="button" class="btn btn-gradient-primary waves-effect waves-light">Primary</button>
<button type="button" class="btn btn-gradient-secondary waves-effect">Secondary</button>
<button type="button" class="btn btn-gradient-success waves-effect waves-light">Success</button>
<button type="button" class="btn btn-gradient-info waves-effect waves-light">Info</button>
<button type="button" class="btn btn-gradient-warning waves-effect waves-light">Warning</button>
<button type="button" class="btn btn-gradient-danger waves-effect waves-light">Danger</button>
<button type="button" class="btn btn-gradient-purple waves-effect waves-light">Purple</button>
<button type="button" class="btn btn-gradient-pink waves-effect waves-light">Pink</button>
<button type="button" class="btn btn-gradient-dark waves-effect waves-light">Dark</button>
<button type="button" class="btn btn-gradient-light waves-effect waves-dark">Light</button>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">Gradient Buttons Examples</h4>
<p class="text-muted mb-4 font-13">Bootstrap includes six predefined button styles, each serving its own semantic purpose.</p>
<div class="button-items">
<button type="button" class="btn btn-gradient-primary waves-effect waves-light"><i class="mdi mdi-account mr-2"></i>Primary</button>
<button type="button" class="btn btn-gradient-secondary waves-effect"><i class="mdi mdi-cloud-download mr-2"></i>Secondary</button>
<button type="button" class="btn btn-gradient-success waves-effect waves-light"><i class="mdi mdi-check-all mr-2"></i>Success</button>
<button type="button" class="btn btn-gradient-info waves-effect waves-light"><i class="mdi mdi-send mr-2"></i>Info</button>
<button type="button" class="btn btn-gradient-warning waves-effect waves-light"><i class="mdi mdi-alert-outline mr-2"></i>Warning</button>
<button type="button" class="btn btn-gradient-danger waves-effect waves-light"><i class="mdi mdi-power mr-2"></i>Danger</button>
<button type="button" class="btn btn-gradient-purple waves-effect waves-light"><i class="mdi mdi-email-outline mr-2"></i>Purple</button>
<button type="button" class="btn btn-gradient-pink waves-effect waves-light"><i class="mdi mdi-dribbble mr-2"></i>Pink</button>
<button type="button" class="btn btn-gradient-dark waves-effect waves-light"><i class="mdi mdi-github-circle mr-2"></i>Dark</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">Outline buttons</h4>
<p class="text-muted mb-4 font-13">In need of a button, but not the hefty
background colors they bring? Replace the default modifier classes with
the <code class="highlighter-rouge">.btn-outline-*</code> ones to remove
all background images and colors on any button.</p>
<div class="button-items">
<button type="button" class="btn btn-outline-primary waves-effect waves-light">Primary</button>
<button type="button" class="btn btn-outline-secondary waves-effect">Secondary</button>
<button type="button" class="btn btn-outline-success waves-effect waves-light">Success</button>
<button type="button" class="btn btn-outline-info waves-effect waves-light">Info</button>
<button type="button" class="btn btn-outline-warning waves-effect waves-light">Warning</button>
<button type="button" class="btn btn-outline-danger waves-effect waves-light">Danger</button>
<button type="button" class="btn btn-outline-purple waves-effect waves-light">Purple</button>
<button type="button" class="btn btn-outline-pink waves-effect ">Pink</button>
<button type="button" class="btn btn-outline-dark waves-effect waves-light">Dark</button>
<button type="button" class="btn btn-outline-light waves-effect text-muted">Light</button>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">Outline Rounded buttons</h4>
<p class="text-muted mb-4 font-13">Bootstrap includes six predefined button styles, each serving its own semantic purpose.</p>
<div class="button-items">
<button type="button" class="btn btn-outline-primary waves-effect waves-light"><i class="mdi mdi-account mr-2"></i>Primary</button>
<button type="button" class="btn btn-outline-secondary waves-effect"><i class="mdi mdi-cloud-download mr-2"></i>Secondary</button>
<button type="button" class="btn btn-outline-success waves-effect waves-light"><i class="mdi mdi-check mr-2"></i>Success</button>
<button type="button" class="btn btn-outline-info waves-effect waves-light"><i class="mdi mdi-send mr-2"></i>Info</button>
<button type="button" class="btn btn-outline-warning waves-effect waves-light"><i class="mdi mdi-alert-outline mr-2"></i>Warning</button>
<button type="button" class="btn btn-outline-danger waves-effect waves-light"><i class="mdi mdi-power mr-2"></i>Danger</button>
<button type="button" class="btn btn-outline-purple waves-effect waves-light"><i class="mdi mdi-email-outline mr-2"></i>Purple</button>
<button type="button" class="btn btn-outline-pink waves-effect "><i class="mdi mdi-dribbble mr-2"></i>Pink</button>
<button type="button" class="btn btn-outline-dark waves-effect waves-light"><i class="mdi mdi-github-circle mr-2"></i>Dark</button>
<button type="button" class="btn btn-outline-light waves-effect text-muted"><i class="mdi mdi-bell mr-2"></i>Light</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">Outline Rounded buttons</h4>
<p class="text-muted mb-4 font-13">Bootstrap includes six predefined button styles, each serving its own semantic purpose.</p>
<div class="button-items">
<button type="button" class="btn btn-outline-primary btn-round waves-effect waves-light">Primary</button>
<button type="button" class="btn btn-outline-secondary btn-round waves-effect">Secondary</button>
<button type="button" class="btn btn-outline-success btn-round waves-effect waves-light">Success</button>
<button type="button" class="btn btn-outline-info btn-round waves-effect waves-light">Info</button>
<button type="button" class="btn btn-outline-warning btn-round waves-effect waves-light">Warning</button>
<button type="button" class="btn btn-outline-danger btn-round waves-effect waves-light">Danger</button>
<button type="button" class="btn btn-outline-purple btn-round waves-effect waves-light">Purple</button>
<button type="button" class="btn btn-outline-pink btn-round waves-effect ">Pink</button>
<button type="button" class="btn btn-outline-dark btn-round waves-effect waves-light">Dark</button>
<button type="button" class="btn btn-outline-light btn-round waves-effect text-muted">Light</button>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">Outline buttons with icon</h4>
<p class="text-muted mb-4 font-13">In need of a button, but not the hefty
background colors they bring? Replace the default modifier classes with
the <code class="highlighter-rouge">.btn-outline-*</code> ones to remove
all background images and colors on any button.</p>
<div class="button-items">
<button type="button" class="btn btn-outline-primary btn-round waves-effect waves-light"><i class="mdi mdi-account mr-2"></i>Primary</button>
<button type="button" class="btn btn-outline-secondary btn-round waves-effect"><i class="mdi mdi-cloud-download mr-2"></i>Secondary</button>
<button type="button" class="btn btn-outline-success btn-round waves-effect waves-light"><i class="mdi mdi-check mr-2"></i>Success</button>
<button type="button" class="btn btn-outline-info btn-round waves-effect waves-light"><i class="mdi mdi-send mr-2"></i>Info</button>
<button type="button" class="btn btn-outline-warning btn-round waves-effect waves-light"><i class="mdi mdi-alert-outline mr-2"></i>Warning</button>
<button type="button" class="btn btn-outline-danger btn-round waves-effect waves-light"><i class="mdi mdi-power mr-2"></i>Danger</button>
<button type="button" class="btn btn-outline-purple btn-round waves-effect waves-light"><i class="mdi mdi-email-outline mr-2"></i>Purple</button>
<button type="button" class="btn btn-outline-pink btn-round waves-effect "><i class="mdi mdi-dribbble mr-2"></i>Pink</button>
<button type="button" class="btn btn-outline-dark btn-round waves-effect waves-light"><i class="mdi mdi-github-circle mr-2"></i>Dark</button>
<button type="button" class="btn btn-outline-light btn-round waves-effect text-muted"><i class="mdi mdi-bell mr-2"></i>Light</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">Button tags</h4>
<p class="text-muted mb-4 font-13">The <code class="highlighter-rouge">.btn</code>
classes are designed to be used with the <code
class="highlighter-rouge">&lt;button&gt;</code> element.
However, you can also use these classes on <code
class="highlighter-rouge">&lt;a&gt;</code> or <code
class="highlighter-rouge">&lt;input&gt;</code> elements (though
some browsers may apply a slightly different rendering).</p>
<div class="button-items">
<a class="btn btn-success" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-info" type="button" value="Input">
<input class="btn btn-warning" type="submit" value="Submit">
<input class="btn btn-danger" type="reset" value="Reset">
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">Sizes</h4>
<p class="text-muted mb-4 font-13">Fancy larger or smaller buttons? Add
<code class="highlighter-rouge">.btn-lg</code> or <code
class="highlighter-rouge">.btn-sm</code> for additional sizes.
</p>
<div class="button-items">
<button type="button" class="btn btn-info btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-info btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="header-title mt-0"><b>Disabled Buttons</b></h4>
<p class="text-muted mb-4 font-13">
Make buttons look inactive by adding the disabled boolean attribute to any <code>&lt;button&gt;</code> element.
</p>
<div class="button-list">
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="header-title mt-0"><b>Disabled Link</b></h4>
<p class="text-muted mb-4 font-13">
Disabled buttons using the <code>&lt;a&gt;</code> element behave a bit different:
</p>
<div class="button-list">
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">Block Buttons</h4>
<p class="text-muted mb-4 font-13">Create block level buttons—those that
span the full width of a parent—by adding <code
class="highlighter-rouge">.btn-block</code>.</p>
<div class="row">
<div class="col-sm-6">
<div class="button-items">
<button type="button" class="btn btn-warning btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-danger btn-sm btn-block">Block level button</button>
</div>
</div>
<div class="col-sm-6">
<div class="button-items">
<button type="button" class="btn btn-gradient-success btn-block">Block level button</button>
<button type="button" class="btn btn-outline-purple btn-lg btn-block">Block level button</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">Toggle states</h4>
<p class="text-muted mb-4 font-13">Add <code class="highlighter-rouge">data-toggle="button"</code>
to toggle a buttons <code class="highlighter-rouge">active</code>
state. If youre pre-toggling a button, you must manually add the <code
class="highlighter-rouge">.active</code> class
<strong>and</strong> <code
class="highlighter-rouge">aria-pressed="true"</code> to the
<code class="highlighter-rouge">&lt;button&gt;</code>.
</p>
<div class="button-items">
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
Single toggle
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">Checkbox buttons</h4>
<p class="text-muted mb-4 font-13">Bootstraps <code
class="highlighter-rouge">.button</code> styles can be applied to
other elements, such as <code class="highlighter-rouge">
&lt;label&gt;</code>s, to provide checkbox or radio style button
toggling. Add <code
class="highlighter-rouge">data-toggle="buttons"</code> to a
<code class="highlighter-rouge">.btn-group</code> containing those
modified buttons to enable toggling in their respective styles.</p>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-info active">
<input type="checkbox" checked> Active
</label>
<label class="btn btn-info">
<input type="checkbox"> Check
</label>
<label class="btn btn-info">
<input type="checkbox"> Check
</label>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">Radio buttons</h4>
<p class="text-muted mb-4 font-13">Bootstraps <code
class="highlighter-rouge">.button</code> styles can be applied to
other elements, such as <code class="highlighter-rouge">
&lt;label&gt;</code>s, to provide checkbox or radio style button
toggling. Add <code
class="highlighter-rouge">data-toggle="buttons"</code> to a
<code class="highlighter-rouge">.btn-group</code> containing those
modified buttons to enable toggling in their respective styles.</p>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-light active">
<input type="radio" name="options" id="option1" checked> Active
</label>
<label class="btn btn-light">
<input type="radio" name="options" id="option2"> Radio
</label>
<label class="btn btn-light">
<input type="radio" name="options" id="option3"> Radio
</label>
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
<div class="row">
<div class="col-md-12 col-lg-12 col-xl-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">Input With Button Groups</h4>
<p class="text-muted mb-4 font-13">Feel free to mix input groups with button groups in your toolbars. Similar to the example above, youll likely need some utilities though to space things properly..</p>
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2 mo-mb-2" role="group" aria-label="First group">
<button type="button" class="btn btn-light">1</button>
<button type="button" class="btn btn-light">2</button>
<button type="button" class="btn btn-light">3</button>
<button type="button" class="btn btn-light">4</button>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">@</div>
</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-success">Left</button>
<button type="button" class="btn btn-outline-success">Middle</button>
<button type="button" class="btn btn-outline-success">Right</button>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-xl-6">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">Button Groups</h4>
<p class="text-muted mb-4 font-13">Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.Make a set of buttons appear vertically stacked rather than horizontally.</p>
<div class="row">
<div class="col-md-3">
<div class="btn-group-vertical m-b-10">
<button type="button" class="btn btn-light">Top</button>
<button type="button" class="btn btn-light">Middle</button>
<button type="button" class="btn btn-light">Bottom</button>
</div>
</div>
<div class="col-md-3">
<div class="btn-group-vertical m-b-10">
<button type="button" class="btn btn-light">Button 1</button>
<button type="button" class="btn btn-light">Button 2</button>
<button type="button" class="btn btn-light dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false"> Button 3 <span class="caret"></span> </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="btn-group m-b-10">
<button type="button" class="btn btn-light">1</button>
<button type="button" class="btn btn-light">2</button>
<button type="button" class="btn btn-success ">3</button>
<button type="button" class="btn btn-light">4</button>
</div>
<div class="btn-group m-b-10">
<button type="button" class="btn btn-light">5</button>
<button type="button" class="btn btn-success ">6</button>
<button type="button" class="btn btn-light">7</button>
</div>
<div class="btn-group m-b-10">
<button type="button" class="btn btn-light">8</button>
</div>
<div class="btn-group m-b-10 mt-4">
<button type="button" class="btn btn-light">1</button>
<button type="button" class="btn btn-dark">2</button>
<button type="button" class="btn btn-light">3</button>
<div class="btn-group">
<button type="button" class="btn btn-light dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="header-title mt-0"><b>Icon With Label Buttons</b></h4>
<p class="text-muted mb-4 font-13">
A button variant for using icon with label.
</p>
<div class="button-list">
<button type="button" class="btn btn-facebook waves-effect waves-light">
<i class="fab fa-facebook m-r-5"></i> Facebook
</button>
<button type="button" class="btn btn-twitter waves-effect waves-light">
<i class="fab fa-twitter m-r-5"></i> Twitter
</button>
<button type="button" class="btn btn-linkedin waves-effect waves-light">
<i class="fab fa-linkedin m-r-5"></i> Linkedin
</button>
<button type="button" class="btn btn-dribbble waves-effect waves-light">
<i class="fab fa-dribbble m-r-5"></i> Dribbble
</button>
<button type="button" class="btn btn-googleplus waves-effect waves-light">
<i class="fab fa-google-plus m-r-5"></i> Google+
</button>
<button type="button" class="btn btn-instagram waves-effect waves-light">
<i class="fab fa-instagram m-r-5"></i> Instagram
</button>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="header-title mt-0"><b>Only Icon Buttons</b></h4>
<p class="text-muted mb-4 font-13">
A button variant for using only icons.
</p>
<div class="button-list">
<button type="button" class="btn btn-facebook waves-effect waves-light">
<i class="fab fa-facebook"></i>
</button>
<button type="button" class="btn btn-twitter waves-effect waves-light">
<i class="fab fa-twitter"></i>
</button>
<button type="button" class="btn btn-linkedin waves-effect waves-light">
<i class="fab fa-linkedin"></i>
</button>
<button type="button" class="btn btn-dribbble waves-effect waves-light">
<i class="fab fa-dribbble"></i>
</button>
<button type="button" class="btn btn-googleplus waves-effect waves-light">
<i class="fab fa-google-plus"></i>
</button>
<button type="button" class="btn btn-instagram waves-effect waves-light">
<i class="fab fa-instagram"></i>
</button>
<button type="button" class="btn btn-pinterest btn-round waves-effect waves-light">
<i class="fab fa-pinterest"></i>
</button>
<button type="button" class="btn btn-dropbox btn-round waves-effect waves-light">
<i class="fab fa-dropbox"></i>
</button>
<button type="button" class="btn btn-flickr btn-round waves-effect waves-light">
<i class="fab fa-flickr"></i>
</button>
<button type="button" class="btn btn-tumblr btn-round waves-effect waves-light">
<i class="fab fa-tumblr"></i>
</button>
<button type="button" class="btn btn-skype btn-round waves-effect waves-light">
<i class="fab fa-skype"></i>
</button>
<button type="button" class="btn btn-youtube btn-round waves-effect waves-light">
<i class="fab fa-youtube"></i>
</button>
<button type="button" class="btn btn-github btn-round waves-effect waves-light">
<i class="fab fa-github"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
</div><!-- container -->
</div> <!-- Page content Wrapper -->
</div> <!-- content -->
<footer class="footer">
© 2022 Zoogler by Mannatthemes.
</footer>
</div>
<!-- End Right content here -->
</div>
<!-- END wrapper -->
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/modernizr.min.js"></script>
<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/waves.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<!-- App js -->
<script src="assets/js/app.js"></script>
</body>
</html>