@coreui/ajax
Version:
Open Source Bootstrap Admin Template
1,718 lines • 83.9 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
<meta name="author" content="Łukasz Holeczek">
<meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,AngularJS,Angular,Angular2,Angular 2,Angular4,Angular 4,jQuery,CSS,HTML,RWD,Dashboard,React,React.js,Vue,Vue.js">
<link rel="shortcut icon" href="img/favicon.png">
<title>CoreUI - Open Source Bootstrap Admin Template</title>
<!-- Icons -->
<link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
<link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
<!-- Main styles for this application -->
<link href="css/style.css" rel="stylesheet">
<!-- Styles required by this views -->
</head>
<!-- BODY options, add following classes to body to change options
// Header options
1. '.header-fixed' - Fixed Header
// Brand options
1. '.brand-minimized' - Minimized brand (Only symbol)
// Sidebar options
1. '.sidebar-fixed' - Fixed Sidebar
2. '.sidebar-hidden' - Hidden Sidebar
3. '.sidebar-off-canvas' - Off Canvas Sidebar
4. '.sidebar-minimized' - Minimized Sidebar (Only icons)
5. '.sidebar-compact' - Compact Sidebar
// Aside options
1. '.aside-menu-fixed' - Fixed Aside Menu
2. '.aside-menu-hidden' - Hidden Aside Menu
3. '.aside-menu-off-canvas' - Off Canvas Aside Menu
// Breadcrumb options
1. '.breadcrumb-fixed' - Fixed Breadcrumb
// Footer options
1. '.footer-fixed' - Fixed footer
-->
<body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">
<header class="app-header navbar">
<button class="navbar-toggler mobile-sidebar-toggler d-lg-none mr-auto" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler sidebar-toggler d-md-down-none" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="nav navbar-nav d-md-down-none">
<li class="nav-item px-3">
<a class="nav-link" href="#">Dashboard</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Users</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Settings</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item d-md-down-none">
<a class="nav-link" href="#"><i class="icon-bell"></i><span class="badge badge-pill badge-danger">5</span></a>
</li>
<li class="nav-item d-md-down-none">
<a class="nav-link" href="#"><i class="icon-list"></i></a>
</li>
<li class="nav-item d-md-down-none">
<a class="nav-link" href="#"><i class="icon-location-pin"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<img src="img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-header text-center">
<strong>Account</strong>
</div>
<a class="dropdown-item" href="#"><i class="fa fa-bell-o"></i> Updates<span class="badge badge-info">42</span></a>
<a class="dropdown-item" href="#"><i class="fa fa-envelope-o"></i> Messages<span class="badge badge-success">42</span></a>
<a class="dropdown-item" href="#"><i class="fa fa-tasks"></i> Tasks<span class="badge badge-danger">42</span></a>
<a class="dropdown-item" href="#"><i class="fa fa-comments"></i> Comments<span class="badge badge-warning">42</span></a>
<div class="dropdown-header text-center">
<strong>Settings</strong>
</div>
<a class="dropdown-item" href="#"><i class="fa fa-user"></i> Profile</a>
<a class="dropdown-item" href="#"><i class="fa fa-wrench"></i> Settings</a>
<a class="dropdown-item" href="#"><i class="fa fa-usd"></i> Payments<span class="badge badge-secondary">42</span></a>
<a class="dropdown-item" href="#"><i class="fa fa-file"></i> Projects<span class="badge badge-primary">42</span></a>
<div class="divider"></div>
<a class="dropdown-item" href="#"><i class="fa fa-shield"></i> Lock Account</a>
<a class="dropdown-item" href="#"><i class="fa fa-lock"></i> Logout</a>
</div>
</li>
</ul>
<button class="navbar-toggler aside-menu-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</header>
<div class="app-body">
<div class="sidebar">
<nav class="sidebar-nav">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="index.html"><i class="icon-speedometer"></i> Dashboard <span class="badge badge-primary">NEW</span></a>
</li>
<li class="nav-title">
Theme
</li>
<li class="nav-item">
<a href="colors.html" class="nav-link"><i class="icon-drop"></i> Colors</a>
</li>
<li class="nav-item">
<a href="typography.html" class="nav-link"><i class="icon-pencil"></i> Typograhy</a>
</li>
<li class="nav-title">
Components
</li>
<li class="nav-item nav-dropdown">
<a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-puzzle"></i> Base</a>
<ul class="nav-dropdown-items">
<li class="nav-item">
<a class="nav-link" href="base-breadcrumb.html"><i class="icon-puzzle"></i> Breadcrumb</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-cards.html"><i class="icon-puzzle"></i> Cards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-carousel.html"><i class="icon-puzzle"></i> Carousel</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-collapse.html"><i class="icon-puzzle"></i> Collapse</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-forms.html"><i class="icon-puzzle"></i> Forms</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-jumbotron.html"><i class="icon-puzzle"></i> Jumbotron</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-list-group.html"><i class="icon-puzzle"></i> List group</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-navs.html"><i class="icon-puzzle"></i> Navs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-pagination.html"><i class="icon-puzzle"></i> Pagination</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-popovers.html"><i class="icon-puzzle"></i> Popovers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-progress.html"><i class="icon-puzzle"></i> Progress</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-switches.html"><i class="icon-puzzle"></i> Switches</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-tables.html"><i class="icon-puzzle"></i> Tables</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-tabs.html"><i class="icon-puzzle"></i> Tabs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-tooltips.html"><i class="icon-puzzle"></i> Tooltips</a>
</li>
</ul>
</li>
<li class="nav-item nav-dropdown">
<a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-cursor"></i> Buttons</a>
<ul class="nav-dropdown-items">
<li class="nav-item">
<a class="nav-link" href="buttons-buttons.html"><i class="icon-cursor"></i> Buttons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="buttons-button-group.html"><i class="icon-cursor"></i> Buttons Group</a>
</li>
<li class="nav-item">
<a class="nav-link" href="buttons-dropdowns.html"><i class="icon-cursor"></i> Dropdowns</a>
</li>
<li class="nav-item">
<a class="nav-link" href="buttons-social-buttons.html"><i class="icon-cursor"></i> Social Buttons</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="charts.html"><i class="icon-pie-chart"></i> Charts</a>
</li>
<li class="nav-item nav-dropdown">
<a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-star"></i> Icons</a>
<ul class="nav-dropdown-items">
<li class="nav-item">
<a class="nav-link" href="icons-flags.html"><i class="icon-star"></i> Flags <span class="badge badge-success">NEW</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="icons-font-awesome.html"><i class="icon-star"></i> Font Awesome <span class="badge badge-secondary">4.7</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="icons-simple-line-icons.html"><i class="icon-star"></i> Simple Line Icons</a>
</li>
</ul>
</li>
<li class="nav-item nav-dropdown">
<a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-bell"></i> Notifications</a>
<ul class="nav-dropdown-items">
<li class="nav-item">
<a class="nav-link" href="notifications-alerts.html"><i class="icon-bell"></i> Alerts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="notifications-badge.html"><i class="icon-bell"></i> Badge</a>
</li>
<li class="nav-item">
<a class="nav-link" href="notifications-modals.html"><i class="icon-bell"></i> Modals</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="widgets.html"><i class="icon-calculator"></i> Widgets <span class="badge badge-primary">NEW</span></a>
</li>
<li class="divider"></li>
<li class="nav-title">
Extras
</li>
<li class="nav-item nav-dropdown">
<a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-star"></i> Pages</a>
<ul class="nav-dropdown-items">
<li class="nav-item">
<a class="nav-link" href="pages-login.html" target="_top"><i class="icon-star"></i> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-register.html" target="_top"><i class="icon-star"></i> Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-404.html" target="_top"><i class="icon-star"></i> Error 404</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-500.html" target="_top"><i class="icon-star"></i> Error 500</a>
</li>
</ul>
</li>
<li class="nav-item mt-auto">
<a class="nav-link nav-link-success" href="http://coreui.io/" target="_top"><i class="icon-cloud-download"></i> Download CoreUI</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-danger" href="http://coreui.io/pro/" target="_top"><i class="icon-layers"></i> Try CoreUI <strong>PRO</strong></a>
</li>
</ul>
</nav>
<button class="sidebar-minimizer brand-minimizer" type="button"></button>
</div>
<!-- Main content -->
<main class="main">
<!-- Breadcrumb -->
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item"><a href="#">Admin</a></li>
<li class="breadcrumb-item active">Dashboard</li>
<!-- Breadcrumb Menu-->
<li class="breadcrumb-menu d-md-down-none">
<div class="btn-group" role="group" aria-label="Button group">
<a class="btn" href="#"><i class="icon-speech"></i></a>
<a class="btn" href="./"><i class="icon-graph"></i> Dashboard</a>
<a class="btn" href="#"><i class="icon-settings"></i> Settings</a>
</div>
</li>
</ol>
<div class="container-fluid">
<div class="animated fadeIn">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-header">
<strong>Credit Card</strong>
<small>Form</small>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name">
</div>
</div>
</div>
<!--/.row-->
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="ccnumber">Credit Card Number</label>
<input type="text" class="form-control" id="ccnumber" placeholder="0000 0000 0000 0000">
</div>
</div>
</div>
<!--/.row-->
<div class="row">
<div class="form-group col-sm-4">
<label for="ccmonth">Month</label>
<select class="form-control" id="ccmonth">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</div>
<div class="form-group col-sm-4">
<label for="ccyear">Year</label>
<select class="form-control" id="ccyear">
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
<option>2023</option>
<option>2024</option>
<option>2025</option>
</select>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="cvv">CVV/CVC</label>
<input type="text" class="form-control" id="cvv" placeholder="123">
</div>
</div>
</div>
<!--/.row-->
</div>
</div>
</div>
<!--/.col-->
<div class="col-sm-6">
<div class="card">
<div class="card-header">
<strong>Company</strong>
<small>Form</small>
</div>
<div class="card-body">
<div class="form-group">
<label for="company">Company</label>
<input type="text" class="form-control" id="company" placeholder="Enter your company name">
</div>
<div class="form-group">
<label for="vat">VAT</label>
<input type="text" class="form-control" id="vat" placeholder="PL1234567890">
</div>
<div class="form-group">
<label for="street">Street</label>
<input type="text" class="form-control" id="street" placeholder="Enter street name">
</div>
<div class="row">
<div class="form-group col-sm-8">
<label for="city">City</label>
<input type="text" class="form-control" id="city" placeholder="Enter your city">
</div>
<div class="form-group col-sm-4">
<label for="postal-code">Postal Code</label>
<input type="text" class="form-control" id="postal-code" placeholder="Postal Code">
</div>
</div>
<!--/.row-->
<div class="form-group">
<label for="country">Country</label>
<input type="text" class="form-control" id="country" placeholder="Country name">
</div>
</div>
</div>
</div>
<!--/.col-->
</div>
<!--/.row-->
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<strong>Basic Form</strong>
Elements
</div>
<div class="card-body">
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
<div class="form-group row">
<label class="col-md-3 col-form-label">Static</label>
<div class="col-md-9">
<p class="form-control-static">Username</p>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="text-input">Text Input</label>
<div class="col-md-9">
<input type="text" id="text-input" name="text-input" class="form-control" placeholder="Text">
<span class="help-block">This is a help text</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="email-input">Email Input</label>
<div class="col-md-9">
<input type="email" id="email-input" name="email-input" class="form-control" placeholder="Enter Email">
<span class="help-block">Please enter your email</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="password-input">Password</label>
<div class="col-md-9">
<input type="password" id="password-input" name="password-input" class="form-control" placeholder="Password">
<span class="help-block">Please enter a complex password</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="disabled-input">Disabled Input</label>
<div class="col-md-9">
<input type="text" id="disabled-input" name="disabled-input" class="form-control" placeholder="Disabled" disabled="">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="textarea-input">Textarea</label>
<div class="col-md-9">
<textarea id="textarea-input" name="textarea-input" rows="9" class="form-control" placeholder="Content.."></textarea>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="select1">Select</label>
<div class="col-md-9">
<select id="select1" name="select1" class="form-control">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="select2">Select Large</label>
<div class="col-md-9">
<select id="select2" name="select2" class="form-control form-control-lg">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="select3">Select Small</label>
<div class="col-md-9">
<select id="select3" name="select3" class="form-control form-control-sm">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="disabledSelect">Disabled Select</label>
<div class="col-md-9">
<select id="disabledSelect" class="form-control" disabled="">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="multiple-select">Multiple select</label>
<div class="col-md-9">
<select id="multiple-select" name="multiple-select" class="form-control" size="5" multiple="">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
<option value="5">Option #5</option>
<option value="6">Option #6</option>
<option value="7">Option #7</option>
<option value="8">Option #8</option>
<option value="9">Option #9</option>
<option value="10">Option #10</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Radios</label>
<div class="col-md-9 col-form-label">
<div class="form-check">
<input class="form-check-input" type="radio" value="radio1" id="radio1" name="radios">
<label class="form-check-label" for="radio1">
Option 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="radio2" id="radio2" name="radios">
<label class="form-check-label" for="radio2">
Option 2
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="radio2" id="radio3" name="radios">
<label class="form-check-label" for="radio3">
Option 3
</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Inline Radios</label>
<div class="col-md-9 col-form-label">
<div class="form-check form-check-inline mr-1">
<input class="form-check-input" type="radio" id="inline-radio1" value="option1" name="inline-radios">
<label class="form-check-label" for="inline-radio1">One</label>
</div>
<div class="form-check form-check-inline mr-1">
<input class="form-check-input" type="radio" id="inline-radio2" value="option2" name="inline-radios">
<label class="form-check-label" for="inline-radio2">Two</label>
</div>
<div class="form-check form-check-inline mr-1">
<input class="form-check-input" type="radio" id="inline-radio3" value="option3" name="inline-radios">
<label class="form-check-label" for="inline-radio3">Three</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Checkboxes</label>
<div class="col-md-9 col-form-label">
<div class="form-check checkbox">
<input class="form-check-input" type="checkbox" value="" id="check1">
<label class="form-check-label" for="check1">
Option 1
</label>
</div>
<div class="form-check checkbox">
<input class="form-check-input" type="checkbox" value="" id="check2">
<label class="form-check-label" for="check2">
Option 2
</label>
</div>
<div class="form-check checkbox">
<input class="form-check-input" type="checkbox" value="" id="check3">
<label class="form-check-label" for="check3">
Option 3
</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Inline Checkboxes</label>
<div class="col-md-9 col-form-label">
<div class="form-check form-check-inline mr-1">
<input class="form-check-input" type="checkbox" id="inline-checkbox1" value="check1">
<label class="form-check-label" for="inline-checkbox1">One</label>
</div>
<div class="form-check form-check-inline mr-1">
<input class="form-check-input" type="checkbox" id="inline-checkbox2" value="check2">
<label class="form-check-label" for="inline-checkbox2">Two</label>
</div>
<div class="form-check form-check-inline mr-1">
<input class="form-check-input" type="checkbox" id="inline-checkbox3" value="check3">
<label class="form-check-label" for="inline-checkbox3">Three</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="file-input">File input</label>
<div class="col-md-9">
<input type="file" id="file-input" name="file-input">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="file-multiple-input">Multiple File input</label>
<div class="col-md-9">
<input type="file" id="file-multiple-input" name="file-multiple-input" multiple="">
</div>
</div>
</form>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
</div>
</div>
<div class="card">
<div class="card-header">
<strong>Inline</strong>
Form
</div>
<div class="card-body">
<form action="" method="post" class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
</form>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<strong>Horizontal</strong>
Form
</div>
<div class="card-body">
<form action="" method="post" class="form-horizontal">
<div class="form-group row">
<label class="col-md-3 col-form-label" for="hf-email">Email</label>
<div class="col-md-9">
<input type="email" id="hf-email" name="hf-email" class="form-control" placeholder="Enter Email..">
<span class="help-block">Please enter your email</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="hf-password">Password</label>
<div class="col-md-9">
<input type="password" id="hf-password" name="hf-password" class="form-control" placeholder="Enter Password..">
<span class="help-block">Please enter your password</span>
</div>
</div>
</form>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
</div>
</div>
<div class="card">
<div class="card-header">
<strong>Normal</strong>
Form
</div>
<div class="card-body">
<form action="" method="post">
<div class="form-group">
<label for="nf-email">Email</label>
<input type="email" id="nf-email" name="nf-email" class="form-control" placeholder="Enter Email..">
<span class="help-block">Please enter your email</span>
</div>
<div class="form-group">
<label for="nf-password">Password</label>
<input type="password" id="nf-password" name="nf-password" class="form-control" placeholder="Enter Password..">
<span class="help-block">Please enter your password</span>
</div>
</form>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
</div>
</div>
<div class="card">
<div class="card-header">
Input
<strong>Grid</strong>
</div>
<div class="card-body">
<form action="" method="post" class="form-horizontal">
<div class="form-group row">
<div class="col-sm-3">
<input type="text" class="form-control" placeholder=".col-sm-3">
</div>
</div>
<div class="form-group row">
<div class="col-sm-4">
<input type="text" class="form-control" placeholder=".col-sm-4">
</div>
</div>
<div class="form-group row">
<div class="col-sm-5">
<input type="text" class="form-control" placeholder=".col-sm-5">
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<input type="text" class="form-control" placeholder=".col-sm-6">
</div>
</div>
<div class="form-group row">
<div class="col-sm-7">
<input type="text" class="form-control" placeholder=".col-sm-7">
</div>
</div>
<div class="form-group row">
<div class="col-sm-8">
<input type="text" class="form-control" placeholder=".col-sm-8">
</div>
</div>
<div class="form-group row">
<div class="col-sm-9">
<input type="text" class="form-control" placeholder=".col-sm-9">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<input type="text" class="form-control" placeholder=".col-sm-10">
</div>
</div>
<div class="form-group row">
<div class="col-sm-11">
<input type="text" class="form-control" placeholder=".col-sm-11">
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<input type="text" class="form-control" placeholder=".col-sm-12">
</div>
</div>
</form>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-user"></i> Login</button>
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
</div>
</div>
<div class="card">
<div class="card-header">
Input
<strong>Sizes</strong>
</div>
<div class="card-body">
<form action="" method="post" class="form-horizontal">
<div class="form-group row">
<label class="col-sm-5 col-form-label" for="input-small">Small Input</label>
<div class="col-sm-6">
<input type="text" id="input-small" name="input-small" class="form-control form-control-sm" placeholder=".form-control-sm">
</div>
</div>
<div class="form-group row">
<label class="col-sm-5 col-form-label" for="input-normal">Normal Input</label>
<div class="col-sm-6">
<input type="text" id="input-normal" name="input-normal" class="form-control" placeholder="Normal">
</div>
</div>
<div class="form-group row">
<label class="col-sm-5 col-form-label" for="input-large">Large Input</label>
<div class="col-sm-6">
<input type="text" id="input-large" name="input-large" class="form-control form-control-lg" placeholder=".form-control-lg">
</div>
</div>
</form>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
</div>
</div>
</div>
<!--/.col-->
</div>
<!--/.row-->
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-header">
<strong>Validation states</strong>
Form
</div>
<div class="card-body">
<form class="was-validated">
<div class="form-group">
<label class="form-col-form-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control is-valid" id="inputSuccess1">
</div>
<div class="form-group">
<label class="form-col-form-label" for="inputError1">Input with error</label>
<input type="text" class="form-control is-invalid" id="inputError1">
<div class="invalid-feedback">
Please provide a valid informations.
</div>
</div>
</form>
</div>
</div>
</div>
<!--/.col-->
<div class="col-sm-6">
<div class="card">
<div class="card-header">
<strong>Validation</strong>
<code>was-validated</code>
</div>
<div class="card-body was-validated">
<div class="form-group">
<label class="form-col-form-label" for="inputSuccess2">Input is valid</label>
<input type="text" class="form-control is-valid" id="inputSuccess2">
</div>
<div class="form-group">
<label class="form-col-form-label" for="inputError2">Input required</label>
<input type="text" class="form-control is-invalid" id="inputError2" required="">
<div class="invalid-feedback">
Please provide a valid informations.
</div>
</div>
</div>
</div>
</div>
<!--/.col-->
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-header">
<strong>Icon/Text</strong>
Groups
</div>
<div class="card-body">
<form action="" method="post" class="form-horizontal">
<div class="form-group row">
<div class="col-md-12">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
<input type="text" id="input1-group1" name="input1-group1" class="form-control" placeholder="Username">
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<div class="input-group">
<input type="email" id="input2-group1" name="input2-group1" class="form-control" placeholder="Email">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-envelope-o"></i></span>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-euro"></i></span>
</div>
<input type="text" id="input3-group1" name="input3-group1" class="form-control" placeholder="..">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-header">
<strong>Buttons</strong>
Groups
</div>
<div class="card-body">
<form action="" method="post" class="form-horizontal">
<div class="form-group row">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-prepend">
<button type="button" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
</span>
<input type="text" id="input1-group2" name="input1-group2" class="form-control" placeholder="Username">
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<div class="input-group">
<input type="email" id="input2-group2" name="input2-group2" class="form-control" placeholder="Email">
<span class="input-group-append">
<button type="button" class="btn btn-primary">Submit</button>
</span>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-prepend">
<button type="button" class="btn btn-primary"><i class="fa fa-facebook"></i></button>
</span>
<input type="text" id="input3-group2" name="input3-group2" class="form-control" placeholder="Search">
<span class="input-group-append">
<button type="button" class="btn btn-primary"><i class="fa fa-twitter"></i></button>
</span>
</div>
</div>
</div>
</form>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-header">
<strong>Dropdowns</strong>
Groups
</div>
<div class="card-body">
<form action="" method="post" class="form-horizontal">
<div class="form-group row">
<div class="col-md-12">
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action
<span class="caret"></span>
</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 role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<input type="text" id="input1-group3" name="input1-group3" class="form-control" placeholder="Username">
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<div class="input-group">
<input type="email" id="input2-group3" name="input2-group3" class="form-control" placeholder="Email">
<div class="input-group-append">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<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 role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-primary">Action</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="caret"></span>
</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 role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<input type="text" id="input3-group3" name="input3-group3" class="form-control" placeholder="..">
<div class="input-group-append">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<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 role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
Use the grid for big devices!
<small>
<code>.col-lg-*</code>
<code>.col-md-*</code>
<code>.col-sm-*</code>
</small>
</div>
<div class="card-body">
<form action="" method="post" class="form-horizontal">
<div class="form-group row">
<div class="col-md-8">
<input type="text" class="form-control" placeholder=".col-md-8">
</div>
<div class="col-md-4">
<input type="text" class="form-control" placeholder=".col-md-4">
</div>
</div>
<div class="form-group row">
<div class="col-md-7">
<input type="text" class="form-control" placeholder=".col-md-7">
</div>
<div class="col-md-5">
<input type="text" class="form-control" placeholder=".col-md-5">
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<input type="text" class="form-control" placeholder=".col-md-6">
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder=".col-md-6">
</div>
</div>
<div class="form-group row">
<div class="col-md-5">
<input type="text" class="form-control" placeholder=".col-md-5">
</div>
<div class="col-md-7">
<input type="text" class="form-control" placeholder=".col-md-7">
</div>
</div>
<div class="form-group row">
<div class="col-md-4">
<input type="text" class="form-control" placeholder=".col-md-4">
</div>
<div class="col-md-8">
<input type="text" class="form-control" placeholder=".col-md-8">
</div>
</div>
</form>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-sm btn-primary">Action</button>
<button type="button" class="btn btn-sm btn-danger">Action</button>
<button type="button" class="btn btn-sm btn-warning">Action</button>
<button type="button" class="btn btn-sm btn-info">Action</button>
<button type="button" class="btn btn-sm btn-success">Action</button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
Input Grid for small devices!
<small>
<code>.col-*</code>
</small>
</div>
<div class="card-body">
<form action="" method="post" class="form-horizontal">
<div class="form-group row">
<div class="col-4">
<input type="text" class="form-control" placeholder=".col-4">
</div>
<div class="col-8">
<input type="text" class="form-control" placeholder=".col-8">
</div>
</div>
<div class="form-group row">
<div class="col-5">
<input type="text" class="form-control" placeholder=".col-5">
</div>
<div class="col-7">
<input type="text" class="form-control" placeholder=".col-7">
</div>
</div>
<div class="form-group row">
<div class="col-6">
<input type="text" class="form-control" placeholder=".col-6">
</div>
<div class="col-6">
<input type="text" class="form-control" placeholder=".col-6">
</div>
</div>
<div class="form-group row">
<div class="col-7">
<input type="text" class="form-control" placeholder=".col-5">
</div>
<div class="col-5">
<input type="text" class="form-control" placeholder=".col-5">
</div>
</div>
<div class="form-group row">
<div class="col-8">
<input type="text" class="form-control" placeholder=".col-8">
</div>
<div class="col-4">
<input type="text" class="form-control" placeholder=".col-4">
</div>
</div>
</form>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-sm btn-primary">Action</button>
<button type="button" class="btn btn-sm btn-danger">Action</button>
<button type="button" class="btn btn-sm btn-warning">Action</button>
<button type="button" class="btn btn-sm btn-info">Action</button>
<button type="button" class="btn btn-sm btn-success">Action</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-header">
Example Form
</div>
<div class="card-body">
<form action="" method="post">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Username</span>
</div>
<input type="text" id="username3" name="username3" class="form-control">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Email</span>
</div>
<input type="email" id="email3" name="email3" class="form-control">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-envelope"></i></span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Password</span>
</div>
<input type="password" id="password3" name="password3" class="form-control">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-asterisk"></i></span>
</div>
</div>
</div>
<div class="form-group form-actions">
<button type="submit" class="btn btn-sm btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-header">
Example Form
</div>
<div class="card-body">
<form action="" method="post">
<div class="form-group">
<div class="input-group">
<input type="text" id="username2" name="username2" class="form-control" placeholder="Username">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="email" id="email2" name="email2" class="form-control" placeholder="Email">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-envelope"></i></span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="password" id="password2" name="password2" class="form-control" placeholder="Password">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-asterisk"></i></span>
</div>
</div>
</div>
<div class="form-group form-actions">
<button type="submit" class="btn btn-sm btn-secondary">Submit</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-header">
Example Form
</div>
<div class="card-body">
<form action="" method="post">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
<input type="text" id="username" name="username" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-envelope"></i></span>
</div>
<input type="email" id="email" name="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-asterisk"></i></span>
</div>
<input type="password" id="password" name="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="form-group form-actions">
<button type="submit" class="btn btn-sm btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/.row-->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<i class="fa fa-edit"></i>Form Elements
<div class="card-actions">
<a href="#" class="btn-setting d-sm-down-none"><i class="icon-settings"></i></a>
<a href="#" class="btn btn-minimize" data-toggle="collapse" data-target="#collapseExample" aria-expanded="true"><i class="icon-arrow-up"></i></a>
<a href="#" class="btn-close"><i class="icon-close"></i></a>
</div>
</div>
<div class="card-body collapse show" id="collapseExample">
<form class="form-horizontal">
<div class="form-group">
<label class="col-form-label" for="prependedInput">Prepended text</label>
<div class="controls">
<div class="input-prepend input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input id="prependedInput" class="form-control" size="16" type="text">
</div>
<p class="help-block">Here's some help text</p>
</div>
</div>
<div class="form-group">
<label class="col-form-label" for="appendedInput">Appended text</label>
<div class="controls">
<div class="input-group">
<input id="appendedInput" class="form-control" size="16" type="text">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
<span class="help-block">Here's more help text</span>
</div>
</div>
<div class="form-group">
<label class="col-form-label" for="appendedPrependedInput">Append and prepend</label>
<div class="controls">
<div class="input-prepend input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input id="appendedPrependedInput" class="form-control" size="16" type="text">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-form-label" for="appendedInputButton">Append with button</label>
<div class="controls">
<div class="input-group">
<input id="appendedInputButton" class="form-control" size="16" type="text">
<span class="input-group-append">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-form-label" for="appendedInputButtons">Two-button append</label>
<div class="controls">
<div class="input-group">
<input id="appendedInputButtons" size="16" class="form-control" type="text">
<span class="input-group-append">
<button class="btn btn-secondary" type="button">Search</button>
<button class="btn btn-secondary" type="button">Options</button>
</span>
</div>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<!--/.col-->
</div>
<!--/.row-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
</div>
<!-- /.conainer-fluid -->
</main>
<aside class="aside-menu">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#timeline" role="tab"><i class="icon-list"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab"><i class="icon-speech"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab"><i class="icon-settings"></i></a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="timeline" role="tabpanel">
<div class="callout m-0 py-2 text-muted text-center bg-light text-uppercase">
<small><b>Today</b></small>
</div>
<hr class="transparent mx-3 my-0">
<div class="callout callout-warning m-0 py-3">
<div class="avatar float-right">
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div>Meeting with
<strong>Lucas</strong>
</div>
<small class="text-muted mr-3"><i class="icon-calendar"></i> 1 - 3pm</small>
<small class="text-muted"><i class="icon-location-pin"></i> Palo Alto, CA </small>
</div>
<hr class="mx-3 my-0">
<div class="callout callout-info m-0 py-3">
<div class="avatar float-right">
<img src="img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div>Skype with
<strong>Megan</strong>
</div>
<small class="text-muted mr-3"><i class="icon-calendar"></i> 4 - 5pm</small>
<small class="text-muted"><i class="icon-social-skype"></i> On-line </small>
</div>
<hr class="transparent mx-3 my-0">
<div class="callout m-0 py-2 text-muted text-center bg-light text-uppercase">
<small><b>Tomorrow</b></small>
</div>
<hr class="transparent mx-3 my-0">
<div class="callout callout-danger m-0 py-3">
<div>New UI Project -
<strong>deadline</strong>
</div>
<small class="text-muted mr-3"><i class="icon-calendar"></i> 10 - 11pm</small>
<small class="text-muted"><i class="icon-home"></i> creativeLabs HQ </small>
<div class="avatars-stack mt-2">
<div class="avatar avatar-xs">
<img src="img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
</div>
</div>
<hr class="mx-3 my-0">
<div class="callout callout-success m-0 py-3">
<div>
<strong>#10 Startups.Garden</strong> Meetup</div>
<small class="text-muted mr-3"><i class="icon-calendar"></i> 1 - 3pm</small>
<small class="text-muted"><i class="icon-location-pin"></i> Palo Alto, CA </small>
</div>
<hr class="mx-3 my-0">
<div class="callout callout-primary m-0 py-3">
<div>
<strong>Team meeting</strong>
</div>
<small class="text-muted mr-3"><i class="icon-calendar"></i> 4 - 6pm</small>
<small class="text-muted"><i class="icon-home"></i> creativeLabs HQ </small>
<div class="avatars-stack mt-2">
<div class="avatar avatar-xs">
<img src="img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
<div class="avatar avatar-xs">
<img src="img/avatars/8.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div>
</div>
</div>
<hr class="mx-3 my-0">
</div>
<div class="tab-pane p-3" id="messages" role="tabpanel">
<div class="message">
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<span class="avatar-status badge-success"></span>
</div>
</div>
<div>
<small class="text-muted">Lukasz Holeczek</small>
<small class="text-muted float-right mt-1">1:52 PM</small>
</div>
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
<hr>
<div class="message">
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<span class="avatar-status badge-success"></span>
</div>
</div>
<div>
<small class="text-muted">Lukasz Holeczek</small>
<small class="text-muted float-right mt-1">1:52 PM</small>
</div>
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
<hr>
<div class="message">
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<span class="avatar-status badge-success"></span>
</div>
</div>
<div>
<small class="text-muted">Lukasz Holeczek</small>
<small class="text-muted float-right mt-1">1:52 PM</small>
</div>
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
<hr>
<div class="message">
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<span class="avatar-status badge-success"></span>
</div>
</div>
<div>
<small class="text-muted">Lukasz Holeczek</small>
<small class="text-muted float-right mt-1">1:52 PM</small>
</div>
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
<hr>
<div class="message">
<div class="py-3 pb-5 mr-3 float-left">
<div class="avatar">
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<span class="avatar-status badge-success"></span>
</div>
</div>
<div>
<small class="text-muted">Lukasz Holeczek</small>
<small class="text-muted float-right mt-1">1:52 PM</small>
</div>
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
</div>
<div class="tab-pane p-3" id="settings" role="tabpanel">
<h6>Settings</h6>
<div class="aside-options">
<div class="clearfix mt-4">
<small><b>Option 1</b></small>
<label class="switch switch-text switch-pill switch-success switch-sm float-right">
<input type="checkbox" class="switch-input" checked="">
<span class="switch-label" data-on="On" data-off="Off"></span>
<span class="switch-handle"></span>
</label>
</div>
<div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
</div>
</div>
<div class="aside-options">
<div class="clearfix mt-3">
<small><b>Option 2</b></small>
<label class="switch switch-text switch-pill switch-success switch-sm float-right">
<input type="checkbox" class="switch-input">
<span class="switch-label" data-on="On" data-off="Off"></span>
<span class="switch-handle"></span>
</label>
</div>
<div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
</div>
</div>
<div class="aside-options">
<div class="clearfix mt-3">
<small><b>Option 3</b></small>
<label class="switch switch-text switch-pill switch-success switch-sm float-right">
<input type="checkbox" class="switch-input">
<span class="switch-label" data-on="On" data-off="Off"></span>
<span class="switch-handle"></span>
</label>
</div>
</div>
<div class="aside-options">
<div class="clearfix mt-3">
<small><b>Option 4</b></small>
<label class="switch switch-text switch-pill switch-success switch-sm float-right">
<input type="checkbox" class="switch-input" checked="">
<span class="switch-label" data-on="On" data-off="Off"></span>
<span class="switch-handle"></span>
</label>
</div>
</div>
<hr>
<h6>System Utilization</h6>
<div class="text-uppercase mb-1 mt-4">
<small><b>CPU Usage</b></small>
</div>
<div class="progress progress-xs">
<div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="text-muted">348 Processes. 1/4 Cores.</small>
<div class="text-uppercase mb-1 mt-2">
<small><b>Memory Usage</b></small>
</div>
<div class="progress progress-xs">
<div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="text-muted">11444GB/16384MB</small>
<div class="text-uppercase mb-1 mt-2">
<small><b>SSD 1 Usage</b></small>
</div>
<div class="progress progress-xs">
<div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="text-muted">243GB/256GB</small>
<div class="text-uppercase mb-1 mt-2">
<small><b>SSD 2 Usage</b></small>
</div>
<div class="progress progress-xs">
<div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="text-muted">25GB/256GB</small>
</div>
</div>
</aside>
</div>
<footer class="app-footer">
<span><a href="http://coreui.io">CoreUI</a> © 2018 creativeLabs.</span>
<span class="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
</footer>
<!-- Bootstrap and necessary plugins -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/pace-progress/pace.min.js"></script>
<!-- Plugins and scripts required by all views -->
<script src="node_modules/chart.js/dist/Chart.min.js"></script>
<!-- CoreUI main scripts -->
<script src="js/app.js"></script>
</body>
</html>