sleek-dashboard
Version:
Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com
2,074 lines • 98.8 kB
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Sleek Dashboard - Free Bootstrap 4 Admin Dashboard Template and UI Kit. It is very powerful bootstrap admin dashboard, which allows you to build products like admin panels, content management systems and CRMs etc.">
<title>Buttons - Sleek Admin Dashboard Template</title>
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500|Poppins:400,500,600,700|Roboto:400,500" rel="stylesheet" />
<link href="https://cdn.materialdesignicons.com/4.4.95/css/materialdesignicons.min.css" rel="stylesheet" />
<!-- PLUGINS CSS STYLE -->
<link href="assets/plugins/nprogress/nprogress.css" rel="stylesheet" />
<!-- SLEEK CSS -->
<link id="sleek-css" rel="stylesheet" href="assets/css/sleek.css" />
<!-- FAVICON -->
<link href="assets/img/favicon.png" rel="shortcut icon" />
<!--
HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="assets/plugins/nprogress/nprogress.js"></script>
</head>
<body class="header-fixed sidebar-fixed sidebar-dark header-light" id="body">
<script>
NProgress.configure({ showSpinner: false });
NProgress.start();
</script>
<div class="wrapper">
<!-- Github Link -->
<a href="https://github.com/tafcoder/sleek-dashboard" target="_blank" class="github-link">
<svg width="70" height="70" viewBox="0 0 250 250" aria-hidden="true">
<defs>
<linearGradient id="grad1" x1="0%" y1="75%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#896def;stop-opacity:1" />
<stop offset="100%" style="stop-color:#482271;stop-opacity:1" />
</linearGradient>
</defs>
<path d="M 0,0 L115,115 L115,115 L142,142 L250,250 L250,0 Z" fill="url(#grad1)"></path>
</svg>
<i class="mdi mdi-github-circle"></i>
</a>
<!--
====================================
——— LEFT SIDEBAR WITH FOOTER
=====================================
-->
<aside class="left-sidebar bg-sidebar">
<div id="sidebar" class="sidebar sidebar-with-footer">
<!-- Aplication Brand -->
<div class="app-brand">
<a href="/index.html" title="Sleek Dashboard">
<svg
class="brand-icon"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid"
width="30"
height="33"
viewBox="0 0 30 33"
>
<g fill="none" fill-rule="evenodd">
<path
class="logo-fill-blue"
fill="#7DBCFF"
d="M0 4v25l8 4V0zM22 4v25l8 4V0z"
/>
<path class="logo-fill-white" fill="#FFF" d="M11 4v25l8 4V0z" />
</g>
</svg>
<span class="brand-name text-truncate">Sleek Dashboard</span>
</a>
</div>
<!-- begin sidebar scrollbar -->
<div class="sidebar-scrollbar">
<!-- sidebar menu -->
<ul class="nav sidebar-inner" id="sidebar-menu">
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#dashboard"
aria-expanded="false" aria-controls="dashboard">
<i class="mdi mdi-view-dashboard-outline"></i>
<span class="nav-text">Dashboard</span> <b class="caret"></b>
</a>
<ul class="collapse" id="dashboard"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="index.html">
<span class="nav-text">Ecommerce</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="analytics.html">
<span class="nav-text">Analytics</span>
<span class="badge badge-success">new</span>
</a>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#app"
aria-expanded="false" aria-controls="app">
<i class="mdi mdi-pencil-box-multiple"></i>
<span class="nav-text">App</span> <b class="caret"></b>
</a>
<ul class="collapse" id="app"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="chat.html">
<span class="nav-text">Chat</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="contacts.html">
<span class="nav-text">Contacts</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="team.html">
<span class="nav-text">Team</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="calendar.html">
<span class="nav-text">Calendar</span>
</a>
</li>
</div>
</ul>
</li>
<li class="has-sub active expand" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#components"
aria-expanded="false" aria-controls="components">
<i class="mdi mdi-folder-multiple-outline"></i>
<span class="nav-text">Components</span> <b class="caret"></b>
</a>
<ul class="collapse show" id="components"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="alert.html">
<span class="nav-text">Alert</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="badge.html">
<span class="nav-text">Badge</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="breadcrumb.html">
<span class="nav-text">Breadcrumb</span>
</a>
</li>
<li class="active" >
<a class="sidenav-item-link" href="button-default.html">
<span class="nav-text">Button Default</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="button-dropdown.html">
<span class="nav-text">Button Dropdown</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="button-group.html">
<span class="nav-text">Button Group</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="button-social.html">
<span class="nav-text">Button Social</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="button-loading.html">
<span class="nav-text">Button Loading</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="card.html">
<span class="nav-text">Card</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="carousel.html">
<span class="nav-text">Carousel</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="collapse.html">
<span class="nav-text">Collapse</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="list-group.html">
<span class="nav-text">List Group</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="modal.html">
<span class="nav-text">Modal</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="pagination.html">
<span class="nav-text">Pagination</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="popover-tooltip.html">
<span class="nav-text">Popover & Tooltip</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="progress-bar.html">
<span class="nav-text">Progress Bar</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="spinner.html">
<span class="nav-text">Spinner</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="switcher.html">
<span class="nav-text">Switcher</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="tab.html">
<span class="nav-text">Tab</span>
</a>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
aria-expanded="false" aria-controls="icons">
<i class="mdi mdi-diamond-stone"></i>
<span class="nav-text">Icons</span> <b class="caret"></b>
</a>
<ul class="collapse" id="icons"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="material-icon.html">
<span class="nav-text">Material Icon</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="flag-icon.html">
<span class="nav-text">Flag Icon</span>
</a>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
aria-expanded="false" aria-controls="forms">
<i class="mdi mdi-email-mark-as-unread"></i>
<span class="nav-text">Forms</span> <b class="caret"></b>
</a>
<ul class="collapse" id="forms"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="basic-input.html">
<span class="nav-text">Basic Input</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="input-group.html">
<span class="nav-text">Input Group</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="checkbox-radio.html">
<span class="nav-text">Checkbox & Radio</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="form-validation.html">
<span class="nav-text">Form Validation</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="form-advance.html">
<span class="nav-text">Form Advance</span>
</a>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
aria-expanded="false" aria-controls="tables">
<i class="mdi mdi-table"></i>
<span class="nav-text">Tables</span> <b class="caret"></b>
</a>
<ul class="collapse" id="tables"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="basic-tables.html">
<span class="nav-text">Basic Tables</span>
</a>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#data-tables"
aria-expanded="false" aria-controls="data-tables">
<span class="nav-text">Data Tables</span> <b class="caret"></b>
</a>
<ul class="collapse" id="data-tables">
<div class="sub-menu">
<li >
<a href="basic-data-table.html">Basic Data Table</a>
</li>
<li >
<a href="responsive-data-table.html">Responsive Data Table</a>
</li>
<li >
<a href="hoverable-data-table.html">Hoverable Data Table</a>
</li>
<li >
<a href="expendable-data-table.html">Expendable Data Table</a>
</li>
</div>
</ul>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
aria-expanded="false" aria-controls="maps">
<i class="mdi mdi-google-maps"></i>
<span class="nav-text">Maps</span> <b class="caret"></b>
</a>
<ul class="collapse" id="maps"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="google-map.html">
<span class="nav-text">Google Map</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="vector-map.html">
<span class="nav-text">Vector Map</span>
</a>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
aria-expanded="false" aria-controls="widgets">
<i class="mdi mdi-widgets"></i>
<span class="nav-text">Widgets</span> <b class="caret"></b>
</a>
<ul class="collapse" id="widgets"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="general-widget.html">
<span class="nav-text">General Widget</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="chart-widget.html">
<span class="nav-text">Chart Widget</span>
</a>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
aria-expanded="false" aria-controls="charts">
<i class="mdi mdi-chart-pie"></i>
<span class="nav-text">Charts</span> <b class="caret"></b>
</a>
<ul class="collapse" id="charts"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="chartjs.html">
<span class="nav-text">ChartJS</span>
</a>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#pages"
aria-expanded="false" aria-controls="pages">
<i class="mdi mdi-image-filter-none"></i>
<span class="nav-text">Pages</span> <b class="caret"></b>
</a>
<ul class="collapse" id="pages"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="user-profile.html">
<span class="nav-text">User Profile</span>
</a>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
aria-expanded="false" aria-controls="authentication">
<span class="nav-text">Authentication</span> <b class="caret"></b>
</a>
<ul class="collapse" id="authentication">
<div class="sub-menu">
<li >
<a href="sign-in.html">Sign In</a>
</li>
<li >
<a href="sign-up.html">Sign Up</a>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#others"
aria-expanded="false" aria-controls="others">
<span class="nav-text">Others</span> <b class="caret"></b>
</a>
<ul class="collapse" id="others">
<div class="sub-menu">
<li >
<a href="invoice.html">Invoice</a>
</li>
<li >
<a href="404.html">404 Page</a>
</li>
</div>
</ul>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#documentation"
aria-expanded="false" aria-controls="documentation">
<i class="mdi mdi-book-open-page-variant"></i>
<span class="nav-text">Documentation</span> <b class="caret"></b>
</a>
<ul class="collapse" id="documentation"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li class="section-title">
Getting Started
</li>
<li >
<a class="sidenav-item-link" href="introduction.html">
<span class="nav-text">Introduction</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="quick-start.html">
<span class="nav-text">Quick Start</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="customization.html">
<span class="nav-text">Customization</span>
</a>
</li>
<li class="section-title">
Layouts
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#headers"
aria-expanded="false" aria-controls="headers">
<span class="nav-text">Header Variations</span> <b class="caret"></b>
</a>
<ul class="collapse" id="headers">
<div class="sub-menu">
<li >
<a href="header-fixed.html">Header Fixed</a>
</li>
<li >
<a href="header-static.html">Header Static</a>
</li>
<li >
<a href="header-light.html">Header Light</a>
</li>
<li >
<a href="header-dark.html">Header Dark</a>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#sidebar-navs"
aria-expanded="false" aria-controls="sidebar-navs">
<span class="nav-text">Sidebar Variations</span> <b class="caret"></b>
</a>
<ul class="collapse" id="sidebar-navs">
<div class="sub-menu">
<li >
<a href="sidebar-fixed-default.html">Sidebar Fixed Default</a>
</li>
<li >
<a href="sidebar-fixed-minified.html">Sidebar Fixed Minified</a>
</li>
<li >
<a href="sidebar-fixed-offcanvas.html">Sidebar Fixed Offcanvas</a>
</li>
<li >
<a href="sidebar-static-default.html">Sidebar Static Default</a>
</li>
<li >
<a href="sidebar-static-minified.html">Sidebar Static Minified</a>
</li>
<li >
<a href="sidebar-static-offcanvas.html">Sidebar Static Offcanvas</a>
</li>
<li >
<a href="sidebar-with-footer.html">Sidebar With Footer</a>
</li>
<li >
<a href="sidebar-without-footer.html">Sidebar Without Footer</a>
</li>
<li >
<a href="right-sidebar.html">Right Sidebar</a>
</li>
</div>
</ul>
</li>
<li >
<a class="sidenav-item-link" href="rtl.html">
<span class="nav-text">RTL Direction</span>
</a>
</li>
</div>
</ul>
</li>
</ul>
</div>
<div class="sidebar-footer">
<hr class="separator mb-0" />
<div class="sidebar-footer-content">
<h6 class="text-uppercase">
Cpu Uses <span class="float-right">40%</span>
</h6>
<div class="progress progress-xs">
<div
class="progress-bar active"
style="width: 40%;"
role="progressbar"
></div>
</div>
<h6 class="text-uppercase">
Memory Uses <span class="float-right">65%</span>
</h6>
<div class="progress progress-xs">
<div
class="progress-bar progress-bar-warning"
style="width: 65%;"
role="progressbar"
></div>
</div>
</div>
</div>
</div>
</aside>
<div class="page-wrapper">
<!-- Header -->
<header class="main-header " id="header">
<nav class="navbar navbar-static-top navbar-expand-lg">
<!-- Sidebar toggle button -->
<button id="sidebar-toggler" class="sidebar-toggle">
<span class="sr-only">Toggle navigation</span>
</button>
<!-- search form -->
<div class="search-form d-none d-lg-inline-block">
<div class="input-group">
<button type="button" name="search" id="search-btn" class="btn btn-flat">
<i class="mdi mdi-magnify"></i>
</button>
<input type="text" name="query" id="search-input" class="form-control" placeholder="'button', 'chart' etc."
autofocus autocomplete="off" />
</div>
<div id="search-results-container">
<ul id="search-results"></ul>
</div>
</div>
<div class="navbar-right ">
<ul class="nav navbar-nav">
<li class="dropdown notifications-menu">
<button class="dropdown-toggle" data-toggle="dropdown">
<i class="mdi mdi-bell-outline"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">You have 5 notifications</li>
<li>
<a href="#">
<i class="mdi mdi-account-plus"></i> New user registered
<span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
</a>
</li>
<li>
<a href="#">
<i class="mdi mdi-account-remove"></i> User deleted
<span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 07 AM</span>
</a>
</li>
<li>
<a href="#">
<i class="mdi mdi-chart-areaspline"></i> Sales report is ready
<span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 12 PM</span>
</a>
</li>
<li>
<a href="#">
<i class="mdi mdi-account-supervisor"></i> New client
<span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
</a>
</li>
<li>
<a href="#">
<i class="mdi mdi-server-network-off"></i> Server overloaded
<span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 05 AM</span>
</a>
</li>
<li class="dropdown-footer">
<a class="text-center" href="#"> View All </a>
</li>
</ul>
</li>
<li class="right-sidebar-in right-sidebar-2-menu">
<i class="mdi mdi-settings mdi-spin"></i>
</li>
<!-- User Account -->
<li class="dropdown user-menu">
<button href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
<img src="assets/img/user/user.png" class="user-image" alt="User Image" />
<span class="d-none d-lg-inline-block">Abdus Salam</span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<!-- User image -->
<li class="dropdown-header">
<img src="assets/img/user/user.png" class="img-circle" alt="User Image" />
<div class="d-inline-block">
Abdus Salam <small class="pt-1">iamabdus@gmail.com</small>
</div>
</li>
<li>
<a href="user-profile.html">
<i class="mdi mdi-account"></i> My Profile
</a>
</li>
<li>
<a href="#">
<i class="mdi mdi-email"></i> Message
</a>
</li>
<li>
<a href="#"> <i class="mdi mdi-diamond-stone"></i> Projects </a>
</li>
<li class="right-sidebar-in">
<a href="javascript:0"> <i class="mdi mdi-settings"></i> Setting </a>
</li>
<li class="dropdown-footer">
<a href="index.html"> <i class="mdi mdi-logout"></i> Log Out </a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<div class="content-wrapper">
<div class="content"> <div class="breadcrumb-wrapper">
<h1>Button Default</h1>
<nav aria-label="breadcrumb">
<ol class="breadcrumb p-0">
<li class="breadcrumb-item">
<a href="index.html">
<span class="mdi mdi-home"></span>
</a>
</li>
<li class="breadcrumb-item">
components
</li>
<li class="breadcrumb-item" aria-current="page">buttons-default</li>
</ol>
</nav>
</div>
<ul class="nav nav-tabs nav-style-border mb-5 pl-0" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#rounded" role="tab" aria-controls="rounded" aria-selected="true">Rounded Buttons</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#square" role="tab" aria-controls="square" aria-selected="false">Square Buttons</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#pill" role="tab" aria-controls="pill" aria-selected="false">Pill Buttons</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="rounded" role="tabpanel" aria-labelledby="home-tab">
<div class="row">
<div class="col-lg-6">
<!-- Default Button -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Default Buttons </h2>
</div>
<div class="card-body">
<p class="mb-5"> Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details.</a></p>
<button type="button" class="mb-1 btn btn-primary">Primary</button>
<button type="button" class="mb-1 btn btn-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-success">Success</button>
<button type="button" class="mb-1 btn btn-info">Info</button>
<button type="button" class="mb-1 btn btn-warning">Warning</button>
<button type="button" class="mb-1 btn btn-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Default Outline Button -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Default Outline Buttons </h2>
</div>
<div class="card-body">
<p class="mb-5"> For outline button add classes <code>.btn-outline-*</code>. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/#outline-buttons" target="_blank"> more details.</a></p>
<button type="button" class="mb-1 btn btn-outline-primary">Primary</button>
<button type="button" class="mb-1 btn btn-outline-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-outline-success">Success</button>
<button type="button" class="mb-1 btn btn-outline-info">Info</button>
<button type="button" class="mb-1 btn btn-outline-warning">Warning</button>
<button type="button" class="mb-1 btn btn-outline-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!--Default Icon Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Default Icon Buttons </h2>
</div>
<div class="card-body">
<p class="mb-5"> For Icon Buttons add <code> <i class="mdi mdi-*"></i> </code> inside <code> <button class="btn"> </code>. Get classes for material icon <a href="material-icon.html">here</a>.
</p>
<button type="button" class="mb-1 btn btn-primary">
<i class=" mdi mdi-star-outline mr-1"></i> Primary</button>
<button type="button" class="mb-1 btn btn-secondary">
<i class=" mdi mdi-diamond-outline mr-1"></i> Secondary</button>
<button type="button" class="mb-1 btn btn-success">
<i class=" mdi mdi-checkbox-marked-outline mr-1"></i> Success</button>
<button type="button" class="mb-1 btn btn-info">
<i class=" mdi mdi-information-outline mr-1"></i> Info</button>
<button type="button" class="mb-1 btn btn-warning">
<i class=" mdi mdi-alert-outline mr-1"></i> Warning</button>
<button type="button" class="mb-1 btn btn-danger">
<i class=" mdi mdi-close-circle-outline mr-1"></i> Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!--Outline Icon Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Outline Icon Buttons </h2>
</div>
<div class="card-body">
<p class="mb-5"> For Icon Buttons add <code> <i class="mdi mdi-*"></i> </code> inside <code> <button class="btn btn-outline-*"> </code>. Get classes for material icon <a href="material-icon.html">here</a>.
</p>
<button type="button" class="mb-1 btn btn-outline-primary">
<i class=" mdi mdi-star-outline mr-1"></i> Primary</button>
<button type="button" class="mb-1 btn btn-outline-secondary">
<i class=" mdi mdi-diamond-outline mr-1"></i> Secondary</button>
<button type="button" class="mb-1 btn btn-outline-success">
<i class=" mdi mdi-checkbox-marked-outline mr-1"></i> Success</button>
<button type="button" class="mb-1 btn btn-outline-info">
<i class=" mdi mdi-information-outline mr-1"></i> Info</button>
<button type="button" class="mb-1 btn btn-outline-warning">
<i class=" mdi mdi-alert-outline mr-1"></i> Warning</button>
<button type="button" class="mb-1 btn btn-outline-danger">
<i class=" mdi mdi-close-circle-outline mr-1"></i> Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Large Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Large Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5">Add <code>.btn-lg</code> or for additional sizes. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details. </a></p>
<button type="button" class="mb-1 btn btn-lg btn-primary">Primary</button>
<button type="button" class="mb-1 btn btn-lg btn-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-lg btn-success">Success</button>
<button type="button" class="mb-1 btn btn-lg btn-info">Info</button>
<button type="button" class="mb-1 btn btn-lg btn-warning">Warning</button>
<button type="button" class="mb-1 btn btn-lg btn-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Large Outline Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Large Outline Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5">Add <code>.btn-lg btn-outline-*</code> or for additional sizes. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details. </a></p>
<button type="button" class="mb-1 btn btn-lg btn-outline-primary">Primary</button>
<button type="button" class="mb-1 btn btn-lg btn-outline-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-lg btn-outline-success">Success</button>
<button type="button" class="mb-1 btn btn-lg btn-outline-info">Info</button>
<button type="button" class="mb-1 btn btn-lg btn-outline-warning">Warning</button>
<button type="button" class="mb-1 btn btn-lg btn-outline-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Small Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Small Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5">Add <code>.btn-sm</code> or for additional sizes. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details. </a></p>
<button type="button" class="mb-1 btn btn-sm btn-primary">Primary</button>
<button type="button" class="mb-1 btn btn-sm btn-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-sm btn-success">Success</button>
<button type="button" class="mb-1 btn btn-sm btn-info">Info</button>
<button type="button" class="mb-1 btn btn-sm btn-warning">Warning</button>
<button type="button" class="mb-1 btn btn-sm btn-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Small Outline Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Small Outline Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5">Add <code>.btn-sm btn-outline-*</code> or for additional sizes. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details. </a></p>
<button type="button" class="mb-1 btn btn-sm btn-outline-primary">Primary</button>
<button type="button" class="mb-1 btn btn-sm btn-outline-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-sm btn-outline-success">Success</button>
<button type="button" class="mb-1 btn btn-sm btn-outline-info">Info</button>
<button type="button" class="mb-1 btn btn-sm btn-outline-warning">Warning</button>
<button type="button" class="mb-1 btn btn-sm btn-outline-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Disable buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Disable Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5">Make buttons look inactive by adding the <code>disabled</code> boolean attribute to any <button> element. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details. </a></p>
<button type="button" class="mb-1 btn disabled btn-primary">Primary</button>
<button type="button" class="mb-1 btn disabled btn-secondary">Secondary</button>
<button type="button" class="mb-1 btn disabled btn-success">Success</button>
<button type="button" class="mb-1 btn disabled btn-info">Info</button>
<button type="button" class="mb-1 btn disabled btn-warning">Warning</button>
<button type="button" class="mb-1 btn disabled btn-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Disable Outline buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Disable Outline Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5">Make buttons look inactive by adding the <code>disabled</code> boolean attribute to any <button>
element. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details.</a></p>
<button type="button" class="mb-1 btn disabled btn-outline-primary">Primary</button>
<button type="button" class="mb-1 btn disabled btn-outline-secondary">Secondary</button>
<button type="button" class="mb-1 btn disabled btn-outline-success">Success</button>
<button type="button" class="mb-1 btn disabled btn-outline-info">Info</button>
<button type="button" class="mb-1 btn disabled btn-outline-warning">Warning</button>
<button type="button" class="mb-1 btn disabled btn-outline-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Active buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Active Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5">Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details.</a></p>
<button type="button" class="mb-1 btn active btn-primary">Primary</button>
<button type="button" class="mb-1 btn active btn-secondary">Secondary</button>
<button type="button" class="mb-1 btn active btn-success">Success</button>
<button type="button" class="mb-1 btn active btn-info">Info</button>
<button type="button" class="mb-1 btn active btn-warning">Warning</button>
<button type="button" class="mb-1 btn active btn-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Active Outline buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Active Outline Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Active Outline Buttons add class <code> .active </code> to <code> <div class="btn btn-outline-*"> </code>
</p>
<button type="button" class="mb-1 btn active btn-outline-primary">Primary</button>
<button type="button" class="mb-1 btn active btn-outline-secondary">Secondary</button>
<button type="button" class="mb-1 btn active btn-outline-success">Success</button>
<button type="button" class="mb-1 btn active btn-outline-info">Info</button>
<button type="button" class="mb-1 btn active btn-outline-warning">Warning</button>
<button type="button" class="mb-1 btn active btn-outline-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Block buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Block Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5">Create block level buttons—those that span the full width of a parent—by adding <code> .btn-block </code>. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details. </a></p>
<button type="button" class="mb-1 btn btn-block btn-primary">Primary</button>
<button type="button" class="mb-1 btn btn-block btn-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-block btn-success">Success</button>
<button type="button" class="mb-1 btn btn-block btn-info">Info</button>
<button type="button" class="mb-1 btn btn-block btn-warning">Warning</button>
<button type="button" class="mb-1 btn btn-block btn-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Block Outline buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Block Outline Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5">Create block level outline buttons—those that span the full width of a parent—by adding <code>.btn-block .btn-outline-*</code>. Read Bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details. </a></p>
<button type="button" class="mb-1 btn btn-block btn-outline-primary">Primary</button>
<button type="button" class="mb-1 btn btn-block btn-outline-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-block btn-outline-success">Success</button>
<button type="button" class="mb-1 btn btn-block btn-outline-info">Info</button>
<button type="button" class="mb-1 btn btn-block btn-outline-warning">Warning</button>
<button type="button" class="mb-1 btn btn-block btn-outline-danger">Danger</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="square" role="tabpanel" aria-labelledby="profile-tab">
<div class="row">
<div class="col-lg-6">
<!-- Square Button -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Square Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Square Buttons add class <code> .btn-square </code> to <code> <button class="btn btn-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-square btn-primary">Primary</button>
<button type="button" class="mb-1 btn btn-square btn-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-square btn-success">Success</button>
<button type="button" class="mb-1 btn btn-square btn-info">Info</button>
<button type="button" class="mb-1 btn btn-square btn-warning">Warning</button>
<button type="button" class="mb-1 btn btn-square btn-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Default Outline Button -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Square Outline Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Square Buttons add class <code> .btn-square </code> to <code> <button class="btn btn-outline-primary"> </code>
</p>
<button type="button" class="mb-1 btn btn-square btn-outline-primary">Primary</button>
<button type="button" class="mb-1 btn btn-square btn-outline-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-square btn-outline-success">Success</button>
<button type="button" class="mb-1 btn btn-square btn-outline-info">Info</button>
<button type="button" class="mb-1 btn btn-square btn-outline-warning">Warning</button>
<button type="button" class="mb-1 btn btn-square btn-outline-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!--Default Icon Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Square Icon Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Square Icon Buttons add <code> <i class="mdi mdi-*"></i> </code> inside <code> <button class="btn btn-square btn-*"> </code>. Get classes for material icon <a href="material-icon.html">here</a>.
</p>
<button type="button" class="mb-1 btn btn-square btn-primary">
<i class="mdi mdi-star-outline mr-1"></i> Primary</button>
<button type="button" class="mb-1 btn btn-square btn-secondary">
<i class="mdi mdi-diamond-outline mr-1"></i> Secondary</button>
<button type="button" class="mb-1 btn btn-square btn-success">
<i class="mdi mdi-checkbox-marked-outline mr-1"></i> Success</button>
<button type="button" class="mb-1 btn btn-square btn-info">
<i class="mdi mdi-information-outline mr-1"></i> Info</button>
<button type="button" class="mb-1 btn btn-square btn-warning">
<i class="mdi mdi-alert-outline mr-1"></i> Warning</button>
<button type="button" class="mb-1 btn btn-square btn-danger">
<i class="mdi mdi-close-circle-outline mr-1"></i> Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!--Outline Icon Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Outline Square Icon Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Outline Square Icon Buttons add <code> <i class="mdi mdi-*"></i> </code> inside <code> <button class="btn btn-square btn-outline-*"> </code>. Get classes for material icon <a href="material-icon.html">here</a>.
</p>
<button type="button" class="mb-1 btn btn-square btn-outline-primary">
<i class="mdi mdi-star-outline mr-1"></i></i> Primary</button>
<button type="button" class="mb-1 btn btn-square btn-outline-secondary">
<i class="mdi mdi-diamond-outline mr-1"></i> Secondary</button>
<button type="button" class="mb-1 btn btn-square btn-outline-success">
<i class="mdi mdi-checkbox-marked-outline mr-1"></i> Success</button>
<button type="button" class="mb-1 btn btn-square btn-outline-info">
<i class="mdi mdi-information-outline mr-1"></i> Info</button>
<button type="button" class="mb-1 btn btn-square btn-outline-warning">
<i class="mdi mdi-alert-outline mr-1"></i> Warning</button>
<button type="button" class="mb-1 btn btn-square btn-outline-danger">
<i class="mdi mdi-close-circle-outline mr-1"></i> Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Large Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Large Square Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Large Square Buttons add class <code> .btn-lg </code> to <code> <button class="btn btn-square btn-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-square btn-lg btn-primary">Primary</button>
<button type="button" class="mb-1 btn btn-square btn-lg btn-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-square btn-lg btn-success">Success</button>
<button type="button" class="mb-1 btn btn-square btn-lg btn-info">Info</button>
<button type="button" class="mb-1 btn btn-square btn-lg btn-warning">Warning</button>
<button type="button" class="mb-1 btn btn-square btn-lg btn-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Large Outline Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Large Outline Square Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Large Outline Square Buttons add class <code> .btn-lg </code> to <code> <button class="btn btn-square btn-outline-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-square btn-lg btn-outline-primary">Primary</button>
<button type="button" class="mb-1 btn btn-square btn-lg btn-outline-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-square btn-lg btn-outline-success">Success</button>
<button type="button" class="mb-1 btn btn-square btn-lg btn-outline-info">Info</button>
<button type="button" class="mb-1 btn btn-square btn-lg btn-outline-warning">Warning</button>
<button type="button" class="mb-1 btn btn-square btn-lg btn-outline-danger">Danger</button>
</div>
</div>
</div>
<!-- Small Buttons -->
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Small Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Small Square Buttons add class <code> .btn-sm </code> to <code> <button class="btn btn-square btn-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-square btn-sm btn-primary">Primary</button>
<button type="button" class="mb-1 btn btn-square btn-sm btn-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-square btn-sm btn-success">Success</button>
<button type="button" class="mb-1 btn btn-square btn-sm btn-info">Info</button>
<button type="button" class="mb-1 btn btn-square btn-sm btn-warning">Warning</button>
<button type="button" class="mb-1 btn btn-square btn-sm btn-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Small Outline Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Small Outline Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Small Outline Square Buttons add class <code> .btn-sm </code> to <code> <button class="btn btn-square btn-outline-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-square btn-sm btn-outline-primary">Primary</button>
<button type="button" class="mb-1 btn btn-square btn-sm btn-outline-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-square btn-sm btn-outline-success">Success</button>
<button type="button" class="mb-1 btn btn-square btn-sm btn-outline-info">Info</button>
<button type="button" class="mb-1 btn btn-square btn-sm btn-outline-warning">Warning</button>
<button type="button" class="mb-1 btn btn-square btn-sm btn-outline-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Disable Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Disable Square Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Disable Square Buttons add class <code> .disabled </code> to <code> <button class="btn btn-square btn-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-square disabled btn-primary">Primary</button>
<button type="button" class="mb-1 btn btn-square disabled btn-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-square disabled btn-success">Success</button>
<button type="button" class="mb-1 btn btn-square disabled btn-info">Info</button>
<button type="button" class="mb-1 btn btn-square disabled btn-warning">Warning</button>
<button type="button" class="mb-1 btn btn-square disabled btn-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Disable Outline Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Disable Square Outline Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Disable Outline Square Buttons add class <code> .disabled </code> to <code> <button class="btn btn-square btn-outline-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-square disabled btn-outline-primary">Primary</button>
<button type="button" class="mb-1 btn btn-square disabled btn-outline-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-square disabled btn-outline-success">Success</button>
<button type="button" class="mb-1 btn btn-square disabled btn-outline-info">Info</button>
<button type="button" class="mb-1 btn btn-square disabled btn-outline-warning">Warning</button>
<button type="button" class="mb-1 btn btn-square disabled btn-outline-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Active Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Active Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Active Square Buttons add class <code> .active </code> to <code> <button class="btn btn-square btn-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-square active btn-primary">Primary</button>
<button type="button" class="mb-1 btn btn-square active btn-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-square active btn-success">Success</button>
<button type="button" class="mb-1 btn btn-square active btn-info">Info</button>
<button type="button" class="mb-1 btn btn-square active btn-warning">Warning</button>
<button type="button" class="mb-1 btn btn-square active btn-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Active Outline Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Active Outline Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Active Outline Square Buttons add class <code> .active </code> to <code> <button class="btn btn-square btn-outline-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-square active btn-outline-primary">Primary</button>
<button type="button" class="mb-1 btn btn-square active btn-outline-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-square active btn-outline-success">Success</button>
<button type="button" class="mb-1 btn btn-square active btn-outline-info">Info</button>
<button type="button" class="mb-1 btn btn-square active btn-outline-warning">Warning</button>
<button type="button" class="mb-1 btn btn-square active btn-outline-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Block Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Square Block Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Square Block Buttons add class <code> .btn-block </code> to <code> <button class="btn btn-square btn-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-square btn-block btn-primary">Primary</button>
<button type="button" class="mb-1 btn btn-square btn-block btn-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-square btn-block btn-success">Success</button>
<button type="button" class="mb-1 btn btn-square btn-block btn-info">Info</button>
<button type="button" class="mb-1 btn btn-square btn-block btn-warning">Warning</button>
<button type="button" class="mb-1 btn btn-square btn-block btn-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Block Square Outline Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Block Square Outline Buttons add class <code> .btn-block </code> to <code> <button class="btn btn-square btn-outline-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-square btn-block btn-outline-primary">Primary</button>
<button type="button" class="mb-1 btn btn-square btn-block btn-outline-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-square btn-block btn-outline-success">Success</button>
<button type="button" class="mb-1 btn btn-square btn-block btn-outline-info">Info</button>
<button type="button" class="mb-1 btn btn-square btn-block btn-outline-warning">Warning</button>
<button type="button" class="mb-1 btn btn-square btn-block btn-outline-danger">Danger</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pill" role="tabpanel" aria-labelledby="contact-tab">
<div class="row">
<div class="col-lg-6">
<!-- Block buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Pill Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Pill Buttons add class <code> .btn-pill </code> to <code> <button class="btn btn-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-pill btn-primary">Primary</button>
<button type="button" class="mb-1 btn btn-pill btn-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-pill btn-success">Success</button>
<button type="button" class="mb-1 btn btn-pill btn-info">Info</button>
<button type="button" class="mb-1 btn btn-pill btn-warning">Warning</button>
<button type="button" class="mb-1 btn btn-pill btn-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Default Outline buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Pill Outline Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Pill Buttons add class <code> .btn-pill </code> to <code> <button class="btn btn-outline-primary"> </code>
</p>
<button type="button" class="mb-1 btn btn-pill btn-outline-primary">Primary</button>
<button type="button" class="mb-1 btn btn-pill btn-outline-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-pill btn-outline-success">Success</button>
<button type="button" class="mb-1 btn btn-pill btn-outline-info">Info</button>
<button type="button" class="mb-1 btn btn-pill btn-outline-warning">Warning</button>
<button type="button" class="mb-1 btn btn-pill btn-outline-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!--Default Icon Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Pill Icon Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Pill Square Icon Buttons add <code> <i class="mdi mdi-*"></i> </code> inside <code> <button class="btn btn-pill"> </code>. Get classes for material icon <a href="material-icon.html">here</a>.
</p>
<button type="button" class="mb-1 btn btn-pill btn-primary">
<i class="mr-1 fa fa-star-o"></i> Primary</button>
<button type="button" class="mb-1 btn btn-pill btn-secondary">
<i class="mr-1 fa fa-diamond"></i> Secondary</button>
<button type="button" class="mb-1 btn btn-pill btn-success">
<i class="mr-1 fa fa-check-square-o"></i> Success</button>
<button type="button" class="mb-1 btn btn-pill btn-info">
<i class="mr-1 fa fa-info-circle"></i> Info</button>
<button type="button" class="mb-1 btn btn-pill btn-warning">
<i class="mr-1 fa fa-warning"></i> Warning</button>
<button type="button" class="mb-1 btn btn-pill btn-danger">
<i class="mr-1 fa fa-ban"></i> Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!--Outline Icon Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Pill Outline Icon Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Pill Square Icon Buttons add <code> <i class="mdi mdi-*"></i> </code> inside <code> <button class="btn btn-pill btn-outline-*"> </code>. Get classes for material icon <a href="material-icon.html">here</a>.
</p>
<button type="button" class="mb-1 btn btn-pill btn-outline-primary">
<i class="mr-1 fa fa-star-o"></i> Primary</button>
<button type="button" class="mb-1 btn btn-pill btn-outline-secondary">
<i class="mr-1 fa fa-diamond"></i> Secondary</button>
<button type="button" class="mb-1 btn btn-pill btn-outline-success">
<i class="mr-1 fa fa-check-square-o"></i> Success</button>
<button type="button" class="mb-1 btn btn-pill btn-outline-info">
<i class="mr-1 fa fa-info-circle"></i> Info</button>
<button type="button" class="mb-1 btn btn-pill btn-outline-warning">
<i class="mr-1 fa fa-warning"></i> Warning</button>
<button type="button" class="mb-1 btn btn-pill btn-outline-danger">
<i class="mr-1 fa fa-ban"></i> Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Large Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Large Pill Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Large Pill Buttons add class <code> .btn-lg </code> to <code> <button class="btn btn-pill btn-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-pill btn-lg btn-primary">Primary</button>
<button type="button" class="mb-1 btn btn-pill btn-lg btn-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-pill btn-lg btn-success">Success</button>
<button type="button" class="mb-1 btn btn-pill btn-lg btn-info">Info</button>
<button type="button" class="mb-1 btn btn-pill btn-lg btn-warning">Warning</button>
<button type="button" class="mb-1 btn btn-pill btn-lg btn-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Large Outline Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Large Pill Outline Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Large Pill Outline Square Buttons add class <code> .btn-lg </code> to <code> <button class="btn btn-pill btn-outline-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-pill btn-lg btn-outline-primary">Primary</button>
<button type="button" class="mb-1 btn btn-pill btn-lg btn-outline-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-pill btn-lg btn-outline-success">Success</button>
<button type="button" class="mb-1 btn btn-pill btn-lg btn-outline-info">Info</button>
<button type="button" class="mb-1 btn btn-pill btn-lg btn-outline-warning">Warning</button>
<button type="button" class="mb-1 btn btn-pill btn-lg btn-outline-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Small Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Small Pill Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Small Pill Buttons add class <code> .btn-sm </code> to <code> <button class="btn btn-pill btn-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-pill btn-sm btn-primary">Primary</button>
<button type="button" class="mb-1 btn btn-pill btn-sm btn-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-pill btn-sm btn-success">Success</button>
<button type="button" class="mb-1 btn btn-pill btn-sm btn-info">Info</button>
<button type="button" class="mb-1 btn btn-pill btn-sm btn-warning">Warning</button>
<button type="button" class="mb-1 btn btn-pill btn-sm btn-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Small Outline Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Small Pill Outline Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Small Pill Outline Buttons add class <code> .btn-sm </code> to <code> <button class="btn btn-pill btn-outline-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-pill btn-sm btn-outline-primary">Primary</button>
<button type="button" class="mb-1 btn btn-pill btn-sm btn-outline-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-pill btn-sm btn-outline-success">Success</button>
<button type="button" class="mb-1 btn btn-pill btn-sm btn-outline-info">Info</button>
<button type="button" class="mb-1 btn btn-pill btn-sm btn-outline-warning">Warning</button>
<button type="button" class="mb-1 btn btn-pill btn-sm btn-outline-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Disable Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Disable Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Disable Pill Buttons add class <code> .disabled </code> to <code> <button class="btn btn-pill btn-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-pill disabled btn-primary">Primary</button>
<button type="button" class="mb-1 btn btn-pill disabled btn-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-pill disabled btn-success">Success</button>
<button type="button" class="mb-1 btn btn-pill disabled btn-info">Info</button>
<button type="button" class="mb-1 btn btn-pill disabled btn-warning">Warning</button>
<button type="button" class="mb-1 btn btn-pill disabled btn-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Disable Outline Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Disable Outline Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Disable Outline Pill Buttons add class <code> .disabled </code> to <code> <button class="btn btn-pill btn-outline-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-pill disabled btn-outline-primary">Primary</button>
<button type="button" class="mb-1 btn btn-pill disabled btn-outline-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-pill disabled btn-outline-success">Success</button>
<button type="button" class="mb-1 btn btn-pill disabled btn-outline-info">Info</button>
<button type="button" class="mb-1 btn btn-pill disabled btn-outline-warning">Warning</button>
<button type="button" class="mb-1 btn btn-pill disabled btn-outline-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Active Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Active Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Active Pill Buttons add class <code> .active </code> to <code> <button class="btn btn-pill btn-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-pill active btn-primary">Primary</button>
<button type="button" class="mb-1 btn btn-pill active btn-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-pill active btn-success">Success</button>
<button type="button" class="mb-1 btn btn-pill active btn-info">Info</button>
<button type="button" class="mb-1 btn btn-pill active btn-warning">Warning</button>
<button type="button" class="mb-1 btn btn-pill active btn-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Active Outline Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Active Outline Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Active Outline Pill Buttons add class <code> .active </code> to <code> <button class="btn btn-pill btn-outline-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-pill active btn-outline-primary">Primary</button>
<button type="button" class="mb-1 btn btn-pill active btn-outline-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-pill active btn-outline-success">Success</button>
<button type="button" class="mb-1 btn btn-pill active btn-outline-info">Info</button>
<button type="button" class="mb-1 btn btn-pill active btn-outline-warning">Warning</button>
<button type="button" class="mb-1 btn btn-pill active btn-outline-danger">Danger</button>
</div>
</div>
</div>
<!-- Block buttons -->
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Block Pill Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Block Pill Buttons add class <code> .btn-block </code> to <code> <button class="btn btn-pill btn-*"> </code>
</p>
<button type="button" class="mb-1 btn btn-pill btn-block btn-primary">Primary</button>
<button type="button" class="mb-1 btn btn-pill btn-block btn-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-pill btn-block btn-success">Success</button>
<button type="button" class="mb-1 btn btn-pill btn-block btn-info">Info</button>
<button type="button" class="mb-1 btn btn-pill btn-block btn-warning">Warning</button>
<button type="button" class="mb-1 btn btn-pill btn-block btn-danger">Danger</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Block Outline Buttons -->
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Block Pill Outline Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Block Pill Outline Buttons add class <code> .btn-block </code> to <code> <button class="btn btn-pillbtn-outline-primary"> </code>
</p>
<button type="button" class="mb-1 btn btn-pill btn-block btn-outline-primary">Primary</button>
<button type="button" class="mb-1 btn btn-pill btn-block btn-outline-secondary">Secondary</button>
<button type="button" class="mb-1 btn btn-pill btn-block btn-outline-success">Success</button>
<button type="button" class="mb-1 btn btn-pill btn-block btn-outline-info">Info</button>
<button type="button" class="mb-1 btn btn-pill btn-block btn-outline-warning">Warning</button>
<button type="button" class="mb-1 btn btn-pill btn-block btn-outline-danger">Danger</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-sidebar-2">
<div class="right-sidebar-container-2">
<div class="slim-scroll-right-sidebar-2">
<div class="right-sidebar-2-header">
<h2>Layout Settings</h2>
<p>User Interface Settings</p>
<div class="btn-close-right-sidebar-2">
<i class="mdi mdi-window-close"></i>
</div>
</div>
<div class="right-sidebar-2-body">
<span class="right-sidebar-2-subtitle">Header Layout</span>
<div class="no-col-space">
<a href="javascript:void(0);" class="btn-right-sidebar-2 header-fixed-to btn-right-sidebar-2-active">Fixed</a>
<a href="javascript:void(0);" class="btn-right-sidebar-2 header-static-to">Static</a>
</div>
<span class="right-sidebar-2-subtitle">Sidebar Layout</span>
<div class="no-col-space">
<select class="right-sidebar-2-select" id="sidebar-option-select">
<option value="sidebar-fixed">Fixed Default</option>
<option value="sidebar-fixed-minified">Fixed Minified</option>
<option value="sidebar-fixed-offcanvas">Fixed Offcanvas</option>
<option value="sidebar-static">Static Default</option>
<option value="sidebar-static-minified">Static Minified</option>
<option value="sidebar-static-offcanvas">Static Offcanvas</option>
</select>
</div>
<span class="right-sidebar-2-subtitle">Header Background</span>
<div class="no-col-space">
<a href="javascript:void(0);" class="btn-right-sidebar-2 btn-right-sidebar-2-active header-light-to">Light</a>
<a href="javascript:void(0);" class="btn-right-sidebar-2 header-dark-to">Dark</a>
</div>
<span class="right-sidebar-2-subtitle">Navigation Background</span>
<div class="no-col-space">
<a href="javascript:void(0);" class="btn-right-sidebar-2 btn-right-sidebar-2-active sidebar-dark-to">Dark</a>
<a href="javascript:void(0);" class="btn-right-sidebar-2 sidebar-light-to">Light</a>
</div>
<span class="right-sidebar-2-subtitle">Direction</span>
<div class="no-col-space">
<a href="javascript:void(0);" class="btn-right-sidebar-2 btn-right-sidebar-2-active ltr-to">LTR</a>
<a href="javascript:void(0);" class="btn-right-sidebar-2 rtl-to">RTL</a>
</div>
<div class="d-flex justify-content-center" style="padding-top: 30px">
<div id="reset-options" style="width: auto; cursor: pointer" class="btn-right-sidebar-2 btn-reset">Reset
Settings</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer mt-auto">
<div class="copyright bg-white">
<p>
© <span id="copy-year">2019</span> Copyright Sleek Dashboard Bootstrap Template by
<a
class="text-primary"
href="http://www.iamabdus.com/"
target="_blank"
>Abdus</a
>.
</p>
</div>
<script>
var d = new Date();
var year = d.getFullYear();
document.getElementById("copy-year").innerHTML = year;
</script>
</footer>
</div>
</div>
<script src="assets/plugins/jquery/jquery.min.js"></script>
<script src="assets/plugins/slimscrollbar/jquery.slimscroll.min.js"></script>
<script src="assets/plugins/jekyll-search.min.js"></script>
<script src="assets/js/sleek.bundle.js"></script>
</body>
</html>