GitBucket
<!DOCTYPE html>
<html lang="en">
<head>
@@include("partials/title-meta.html", {"title": "Components"})
@@include("partials/head-css.html")
</head>
<body>
<!-- Begin page -->
<div id="wrapper">
@@include('./partials/topbar.html', {"pagetitle": "Components"})
@@include('./partials/left-sidebar.html')
<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
<div class="content-page">
<div class="content">
<!-- Start Content-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="card-box">
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<h4 class="header-title mt-0">Dropdowns</h4>
<div class="row">
<div class="col-xl-6">
<h5 class="mt-4">Examples</h5>
<div class="">
<div class="btn-group mt-1">
<button type="button" class="btn btn-secondary dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdown <i class="mdi mdi-chevron-down"></i></button>
<div class="dropdown-menu">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<div class="btn-group mt-1">
<button type="button" class="btn btn-info dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdown <i class="mdi mdi-chevron-down"></i></button>
<div class="dropdown-menu">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<div class="btn-group dropdown mt-1">
<button type="button" class="btn btn-success waves-effect waves-light">Dropddown</button>
<button type="button" class="btn btn-success dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-chevron-down"></i></button>
<div class="dropdown-menu">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<div class="btn-group dropdown mt-1">
<button type="button" class="btn btn-primary waves-effect waves-light">Dropddown</button>
<button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-chevron-down"></i></button>
<div class="dropdown-menu">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<h5 class="mt-4">Dropup</h5>
<div class="btn-group dropup mt-1">
<button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdup <i class="mdi mdi-chevron-up"></i></button>
<div class="dropdown-menu">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<div class="btn-group dropup mt-1">
<button type="button" class="btn btn-warning dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdup <i class="mdi mdi-chevron-up"></i></button>
<div class="dropdown-menu">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<div class="btn-group dropup mt-1">
<button type="button" class="btn btn-success dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdup<i class="mdi mdi-chevron-up"></i></button>
<div class="dropdown-menu">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<div class="btn-group dropup mt-1">
<button type="button" class="btn btn-secondary dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdup <i class="mdi mdi-chevron-up"></i></button>
<div class="dropdown-menu">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
</div>
</div>
<!-- end row -->
</div>
</div><!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-sm-12">
<div class="card-box">
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<h4 class="header-title mt-0 mb-3">Tabs</h4>
<div class="row">
<div class="col-xl-6">
<h5 class="mb-3">Default Tabs</h5>
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#home1" data-toggle="tab" aria-expanded="false" class="nav-link active">
<span class="d-block d-sm-none"><i class="fas fa-home"></i></span>
<span class="d-none d-sm-block">Home</span>
</a>
</li>
<li class="nav-item">
<a href="#profile1" data-toggle="tab" aria-expanded="true" class="nav-link">
<span class="d-block d-sm-none"><i class="far fa-user"></i></span>
<span class="d-none d-sm-block">Profile</span>
</a>
</li>
<li class="nav-item">
<a href="#messages1" data-toggle="tab" aria-expanded="false" class="nav-link">
<span class="d-block d-sm-none"><i class="far fa-envelope"></i></span>
<span class="d-none d-sm-block">Messages</span>
</a>
</li>
<li class="nav-item">
<a href="#settings1" data-toggle="tab" aria-expanded="false" class="nav-link">
<span class="d-block d-sm-none"><i class="fas fa-cog"></i></span>
<span class="d-none d-sm-block">Settings</span>
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="home1">
<p class="mb-0">Raw denim you probably haven't heard
of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor, williamsburg carles
vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher
synth. Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis
cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="profile1">
<p class="mb-0">Food truck fixie locavore,
accusamus mcsweeney's marfa nulla single-origin coffee squid.
Exercitation +1 labore velit, blog sartorial PBR leggings next level
wes anderson artisan four loko farm-to-table craft beer twee. Qui
photo booth letterpress, commodo enim craft beer mlkshk aliquip jean
shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda
labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
yr, vero magna velit sapiente labore stumptown. Vegan fanny pack
odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY
ethical culpa terry richardson biodiesel. Art party scenester
stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed
echo park.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="messages1">
<p class="mb-0">Etsy mixtape wayfarers, ethical
wes anderson tofu before they sold out mcsweeney's organic lomo
retro fanny pack lo-fi farm-to-table readymade. Messenger bag
gentrify pitchfork tattooed craft beer, iphone skateboard locavore
carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy
irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg
banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy
retro mlkshk vice blog. Scenester cred you probably haven't heard of
them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu
synth chambray yr.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="settings1">
<p class="mb-0">Trust fund seitan letterpress,
keytar raw denim keffiyeh etsy art party before they sold out master
cleanse gluten-free squid scenester freegan cosby sweater. Fanny
pack portland seitan DIY, art party locavore wolf cliche high life
echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before
they sold out farm-to-table VHS viral locavore cosby sweater. Lomo
wolf viral, mustache readymade thundercats keffiyeh craft beer marfa
ethical. Wolf salvia freegan, sartorial keffiyeh echo park
vegan.</p>
</div>
</div>
</div><!-- end col -->
<div class="col-xl-6">
<h5 class="mb-3">Tabs Justified</h5>
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">
<a href="#home2" data-toggle="tab" aria-expanded="false" class="nav-link active">
<span class="d-block d-sm-none"><i class="fas fa-home"></i></span>
<span class="d-none d-sm-block">Home</span>
</a>
</li>
<li class="nav-item">
<a href="#profile2" data-toggle="tab" aria-expanded="true" class="nav-link">
<span class="d-block d-sm-none"><i class="far fa-user"></i></span>
<span class="d-none d-sm-block">Profile</span>
</a>
</li>
<li class="nav-item">
<a href="#messages2" data-toggle="tab" aria-expanded="false" class="nav-link">
<span class="d-block d-sm-none"><i class="far fa-envelope"></i></span>
<span class="d-none d-sm-block">Messages</span>
</a>
</li>
<li class="nav-item">
<a href="#settings2" data-toggle="tab" aria-expanded="false" class="nav-link">
<span class="d-block d-sm-none"><i class="fas fa-cog"></i></span>
<span class="d-none d-sm-block">Settings</span>
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="home2">
<p class="mb-0">Raw denim you probably haven't heard
of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor, williamsburg carles
vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher
synth. Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis
cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="profile2">
<p class="mb-0">Food truck fixie locavore,
accusamus mcsweeney's marfa nulla single-origin coffee squid.
Exercitation +1 labore velit, blog sartorial PBR leggings next level
wes anderson artisan four loko farm-to-table craft beer twee. Qui
photo booth letterpress, commodo enim craft beer mlkshk aliquip jean
shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda
labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
yr, vero magna velit sapiente labore stumptown. Vegan fanny pack
odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY
ethical culpa terry richardson biodiesel. Art party scenester
stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed
echo park.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="messages2">
<p class="mb-0">Etsy mixtape wayfarers, ethical
wes anderson tofu before they sold out mcsweeney's organic lomo
retro fanny pack lo-fi farm-to-table readymade. Messenger bag
gentrify pitchfork tattooed craft beer, iphone skateboard locavore
carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy
irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg
banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy
retro mlkshk vice blog. Scenester cred you probably haven't heard of
them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu
synth chambray yr.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="settings2">
<p class="mb-0">Trust fund seitan letterpress,
keytar raw denim keffiyeh etsy art party before they sold out master
cleanse gluten-free squid scenester freegan cosby sweater. Fanny
pack portland seitan DIY, art party locavore wolf cliche high life
echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before
they sold out farm-to-table VHS viral locavore cosby sweater. Lomo
wolf viral, mustache readymade thundercats keffiyeh craft beer marfa
ethical. Wolf salvia freegan, sartorial keffiyeh echo park
vegan.</p>
</div>
</div>
</div><!-- end col -->
</div>
<!-- end row -->
</div>
</div><!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-sm-12">
<div class="card-box">
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<h4 class="header-title mt-0 mb-3">Accordions</h4>
<div class="row">
<div class="col-xl-6">
<div class="pb-3">
<p><a class="btn btn-primary waves-effect waves-light mr-1" role="button" data-toggle="collapse"
href="#collapseExample" aria-expanded="false"
aria-controls="collapseExample"> Link with href </a>
<button class="btn btn-primary waves-effect waves-light" type="button" data-toggle="collapse"
data-target="#collapseExample" aria-expanded="false"
aria-controls="collapseExample"> Button with data-target
</button>
</p>
<div class="collapse show" id="collapseExample">
<div class="card-box"> Anim pariatur cliche reprehenderit, enim eiusmod
high life accusamus terry richardson ad squid. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident.
</div>
</div>
</div>
</div><!-- end col -->
<div class="col-xl-6">
<div id="accordion" class="mb-3">
<div class="card mb-1">
<div class="card-header" id="headingOne">
<h5 class="m-0">
<a class="text-dark" data-toggle="collapse" href="#collapseOne" aria-expanded="true">
<i class="mdi mdi-help-circle mr-1 text-primary"></i>
What is Vakal text here?
</a>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil
anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card mb-1">
<div class="card-header" id="headingTwo">
<h5 class="m-0">
<a class="text-dark" data-toggle="collapse" href="#collapseTwo" aria-expanded="false">
<i class="mdi mdi-help-circle mr-1 text-primary"></i>
Why use Vakal text here?
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil
anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card mb-1">
<div class="card-header" id="headingThree">
<h5 class="m-0">
<a class="text-dark" data-toggle="collapse" href="#collapseThree" aria-expanded="false">
<i class="mdi mdi-help-circle mr-1 text-primary"></i>
How many variations exist?
</a>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil
anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card mb-1">
<div class="card-header" id="headingFour">
<h5 class="m-0">
<a class="text-dark" data-toggle="collapse" href="#collapseFour" aria-expanded="false">
<i class="mdi mdi-help-circle mr-1 text-primary"></i>
What is Vakal text here?
</a>
</h5>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="collapseFour" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil
anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div> <!-- end #accordions-->
</div><!-- end col -->
</div><!-- end row -->
</div>
</div><!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-sm-12">
<div class="card-box">
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<h4 class="header-title mt-0 mb-4">Progress Bars</h4>
<div class="row">
<div class="col-md-5">
<h5 class="mt-0">Colors examples</h5>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
<span class="sr-only">48% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%;">
<span class="sr-only">82% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
<span class="sr-only">95% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-pink" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
<span class="sr-only">48% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-purple" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%;">
<span class="sr-only">82% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-dark" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
<span class="sr-only">95% Complete</span>
</div>
</div>
</div><!-- end col -->
<div class="col-md-5 offset-md-1">
<h5 class="m-t-0">Custom Examples</h5>
<div class="progress progress-bar-alt-primary">
<div class="progress-bar bg-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-bar-alt-success">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
<span class="sr-only">48% Complete</span>
</div>
</div>
<div class="progress progress-bar-alt-info">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%;">
<span class="sr-only">82% Complete</span>
</div>
</div>
<div class="progress progress-bar-alt-warning">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
<span class="sr-only">95% Complete</span>
</div>
</div>
<div class="progress progress-bar-alt-danger">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-bar-alt-pink">
<div class="progress-bar bg-pink" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
<span class="sr-only">48% Complete</span>
</div>
</div>
<div class="progress progress-bar-alt-purple">
<div class="progress-bar bg-purple" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%;">
<span class="sr-only">82% Complete</span>
</div>
</div>
<div class="progress progress-bar-alt-dark">
<div class="progress-bar bg-dark" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
<span class="sr-only">95% Complete</span>
</div>
</div>
</div><!-- end col -->
</div>
<!-- end row -->
<h5 class="mt-3">Examples</h5>
<div class="row">
<div class="col-md-5">
<div class="progress">
<div class="progress-bar bg-primary progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-pink progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
<span class="sr-only">48% Complete</span>
</div>
</div>
<div class="progress progress-sm">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100" style="width: 89%;">
<span class="sr-only">89% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-dark" role="progressbar" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100" style="width: 77%;">
<span class="sr-only">77% Complete</span>
</div>
</div>
</div><!-- end col -->
<div class="col-md-5 offset-md-1">
<div class="progress progress-md">
<div class="progress-bar bg-success progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
<span class="sr-only">45% Complete</span>
</div>
</div>
<div class="progress progress-lg">
<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100" style="width: 67%;">
<span class="sr-only">67% Complete</span>
</div>
</div>
<div class="progress progress-md">
<div class="progress-bar bg-pink" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;">
85%
</div>
</div>
<div class="progress">
<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;" class="progress-bar bg-success progress-bar-striped"></div>
<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;" class="progress-bar bg-info"></div>
<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 15%;" class="progress-bar bg-warning progress-bar-striped progress-bar-animated"></div>
<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;" class="progress-bar bg-danger progress-bar-striped progress-bar-animated"></div>
</div>
</div><!-- end col -->
</div><!-- end row -->
</div>
</div><!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-sm-12">
<div class="card-box">
<div class="row">
<!-- Popovers -->
<div class="col-md-6">
<h4 class="m-t-0 header-title"><b>Popovers</b></h4>
<p class="text-muted m-b-30 font-13">
Add small overlays of content, like those on the iPad, to any element for housing secondary information.
</p>
<div class="button-list">
<button type="button" class="btn btn-secondary" data-container="body" title="" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" title="" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" title="" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" title="" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="Popover title">
Popover on left
</button>
<button tabindex="0" class="btn btn-secondary" data-toggle="popover" data-trigger="focus" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Dismissible popover">
Dismissible popover
</button>
</div>
</div>
<!-- end col -->
<!-- Tooltips -->
<div class="col-md-6">
<h4 class="m-t-0 header-title"><b>Tooltips</b></h4>
<p class="text-muted m-b-30 font-13">
Four options are available: top, right, bottom, and left aligned.
</p>
<div class="button-list">
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Tooltip on right</button>
</div>
</div>
<!-- end col -->
</div> <!-- end row -->
</div> <!-- end card-box -->
</div> <!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-sm-12">
<div class="card-box">
<div class="row">
<!-- Labels -->
<div class="col-md-6">
<h4 class="m-t-0 header-title"><b>Labels</b></h4>
<p class="text-muted font-13">
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
</p>
<div class="">
<span class="badge badge-primary">15</span>
<span class="badge badge-success">0</span>
<span class="badge badge-info">21</span>
<span class="badge badge-dark">3</span>
<span class="badge badge-warning">35</span>
<span class="badge badge-danger">32</span>
<span class="badge badge-purple">51</span>
<span class="badge badge-pink">77</span>
</div>
</div>
<!-- end col -->
<!-- Badge -->
<div class="col-md-6">
<h4 class="m-t-0 header-title"><b>Pill Badge</b></h4>
<p class="text-muted font-13">
Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding)
</p>
<div class="">
<span class="badge badge-primary badge-pill">15</span>
<span class="badge badge-success badge-pill">0</span>
<span class="badge badge-info badge-pill">21</span>
<span class="badge badge-dark badge-pill">3</span>
<span class="badge badge-warning badge-pill">35</span>
<span class="badge badge-danger badge-pill">32</span>
<span class="badge badge-purple badge-pill">51</span>
<span class="badge badge-pink badge-pill">77</span>
</div>
</div>
<!-- end col -->
</div> <!-- end row -->
</div> <!-- end card-box -->
</div> <!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-sm-12">
<div class="card-box">
<div class="row">
<!-- Standard Alert -->
<div class="col-md-6">
<h4 class="mt-0 header-title"><b>Standard Alert</b></h4>
<p class="text-muted font-13 mb-3">
Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.
</p>
<div class="alert alert-success">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<div class="alert alert-success fade show mb-0">
<h4 class="alert-heading">Big one!</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
</p>
<p class="mb-0 pt-1">
<button type="button" class="btn btn-success waves-effect waves-light mr-1">
Wanna do this
</button>
<button type="button" class="btn btn-light waves-effect">
Or do this
</button>
</p>
</div>
</div>
<!-- end col -Standard Alert -->
<div class="col-md-6">
<h4 class="m-t-0 header-title"><b>Dismissable Alert</b></h4>
<p class="text-muted mb-4 font-13">
Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.
</p>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
</div>
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
</div>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
</div>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
</div>
<div class="alert alert-info fade show mb-0">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4 class="alert-heading">Big one!</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p class="mb-0 pt-1">
<button type="button" class="btn btn-info waves-effect waves-light mr-1">Wanna do this</button>
<button type="button" class="btn btn-light waves-effect">Or do this</button>
</p>
</div>
</div><!-- end col -->
</div><!-- end row -->
</div>
</div><!-- end col -->
</div>
<!-- End row -->
<div class="row">
<div class="col-sm-12">
<div class="card-box">
<div class="row">
<div class="col-md-6">
<h4 class="header-title">Pagination</h4>
<p class="text-muted font-13">
Provide pagination links for your site or app with the multi-page pagination component.
</p>
<p class="mb-1 font-weight-medium">Default Pagination</p>
<p class="text-muted font-13">
Simple pagination inspired by Rdio, great for apps and search results.
</p>
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<p class="mb-1 font-weight-medium">Split Pagination</p>
<p class="text-muted font-13">
Links are split to each other by adding a class of <code>
.pagination-split</code>
</p>
<nav>
<ul class="pagination pagination-split">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<p class="mb-1 font-weight-medium">Sizing</p>
<p class="text-muted font-13">
Add <code>
.pagination-lg</code>
or <code>
.pagination-sm</code>
for additional sizes.
</p>
<nav>
<ul class="pagination pagination-lg m-b-0">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<p class="mb-1 font-weight-medium">Sizing</p>
<p class="text-muted font-13">
Change the alignment of pagination components with flexbox utilities.
</p>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-6">
<h4 class="header-title">Breadcrumb</h4>
<p class="text-muted font-13">
Indicate the current page’s location within a navigational hierarchy.
</p>
<ol class="breadcrumb">
<li class="breadcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Library</li>
</ol>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
</div>
</div>
<!-- end row -->
</div>
</div>
</div>
<!-- End row -->
<div class="row">
<div class="col-sm-12">
<div class="card m-b-20">
<div class="card-body">
<div class="row">
<!-- Badges -->
<div class="col-lg-6">
<h4 class="m-t-0 header-title"><b>Border spinner</b></h4>
<p class="text-muted font-13">
Use the border spinners for a lightweight loading indicator.
</p>
<div class="">
<div class="spinner-border text-custom m-2" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-primary m-2" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary m-2" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success m-2" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger m-2" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning m-2" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info m-2" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-pink m-2" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-purple m-2" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<!-- end col -->
<!-- Badge -->
<div class="col-lg-6">
<h4 class="m-t-0 header-title"><b>Growing spinner</b></h4>
<p class="text-muted font-13">If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!</p>
<div class="">
<div class="spinner-grow text-custom m-2" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-primary m-2" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary m-2" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success m-2" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger m-2" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning m-2" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info m-2" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-pink m-2" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-purple m-2" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<!-- end col -->
</div> <!-- end row -->
</div>
</div><!-- end card -->
</div> <!-- end col -->
</div>
<!-- end row -->
</div> <!-- container-fluid -->
</div> <!-- content -->
@@include('./partials/footer.html')
</div>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
</div>
<!-- END wrapper -->
@@include('./partials/right-sidebar.html')
<!-- Vendor js -->
<script src="assets/js/vendor.min.js"></script>
<!-- App js -->
<script src="assets/js/app.min.js"></script>
</body>
</html>