<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.png">
<title>Adminmart Template - The Ultimate Multipurpose admin template</title>
<!-- Custom CSS -->
<link href="../dist/css/style.min.css" rel="stylesheet">
<!-- This Page CSS -->
<link rel="stylesheet" type="text/css" href="../assets/extra-libs/prism/prism.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
<div class="lds-pos"></div>
</div>
</div>
<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- ============================================================== -->
<div id="main-wrapper" data-theme="light" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full" data-sidebar-position="fixed" data-header-position="fixed" data-boxed-layout="full">
<!-- ============================================================== -->
<!-- Topbar header - style you can find in pages.scss -->
<!-- ============================================================== -->
<header class="topbar" data-navbarbg="skin6">
<nav class="navbar top-navbar navbar-expand-md">
<div class="navbar-header" data-logobg="skin6">
<!-- This is for the sidebar toggle which is visible on mobile only -->
<a class="nav-toggler waves-effect waves-light d-block d-md-none" href="javascript:void(0)"><i
class="ti-menu ti-close"></i></a>
<!-- ============================================================== -->
<!-- Logo -->
<!-- ============================================================== -->
<div class="navbar-brand">
<!-- Logo icon -->
<a href="index.html">
<b class="logo-icon">
<!-- Dark Logo icon -->
<img src="../assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
<!-- Light Logo icon -->
<img src="../assets/images/logo-icon.png" alt="homepage" class="light-logo" />
</b>
<!--End Logo icon -->
<!-- Logo text -->
<span class="logo-text">
<!-- dark Logo text -->
<img src="../assets/images/logo-text.png" alt="homepage" class="dark-logo" />
<!-- Light Logo text -->
<img src="../assets/images/logo-light-text.png" class="light-logo" alt="homepage" />
</span>
</a>
</div>
<!-- ============================================================== -->
<!-- End Logo -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Toggle which is visible on mobile only -->
<!-- ============================================================== -->
<a class="topbartoggler d-block d-md-none waves-effect waves-light" href="javascript:void(0)"
data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i
class="ti-more"></i></a>
</div>
<!-- ============================================================== -->
<!-- End Logo -->
<!-- ============================================================== -->
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<!-- ============================================================== -->
<!-- toggle and nav items -->
<!-- ============================================================== -->
<ul class="navbar-nav float-left mr-auto ml-3 pl-1">
<!-- Notification -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle pl-md-3 position-relative" href="javascript:void(0)"
id="bell" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span><i data-feather="bell" class="svg-icon"></i></span>
<span class="badge badge-primary notify-no rounded-circle">5</span>
</a>
<div class="dropdown-menu dropdown-menu-left mailbox animated bounceInDown">
<ul class="list-style-none">
<li>
<div class="message-center notifications position-relative">
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<div class="btn btn-danger rounded-circle btn-circle"><i
data-feather="airplay" class="text-white"></i></div>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Luanch Admin</h6>
<span class="font-12 text-nowrap d-block text-muted">Just see
the my new
admin!</span>
<span class="font-12 text-nowrap d-block text-muted">9:30 AM</span>
</div>
</a>
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<span class="btn btn-success text-white rounded-circle btn-circle"><i
data-feather="calendar" class="text-white"></i></span>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Event today</h6>
<span
class="font-12 text-nowrap d-block text-muted text-truncate">Just
a reminder that you have event</span>
<span class="font-12 text-nowrap d-block text-muted">9:10 AM</span>
</div>
</a>
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<span class="btn btn-info rounded-circle btn-circle"><i
data-feather="settings" class="text-white"></i></span>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Settings</h6>
<span
class="font-12 text-nowrap d-block text-muted text-truncate">You
can customize this template
as you want</span>
<span class="font-12 text-nowrap d-block text-muted">9:08 AM</span>
</div>
</a>
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<span class="btn btn-primary rounded-circle btn-circle"><i
data-feather="box" class="text-white"></i></span>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Pavan kumar</h6> <span
class="font-12 text-nowrap d-block text-muted">Just
see the my admin!</span>
<span class="font-12 text-nowrap d-block text-muted">9:02 AM</span>
</div>
</a>
</div>
</li>
<li>
<a class="nav-link pt-3 text-center text-dark" href="javascript:void(0);">
<strong>Check all notifications</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
</div>
</li>
<!-- End Notification -->
<!-- ============================================================== -->
<!-- create new -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i data-feather="settings" class="svg-icon"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item d-none d-md-block">
<a class="nav-link" href="javascript:void(0)">
<div class="customize-input">
<select
class="custom-select form-control bg-white custom-radius custom-shadow border-0">
<option selected>EN</option>
<option value="1">AB</option>
<option value="2">AK</option>
<option value="3">BE</option>
</select>
</div>
</a>
</li>
</ul>
<!-- ============================================================== -->
<!-- Right side toggle and nav items -->
<!-- ============================================================== -->
<ul class="navbar-nav float-right">
<!-- ============================================================== -->
<!-- Search -->
<!-- ============================================================== -->
<li class="nav-item d-none d-md-block">
<a class="nav-link" href="javascript:void(0)">
<form>
<div class="customize-input">
<input class="form-control custom-shadow custom-radius border-0 bg-white"
type="search" placeholder="Search" aria-label="Search">
<i class="form-control-icon" data-feather="search"></i>
</div>
</form>
</a>
</li>
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<img src="../assets/images/users/profile-pic.jpg" alt="user" class="rounded-circle"
width="40">
<span class="ml-2 d-none d-lg-inline-block"><span>Hello,</span> <span
class="text-dark">Jason Doe</span> <i data-feather="chevron-down"
class="svg-icon"></i></span>
</a>
<div class="dropdown-menu dropdown-menu-right user-dd animated flipInY">
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="user"
class="svg-icon mr-2 ml-1"></i>
My Profile</a>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="credit-card"
class="svg-icon mr-2 ml-1"></i>
My Balance</a>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="mail"
class="svg-icon mr-2 ml-1"></i>
Inbox</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="settings"
class="svg-icon mr-2 ml-1"></i>
Account Setting</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="power"
class="svg-icon mr-2 ml-1"></i>
Logout</a>
<div class="dropdown-divider"></div>
<div class="pl-4 p-3"><a href="javascript:void(0)" class="btn btn-sm btn-info">View
Profile</a></div>
</div>
</li>
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- ============================================================== -->
</ul>
</div>
</nav>
</header>
<!-- ============================================================== -->
<!-- End Topbar header -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<aside class="left-sidebar" data-sidebarbg="skin6">
<!-- Sidebar scroll-->
<div class="scroll-sidebar" data-sidebarbg="skin6">
<!-- Sidebar navigation-->
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="index.html"
aria-expanded="false"><i data-feather="home" class="feather-icon"></i><span
class="hide-menu">Dashboard</span></a></li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Applications</span></li>
<li class="sidebar-item"> <a class="sidebar-link" href="ticket-list.html"
aria-expanded="false"><i data-feather="tag" class="feather-icon"></i><span
class="hide-menu">Ticket List
</span></a>
</li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="app-chat.html"
aria-expanded="false"><i data-feather="message-square" class="feather-icon"></i><span
class="hide-menu">Chat</span></a></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="app-calendar.html"
aria-expanded="false"><i data-feather="calendar" class="feather-icon"></i><span
class="hide-menu">Calendar</span></a></li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Components</span></li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="file-text" class="feather-icon"></i><span
class="hide-menu">Forms </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="form-inputs.html" class="sidebar-link"><span
class="hide-menu"> Form Inputs
</span></a>
</li>
<li class="sidebar-item"><a href="form-input-grid.html" class="sidebar-link"><span
class="hide-menu"> Form Grids
</span></a>
</li>
<li class="sidebar-item"><a href="form-checkbox-radio.html" class="sidebar-link"><span
class="hide-menu"> Checkboxes &
Radios
</span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="grid" class="feather-icon"></i><span
class="hide-menu">Tables </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="table-basic.html" class="sidebar-link"><span
class="hide-menu"> Basic Table
</span></a>
</li>
<li class="sidebar-item"><a href="table-dark-basic.html" class="sidebar-link"><span
class="hide-menu"> Dark Basic Table
</span></a>
</li>
<li class="sidebar-item"><a href="table-sizing.html" class="sidebar-link"><span
class="hide-menu">
Sizing Table
</span></a>
</li>
<li class="sidebar-item"><a href="table-layout-coloured.html" class="sidebar-link"><span
class="hide-menu">
Coloured
Table Layout
</span></a>
</li>
<li class="sidebar-item"><a href="table-datatable-basic.html" class="sidebar-link"><span
class="hide-menu">
Basic
Datatables
Layout
</span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="bar-chart" class="feather-icon"></i><span
class="hide-menu">Charts </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="chart-morris.html" class="sidebar-link"><span
class="hide-menu"> Morris Chart
</span></a>
</li>
<li class="sidebar-item"><a href="chart-chart-js.html" class="sidebar-link"><span
class="hide-menu"> ChartJs
</span></a>
</li>
<li class="sidebar-item"><a href="chart-knob.html" class="sidebar-link"><span
class="hide-menu">
Knob Chart
</span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="box" class="feather-icon"></i><span
class="hide-menu">UI Elements </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="ui-buttons.html" class="sidebar-link"><span
class="hide-menu"> Buttons
</span></a>
</li>
<li class="sidebar-item"><a href="ui-modals.html" class="sidebar-link"><span
class="hide-menu"> Modals </span></a>
</li>
<li class="sidebar-item"><a href="ui-tab.html" class="sidebar-link"><span
class="hide-menu"> Tabs </span></a></li>
<li class="sidebar-item"><a href="ui-tooltip-popover.html" class="sidebar-link"><span
class="hide-menu"> Tooltip &
Popover</span></a></li>
<li class="sidebar-item"><a href="ui-notification.html" class="sidebar-link"><span
class="hide-menu">Notification</span></a></li>
<li class="sidebar-item"><a href="ui-progressbar.html" class="sidebar-link"><span
class="hide-menu">Progressbar</span></a></li>
<li class="sidebar-item"><a href="ui-typography.html" class="sidebar-link"><span
class="hide-menu">Typography</span></a></li>
<li class="sidebar-item"><a href="ui-bootstrap.html" class="sidebar-link"><span
class="hide-menu">Bootstrap
UI</span></a></li>
<li class="sidebar-item"><a href="ui-breadcrumb.html" class="sidebar-link"><span
class="hide-menu">Breadcrumb</span></a></li>
<li class="sidebar-item"><a href="ui-list-media.html" class="sidebar-link"><span
class="hide-menu">List
Media</span></a></li>
<li class="sidebar-item"><a href="ui-grid.html" class="sidebar-link"><span
class="hide-menu"> Grid </span></a></li>
<li class="sidebar-item"><a href="ui-carousel.html" class="sidebar-link"><span
class="hide-menu">
Carousel</span></a></li>
<li class="sidebar-item"><a href="ui-scrollspy.html" class="sidebar-link"><span
class="hide-menu">
Scrollspy</span></a></li>
<li class="sidebar-item"><a href="ui-toasts.html" class="sidebar-link"><span
class="hide-menu"> Toasts</span></a>
</li>
<li class="sidebar-item"><a href="ui-spinner.html" class="sidebar-link"><span
class="hide-menu"> Spinner </span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="ui-cards.html"
aria-expanded="false"><i data-feather="sidebar" class="feather-icon"></i><span
class="hide-menu">Cards
</span></a>
</li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Authentication</span></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="authentication-login1.html"
aria-expanded="false"><i data-feather="lock" class="feather-icon"></i><span
class="hide-menu">Login
</span></a>
</li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link"
href="authentication-register1.html" aria-expanded="false"><i data-feather="lock"
class="feather-icon"></i><span class="hide-menu">Register
</span></a>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="feather" class="feather-icon"></i><span
class="hide-menu">Icons
</span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="icon-fontawesome.html" class="sidebar-link"><span
class="hide-menu"> Fontawesome Icons </span></a></li>
<li class="sidebar-item"><a href="icon-simple-lineicon.html" class="sidebar-link"><span
class="hide-menu"> Simple Line Icons </span></a></li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="crosshair" class="feather-icon"></i><span
class="hide-menu">Multi
level
dd</span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item 1.1</span></a>
</li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item 1.2</span></a>
</li>
<li class="sidebar-item"> <a class="has-arrow sidebar-link" href="javascript:void(0)"
aria-expanded="false"><span class="hide-menu">Menu 1.3</span></a>
<ul aria-expanded="false" class="collapse second-level base-level-line">
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.1</span></a></li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.2</span></a></li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.3</span></a></li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.4</span></a></li>
</ul>
</li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.4</span></a></li>
</ul>
</li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Extra</span></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="../../docs/docs.html"
aria-expanded="false"><i data-feather="edit-3" class="feather-icon"></i><span
class="hide-menu">Documentation</span></a></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="authentication-login1.html"
aria-expanded="false"><i data-feather="log-out" class="feather-icon"></i><span
class="hide-menu">Logout</span></a></li>
</ul>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
</aside>
<!-- ============================================================== -->
<!-- End Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Page wrapper -->
<!-- ============================================================== -->
<div class="page-wrapper">
<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="page-breadcrumb">
<div class="row">
<div class="col-7 align-self-center">
<h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Buttons</h4>
<div class="d-flex align-items-center">
<nav aria-label="breadcrumb">
<ol class="breadcrumb m-0 p-0">
<li class="breadcrumb-item"><a href="index.html" class="text-muted">Home</a></li>
<li class="breadcrumb-item text-muted active" aria-current="page">Library</li>
</ol>
</nav>
</div>
</div>
<div class="col-5 align-self-center">
<div class="customize-input float-right">
<select class="custom-select custom-select-set form-control bg-white border-0 custom-shadow custom-radius">
<option selected>Aug 19</option>
<option value="1">July 19</option>
<option value="2">Jun 19</option>
</select>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Container fluid -->
<!-- ============================================================== -->
<div class="container-fluid">
<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<div class="row">
<div class="col-lg-12 ">
<div class="card">
<div class="card-body">
<h4 class="card-title">General Buttons</h4>
<h6 class="card-subtitle">Use a classes <code>btn btn-success</code> to quickly create a
General btn.</h6>
<div class="btn-list">
<button type="button"
class="btn waves-effect waves-light btn-primary">Primary</button>
<button type="button"
class="btn waves-effect waves-light btn-secondary">Secondary</button>
<button type="button"
class="btn waves-effect waves-light btn-success">Success</button>
<button type="button" class="btn waves-effect waves-light btn-info">Info</button>
<button type="button"
class="btn waves-effect waves-light btn-warning">Warning</button>
<button type="button"
class="btn waves-effect waves-light btn-danger">Danger</button>
<button type="button" class="btn waves-effect waves-light btn-light">Light</button>
<button type="button" class="btn waves-effect waves-light btn-dark">Dark</button>
</div>
</div>
</div>
</div>
<div class="col-lg-12 ">
<div class="card">
<div class="card-body">
<h4 class="card-title">Button Tags</h4>
<h6 class="card-subtitle">The <code>.btn</code> classes are designed to be used with the
<code>.<button></code> element.</h6>
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
</div>
</div>
</div>
<div class="col-lg-12 ">
<div class="card">
<div class="card-body">
<h4 class="card-title">Button with outline</h4>
<h6 class="card-subtitle">Use a classes <code>btn btn-outline-success</code> to quickly
create a General btn.</h6>
<div class="btn-list">
<button type="button"
class="btn waves-effect waves-light btn-outline-primary">Primary</button>
<button type="button"
class="btn waves-effect waves-light btn-outline-secondary">Secondary</button>
<button type="button"
class="btn waves-effect waves-light btn-outline-success">Success</button>
<button type="button"
class="btn waves-effect waves-light btn-outline-info">Info</button>
<button type="button"
class="btn waves-effect waves-light btn-outline-warning">Warning</button>
<button type="button"
class="btn waves-effect waves-light btn-outline-danger">Danger</button>
<button type="button"
class="btn waves-effect waves-light btn-outline-light">Light</button>
<button type="button"
class="btn waves-effect waves-light btn-outline-dark">Dark</button>
</div>
</div>
</div>
</div>
<div class="col-lg-12 ">
<div class="card">
<div class="card-body">
<h4 class="card-title">Rounded Buttons</h4>
<h6 class="card-subtitle">Use a classes <code>btn btn-rounded btn-success</code> to
quickly create a General btn.</h6>
<div class="btn-list">
<button type="button"
class="btn waves-effect waves-light btn-rounded btn-primary">Primary</button>
<button type="button"
class="btn waves-effect waves-light btn-rounded btn-secondary">Secondary</button>
<button type="button"
class="btn waves-effect waves-light btn-rounded btn-success">Success</button>
<button type="button"
class="btn waves-effect waves-light btn-rounded btn-info">Info</button>
<button type="button"
class="btn waves-effect waves-light btn-rounded btn-warning">Warning</button>
<button type="button"
class="btn waves-effect waves-light btn-rounded btn-danger">Danger</button>
<button type="button"
class="btn waves-effect waves-light btn-rounded btn-light">Light</button>
<button type="button"
class="btn waves-effect waves-light btn-rounded btn-dark">Dark</button>
</div>
</div>
</div>
</div>
<div class="col-lg-12 ">
<div class="card">
<div class="card-body">
<h4 class="card-title">Rounded outlined Buttons</h4>
<h6 class="card-subtitle">Use a classes <code>btn btn-rounded btn-outline-success</code>
to quickly create a General btn.</h6>
<div class="btn-list">
<button type="button"
class="btn waves-effect waves-light btn-rounded btn-outline-primary">Primary</button>
<button type="button"
class="btn waves-effect waves-light btn-rounded btn-outline-secondary">Secondary</button>
<button type="button"
class="btn waves-effect waves-light btn-rounded btn-outline-success">Success</button>
<button type="button"
class="btn waves-effect waves-light btn-rounded btn-outline-info">Info</button>
<button type="button"
class="btn waves-effect waves-light btn-rounded btn-outline-warning">Warning</button>
<button type="button"
class="btn waves-effect waves-light btn-rounded btn-outline-danger">Danger</button>
<button type="button"
class="btn waves-effect waves-light btn-rounded btn-outline-light">Light</button>
<button type="button"
class="btn waves-effect waves-light btn-rounded btn-outline-dark">Dark</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Button Sizes</h4>
<h6 class="card-subtitle">Use a classes <code>btn btn-lg btn-success</code> to quickly
create a General btn.</h6>
<div class="btn-list">
<button type="button" class="btn waves-effect waves-light btn-lg btn-primary">Large
.btn-lg </button>
<button type="button" class="btn waves-effect waves-light btn-secondary">Normal
.btn</button>
<button type="button" class="btn waves-effect waves-light btn-sm btn-success">Small
.btn-sm</button>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Button Sizes with rounded</h4>
<h6 class="card-subtitle">Use a classes <code>btn btn-lg btn-rounded btn-success</code>
to create a btn.</h6>
<div class="btn-list">
<button type="button"
class="btn waves-effect waves-light btn-lg btn-rounded btn-primary">Large
.btn-lg </button>
<button type="button"
class="btn waves-effect waves-light btn-rounded btn-secondary">Normal
.btn</button>
<button type="button"
class="btn waves-effect waves-light btn-rounded btn-sm btn-success">Small
.btn-sm</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Block buttons</h4>
<h6 class="card-subtitle">Use a classes <code>btn btn-block btn-success</code> to
quickly create a General btn.</h6>
<button type="button" class="btn btn-block btn-primary">Block Button</button>
<button type="button" class="btn btn-block btn-sm btn-info">Block Button</button>
<button type="button" class="btn btn-block btn-xs btn-success">Block Button</button>
</div>
</div>
</div>
</div>
<!-- Row -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Button with icon</h4>
<h6 class="card-subtitle">Use a classes <code>btn btn-success</code> &
<code>i class ="fa fa-heart"</code> to quickly create a General btn.</h6>
<div class="row">
<div class="col-lg-6 mb-4">
<div class="btn-list">
<button type="button" class="btn btn-primary"><i class="fas fa-check"></i>
Primary</button>
<button type="button" class="btn btn-secondary"><i class="far fa-heart"></i>
Secondary</button>
<button type="button" class="btn btn-success"><i class="fas fa-check"></i>
Success</button>
<button type="button" class="btn btn-info"><i class="far fa-heart"></i>
Info</button>
<button type="button" class="btn btn-warning"><i class="far fa-heart"></i>
Warning</button>
<button type="button" class="btn btn-danger"><i class="far fa-heart"></i>
Danger</button>
<button type="button" class="btn btn-light"><i class="far fa-heart"></i>
Light</button>
<button type="button" class="btn btn-dark"><i class="far fa-heart"></i>
Dark</button>
</div>
</div>
<div class="col-lg-6 mb-4">
<div class="btn-list">
<button class="btn btn-primary waves-effect waves-light" type="button"><span
class="btn-label"><i class="far fa-envelope"></i></span>
Mail</button>
<button class="btn btn-secondary waves-effect waves-light"
type="button"><span class="btn-label"><i
class="fas fa-check"></i></span> Check</button>
<button class="btn btn-info waves-effect waves-light" type="button"><span
class="btn-label"><i class="fas fa-heart"></i></span> Heart</button>
<button class="btn btn-warning waves-effect waves-light" type="button"><span
class="btn-label"><i class="far fa-envelope"></i></span>
Mail</button>
<button class="btn btn-danger waves-effect waves-light" type="button"><span
class="btn-label"><i class="far fa-heart"></i></span> Heart</button>
<button class="btn btn-light waves-effect waves-light" type="button"><span
class="btn-label"><i class="far fa-heart"></i></span> Heart</button>
<button class="btn btn-dark waves-effect waves-light" type="button"><span
class="btn-label"><i class="fas fa-heart"></i></span> Heart</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 mb-4">
<div class="btn-list">
<button type="button" class="btn btn-primary btn-rounded"><i
class="fas fa-check"></i> Primary</button>
<button type="button" class="btn btn-secondary btn-rounded"> <i
class="far fa-heart"></i> Secondary</button>
<button type="button" class="btn btn-success btn-rounded"><i
class="fas fa-check"></i> Success</button>
<button type="button" class="btn btn-info btn-rounded"><i
class="far fa-heart"></i> Info</button>
<button type="button" class="btn btn-warning btn-rounded"><i
class="far fa-heart"></i> Warning</button>
<button type="button" class="btn btn-danger btn-rounded"><i
class="far fa-heart"></i> Danger</button>
<button type="button" class="btn btn-light btn-rounded"><i
class="far fa-heart"></i> Light</button>
<button type="button" class="btn btn-dark btn-rounded"><i
class="far fa-heart"></i> Dark</button>
</div>
</div>
<div class="col-lg-6 mb-4">
<div class="btn-list">
<button type="button" class="btn btn-outline-primary"><i
class="fa fa-check"></i> Primary</button>
<button type="button" class="btn btn-outline-secondary"><i
class="fa fa-heart"></i> Secondary</button>
<button type="button" class="btn btn-outline-success"><i
class="fa fa-check"></i> Success</button>
<button type="button" class="btn btn-outline-info"><i
class="fa fa-heart"></i>
Info</button>
<button type="button" class="btn btn-outline-warning"><i
class="fa fa-heart"></i> Warning</button>
<button type="button" class="btn btn-outline-danger"><i
class="fa fa-heart"></i>
Danger</button>
<button type="button" class="btn btn-outline-light"><i
class="fa fa-heart"></i>
Light</button>
<button type="button" class="btn btn-outline-dark"><i
class="fa fa-heart"></i>
Dark</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 mb-4">
<div class="btn-list">
<button class="btn btn-outline-primary waves-effect waves-light"
type="button"><span class="btn-label"><i
class="far fa-envelope"></i></span>
Mail</button>
<button class="btn btn-outline-secondary waves-effect waves-light"
type="button"><span class="btn-label"><i class="fa fa-check"></i></span>
Check</button>
<button class="btn btn-outline-info waves-effect waves-light"
type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>
Heart</button>
<button class="btn btn-outline-warning waves-effect waves-light"
type="button"><span class="btn-label"><i
class="far fa-envelope"></i></span>
Mail</button>
<button class="btn btn-outline-danger waves-effect waves-light"
type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>
Heart</button>
<button class="btn btn-outline-light waves-effect waves-light"
type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>
Heart</button>
<button class="btn btn-outline-dark waves-effect waves-light"
type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>
Heart</button>
</div>
</div>
<div class="col-lg-6 mb-4">
<div class="btn-list">
<button type="button" class="btn btn-outline-primary btn-rounded"><i
class="fas fa-check"></i> Primary</button>
<button type="button" class="btn btn-outline-secondary btn-rounded"><i
class="far fa-heart"></i> Secondary</button>
<button type="button" class="btn btn-outline-success btn-rounded"><i
class="fas fa-check"></i> Success</button>
<button type="button" class="btn btn-outline-info btn-rounded"><i
class="fas fa-heart"></i> Info</button>
<button type="button" class="btn btn-outline-warning btn-rounded"><i
class="far fa-heart"></i> Warning</button>
<button type="button" class="btn btn-outline-danger btn-rounded"><i
class="far fa-heart"></i> Danger</button>
<button type="button" class="btn btn-outline-light btn-rounded"><i
class="fas fa-heart"></i> Light</button>
<button type="button" class="btn btn-outline-dark btn-rounded"><i
class="fas fa-heart"></i> Dark</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 mt-4">
<h4 class="card-title">Button with Dropdown</h4>
<div class="btn-list">
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another
action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else
here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated
link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another
action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else
here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated
link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another
action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else
here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated
link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another
action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else
here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated
link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another
action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else
here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated
link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another
action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else
here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated
link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-light dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another
action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else
here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated
link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-dark dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another
action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else
here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated
link</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6 mt-4">
<h4 class="card-title">Split-button-dropdowns</h4>
<div class="btn-list">
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button"
class="btn btn-danger dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another
action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else
here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated
link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning">Action</button>
<button type="button"
class="btn btn-warning dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another
action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else
here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated
link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">Action</button>
<button type="button"
class="btn btn-success dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another
action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else
here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated
link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info">Action</button>
<button type="button"
class="btn btn-info dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another
action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else
here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated
link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Action</button>
<button type="button"
class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another
action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else
here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated
link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-light">Action</button>
<button type="button"
class="btn btn-light dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another
action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else
here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated
link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-dark">Action</button>
<button type="button"
class="btn btn-dark dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another
action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else
here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated
link</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6 mt-4">
<h4 class="card-title">Large button dropdowns</h4>
<h6 class="card-subtitle">Use a classes to create instant button</h6>
<div class="btn-list">
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another
action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else
here</a>
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-lg" type="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
<button type="button"
class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another
action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else
here</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Row -->
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Circle buttons</h4>
<h6 class="card-subtitle">Use a classes <code>btn btn-circle btn-success</code> to
quickly create a General btn.</h6>
<button type="button" class="btn btn-secondary btn-circle"><i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-primary btn-circle"><i class="fa fa-list"></i>
</button>
<button type="button" class="btn btn-success btn-circle"><i class="fa fa-link"></i>
</button>
<button type="button" class="btn btn-info btn-circle"><i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-warning btn-circle"><i class="fa fa-times"></i>
</button>
<button type="button" class="btn btn-danger btn-circle"><i class="fa fa-heart"></i>
</button>
<br>
<br>
<h4 class="card-title">Circle Large buttons</h4>
<h6 class="card-subtitle">Use a classes <code>btn btn-circle btn-lg btn-success</code>
to quickly create a General btn.</h6>
<button type="button" class="btn btn-secondary btn-circle-lg"><i
class="fa fa-check"></i> </button>
<button type="button" class="btn btn-primary btn-circle-lg"><i class="fa fa-list"></i>
</button>
<button type="button" class="btn btn-success btn-circle-lg"><i class="fa fa-link"></i>
</button>
<button type="button" class="btn btn-info btn-circle-lg"><i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-warning btn-circle-lg"><i class="fa fa-times"></i>
</button>
<button type="button" class="btn btn-danger btn-circle-lg"><i class="fa fa-heart"></i>
</button>
</div>
</div>
</div>
</div>
<!-- End Row -->
<!-- Row -->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="row">
<!-- column -->
<div class=" col-lg-6">
<div class="card-body">
<h4 class="card-title">Group buttons</h4>
<h6 class="card-subtitle">Wrap a series of buttons with <code
class="highlighter-rouge">.btn</code> in <code
class="highlighter-rouge">.btn-group</code></h6>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-info"><i
class="fa fa-align-left"></i></button>
<button type="button" class="btn btn-info"><i
class="fa fa-align-justify"></i></button>
<button type="button" class="btn btn-info"><i
class="fa fa-align-right"></i></button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-success"><i
class="fa fa-fast-backward"></i></button>
<button type="button" class="btn btn-success"><i
class="fa fa-play"></i></button>
<button type="button" class="btn btn-success"><i
class="fa fa-fast-forward"></i></button>
</div>
</div>
</div>
<!-- column -->
<div class=" col-lg-6">
<div class="card-body">
<h4 class="card-title">Button toolbar pagination</h4>
<h6 class="card-subtitle">Wrap a series of buttons with <code
class="highlighter-rouge">.btn</code> in <code
class="highlighter-rouge">.btn-group</code></h6>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary disabled">1</button>
<button type="button" class="btn btn-info">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">8</button>
</div>
</div>
</div>
</div>
<!-- column -->
<div class=" col-lg-6">
<div class="card-body">
<h4 class="card-title">Button Toolbar with Input Group</h4>
<div class="btn-toolbar mb-3" role="toolbar"
aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary"><i
class="ti-move"></i></button>
<button type="button" class="btn btn-secondary"><i
class="ti-fullscreen"></i></button>
<button type="button" class="btn btn-secondary"><i
class="ti-target"></i></button>
<button type="button" class="btn btn-secondary"><i
class="ti-trash"></i></button>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon"><i
class="ti-email"></i></div>
</div>
<input type="text" class="form-control" placeholder="Subscribe Now"
aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
</div>
</div>
</div>
<!-- column -->
<div class=" col-lg-6">
<div class="card-body">
<h4 class="card-title">Button Toolbar with Jutify Content Input Group</h4>
<div class="btn-toolbar justify-content-between" role="toolbar"
aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary"><i
class="ti-move"></i></button>
<button type="button" class="btn btn-secondary"><i
class="ti-fullscreen"></i></button>
<button type="button" class="btn btn-secondary"><i
class="ti-target"></i></button>
<button type="button" class="btn btn-secondary"><i
class="ti-trash"></i></button>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon2"><i
class="ti-email"></i></div>
</div>
<input type="text" class="form-control" placeholder="Subscribe Now"
aria-label="Input group example" aria-describedby="btnGroupAddon2">
</div>
</div>
</div>
</div>
<!-- column -->
<div class=" col-lg-6">
<div class="card-body">
<h4 class="card-title">Group buttons sizing</h4>
<h6 class="card-subtitle">Wrap a series of buttons with <code
class="highlighter-rouge">.btn</code> in <code
class="highlighter-rouge">.btn-group</code></h6>
<div class="btn-list">
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-info"><i
class="fa fa-align-left"></i></button>
<button type="button" class="btn btn-info"><i
class="fa fa-align-justify"></i></button>
<button type="button" class="btn btn-info"><i
class="fa fa-align-right"></i></button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
<button type="button" class="btn btn-success"><i
class="fa fa-fast-backward"></i></button>
<button type="button" class="btn btn-success"><i
class="fa fa-play"></i></button>
<button type="button" class="btn btn-success"><i
class="fa fa-fast-forward"></i></button>
</div>
</div>
</div>
</div>
<!-- column -->
<!-- column -->
<div class=" col-lg-6">
<div class="card-body">
<h4 class="card-title">Nesting</h4>
<h6 class="card-subtitle">creat with below code </h6>
<div class="btn-group" role="group"
aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button"
class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<!-- column -->
<div class=" col-lg-6 mb-4">
<div class="card-body">
<h4 class="card-title">Vertical buttons</h4>
<h6 class="card-subtitle">creat vertical button with class of
<code>.btn-group-vertical</code> </h6>
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
</div>
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-secondary">Button</button>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop1" type="button"
class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
<button type="button" class="btn btn-secondary">Button</button>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop2" type="button"
class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop3" type="button"
class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop4" type="button"
class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<!-- column -->
<div class=" col-lg-6 mb-4">
<div class="card-body">
<h4 class="card-title">Button with radio</h4>
<h6 class="card-subtitle">There are a few easy ways to quickly get started with
Bootstrap, each one ... </h6>
<div class="btn-group mt-3" data-toggle="buttons" role="group">
<label class="btn btn-outline btn-info">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="options" value="male"
class="custom-control-input">
<label class="custom-control-label" for="customRadio1"> <i
class="ti-check text-active" aria-hidden="true"></i>
Male</label>
</div>
</label>
<label class="btn btn-outline btn-info">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="options" value="female"
class="custom-control-input">
<label class="custom-control-label" for="customRadio2"> <i
class="ti-check text-active" aria-hidden="true"></i>
Female</label>
</div>
</label>
<label class="btn btn-outline btn-info active">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio3" name="options" value="n/a"
class="custom-control-input">
<label class="custom-control-label" for="customRadio3"> <i
class="ti-check text-active" aria-hidden="true"></i>
N/A</label>
</div>
</label>
</div>
<br />
<br />
<h4 class="card-title">Button with checkbox</h4>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-info active">
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" id="checkbox0"
checked>
<label class="custom-control-label" for="checkbox0">Checked</label>
</div>
</label>
<label class="btn btn-info">
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" id="checkbox1">
<label class="custom-control-label" for="checkbox1">Checkbox
2</label>
</div>
</label>
<label class="btn btn-info">
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" id="checkbox2">
<label class="custom-control-label" for="checkbox2">Checkbox
3</label>
</div>
</label>
</div>
<br />
<br />
<h4 class="card-title">Button with Radiobutton</h4>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio4" name="customRadio"
class="custom-control-input" checked>
<label class="custom-control-label"
for="customRadio4">Selected</label>
</div>
</label>
<label class="btn btn-primary">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio5" name="customRadio"
class="custom-control-input">
<label class="custom-control-label" for="customRadio5">Radio
2</label>
</div>
</label>
<label class="btn btn-primary">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio6" name="customRadio"
class="custom-control-input">
<label class="custom-control-label" for="customRadio6">Radio
3</label>
</div>
</label>
</div>
</div>
</div>
<!-- column -->
</div>
</div>
</div>
</div>
<!-- End Row -->
<!-- Row -->
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Direction of the Dropdown</h4>
<h5 class="card-subtitle">Trigger dropdown menus above elements by adding
<code>.dropup</code> to the parent element.</h5>
<div class="row mt-3">
<div class="col-md-4">
<h5 class="card-title mt-3">Dropdowm Right Side</h5>
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- Split dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary">
Split dropright
</button>
<button type="button"
class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
<div class="col-md-4">
<h5 class="card-title mt-3">Dropdown Up Side</h5>
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- Split dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">
Split dropup
</button>
<button type="button"
class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
<div class="col-md-4">
<h5 class="card-title mt-3">Dropdowm Left Side</h5>
<!-- Default dropleft button -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- Split dropleft button -->
<div class="btn-group">
<div class="btn-group dropleft" role="group">
<button type="button"
class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<button type="button" class="btn btn-secondary">
Split dropleft
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Menu Alignment</h4>
<h5 class="card-subtitle">Add <code>.dropdown-menu-right</code> to a
<code>.dropdown-menu</code> to right align the dropdown menu.</h5>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Left-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-left">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Responsive Alignment</h4>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown" data-display="static" aria-haspopup="true"
aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-lg-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<div class="btn-group mt-2">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown" data-display="static" aria-haspopup="true"
aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Different Menu Content</h4>
<div class="btn-group">
<button type="button" class="btn btn-outline-info dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Drodown with Header
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-info dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown with Divider
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-info dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown with Text
</button>
<div class="dropdown-menu p-4 text-muted" style="max-width: 400px;">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-info dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown with Form
</button>
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1"
placeholder="email@example.com">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control"
id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="form-group">
<input type="checkbox" id="md_checkbox_21"
class="filled-in chk-col-indigo" />
<label for="md_checkbox_21">Remeber Me</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
</div>
<h4 class="card-title mt-4">Dropdown Options</h4>
<div class="d-flex">
<div class="dropdown mr-1">
<button type="button" class="btn btn-secondary dropdown-toggle"
id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" data-offset="10,20">
Offset
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Reference</button>
<button type="button"
class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" data-reference="parent">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Row -->
<!-- Row -->
<!-- End Row -->
<!-- ============================================================== -->
<!-- End PAge Content -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Container fluid -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- footer -->
<!-- ============================================================== -->
<footer class="footer text-center text-muted">
All Rights Reserved by Adminmart. Designed and Developed by <a
href="https://wrappixel.com">WrapPixel</a>.
</footer>
<!-- ============================================================== -->
<!-- End footer -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Page wrapper -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="../assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="../assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- apps -->
<!-- apps -->
<script src="../dist/js/app-style-switcher.js"></script>
<script src="../dist/js/feather.min.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="../assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="../assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<!-- themejs -->
<!--Menu sidebar -->
<script src="../dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="../dist/js/custom.min.js"></script>
<!-- This Page JS -->
<script src="../assets/extra-libs/prism/prism.js"></script>
</body>
</html>