<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--Main layout-->
<main class="p-t-1">
<div class="container text-xs-center">
<h3>Material Design for Bootstrap 4 or 3</h3>
<br>
<p class="lead text-xs-center">This presentation shows a small part of components and features available in Material Design for Bootstrap. <strong>To see all of them have a look at our full demo.</strong></p>
<br>
<h4>Full demo & download</h4>
<br>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-12">
<!--Featured image-->
<div class="view overlay hm-white-slight m-b-2">
<img src="http://mdbootstrap.com/images/about/intro.jpg" class="img-fluid">
<a target="_blank" href="http://mdbootstrap.com/material-design-for-bootstrap/">
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<br>
<a target="_blank" href="http://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-primary btn-lg"><i class="fa fa-download left"></i> Free download</a>
</div>
<!--/First column-->
</div>
<!--/First row-->
<hr>
<div style="height: 40px"></div>
<!--Section: Buttons-->
<section class="section">
<!--Section heading-->
<h1 class="section-heading">Buttons</h1>
<h5>Basic buttons</h5>
<br>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-default">Default</button>
<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary">Secondary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<div style="height: 40px"></div>
<h5>Additional buttons</h5>
<br>
<!--Elegant-->
<button type="button" class="btn btn-elegant">Elegant</button>
<!--Unique-->
<button type="button" class="btn btn-unique">Unique</button>
<!--Pink-->
<button type="button" class="btn btn-pink">Pink</button>
<!--Purple-->
<button type="button" class="btn btn-purple">Purple</button>
<!--Deep-purple-->
<button type="button" class="btn btn-deep-purple">Deep-purple</button>
<!--Indigo-->
<button type="button" class="btn btn-indigo">Indigo</button>
<!--Cyan-->
<button type="button" class="btn btn-cyan">Cyan</button>
<!--Light-green-->
<button type="button" class="btn btn-light-green">Light-green</button>
<!--Lime-->
<button type="button" class="btn btn-lime">Lime</button>
<!--Yellow-->
<button type="button" class="btn btn-yellow">Yellow</button>
<!--Amber-->
<button type="button" class="btn btn-amber">Amber</button>
<!--Orange-->
<button type="button" class="btn btn-orange">Orange</button>
<!--Deep-orange-->
<button type="button" class="btn btn-deep-orange">Deep-orange</button>
<!--Brown-->
<button type="button" class="btn btn-brown">Brown</button>
<!--Blue-grey-->
<button type="button" class="btn btn-blue-grey">Blue-grey</button>
<!--MDB-->
<button type="button" class="btn btn-mdb">MDB</button>
<!--Dark-green-->
<button type="button" class="btn btn-dark-green">Dark-green</button>
<div style="height: 40px"></div>
<h5>Outline buttons </h5>
<br>
<button type="button" class="btn btn-primary-outline waves-effect">Primary</button>
<button type="button" class="btn btn-default-outline waves-effect">Default</button>
<button type="button" class="btn btn-secondary-outline waves-effect">Secondary</button>
<button type="button" class="btn btn-success-outline waves-effect">Success</button>
<button type="button" class="btn btn-info-outline waves-effect">Info</button>
<button type="button" class="btn btn-warning-outline waves-effect">Warning</button>
<button type="button" class="btn btn-danger-outline waves-effect">Danger</button>
<div style="height: 40px"></div>
<h5>Large and small buttons </h5>
<br>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary btn-lg">Primary</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-default btn-lg">Default</button>
<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary btn-lg">Secondary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success btn-sm">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info btn-sm">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning btn-sm">Warning</button>
<div style="height: 40px"></div>
<h5>Checkbox and Radio buttons </h5>
<br>
<div class="btn-group" data-toggle="buttons"><label class="btn btn-primary active"><input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)</label>
<label class="btn btn-primary"><input type="checkbox" autocomplete="off"> Checkbox 2</label>
<label class="btn btn-primary"><input type="checkbox" autocomplete="off"> Checkbox 3</label>
</div>
<div class="btn-group" data-toggle="buttons"><label class="btn btn-primary active"><input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)</label>
<label class="btn btn-primary"><input type="radio" name="options" id="option2" autocomplete="off"> Radio 2</label>
<label class="btn btn-primary"><input type="radio" name="options" id="option3" autocomplete="off"> Radio 3</label>
</div>
</section>
<!--/Section: Buttons-->
<hr class="between-sections">
<!--Section: Cards-->
<section>
<!--Section heading-->
<h1 class="section-heading">Cards</h1>
<div style="height: 50px"></div>
<h5>Classic cards</h5>
<br>
<div class="row">
<div class="col-lg-4 col-md-6">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="http://mdbootstrap.com/images/regular/people/img%20(86).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card with waves effect</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-indigo">Button</a>
</div>
</div>
<!--/.Card-->
</div>
<div class="col-lg-4 col-md-6">
<!--Card-->
<div class="card">
<!--Card image-->
<!--Card image-->
<div class="view overlay hm-white-slight">
<img class="img-fluid" src="http://mdbootstrap.com/images/regular/people/img%20(80).jpg" alt="Card image cap">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Classic card</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<!--/.Card-->
</div>
<div class="col-lg-4 col-md-6">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="http://mdbootstrap.com/images/regular/people/img%20(88).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card with waves effect</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-pink">Button</a>
</div>
</div>
<!--/.Card-->
</div>
<!--/.Card-->
</div>
<div style="height: 40px"></div>
<h5>Card groups </h5>
<br>
<div class="row" style="margin-bottom:2rem;">
<div class="col-md-12">
<!-- Card group -->
<div class="card-group">
<div class="card">
<img class="img-fluid" src="http://mdbootstrap.com/images/regular/nature/img%20(78).jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="img-fluid" src="http://mdbootstrap.com/images/regular/people/img%20(79).jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="img-fluid" src="http://mdbootstrap.com/images/regular/nature/img%20(81).jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<a class="btn btn-cyan waves-effect waves-light">Button</a>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<!--/ Card group -->
</div>
</div>
</section>
<!--/Section: Cards-->
<hr>
<!--Section: Dropdowns-->
<section>
<div style="height: 40px"></div>
<!--Section heading-->
<h1 class="section-heading">Dropdown and Select</h1>
<div style="height: 40px"></div>
<h5>Dropdown </h5>
<br>
<div class="row">
<div class="col-md-12">
<div class="flex-center">
<!-- Dropdown -->
<div class="btn-group" style="padding:5px;">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Basic dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!--/ Dropdown -->
<!-- Split button -->
<div class="btn-group" style="padding:5px;">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!--/ Split button -->
<!-- Dropup -->
<div class="btn-group dropup" style="padding:5px;">
<button type="button" class="btn btn-purple">Dropup</button>
<button type="button" class="btn btn-purple dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!--/ Dropup -->
<!-- Right side -->
<div class="btn-group" style="padding:5px;">
<button class="btn btn-amber dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right side
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu2">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!--/ Right side -->
<!-- Disabled link -->
<div class="btn-group" style="padding:5px;">
<button class="btn btn-lime dropdown-toggle" type="button" id="dropdownMenu5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Disabled
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu5">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
</div>
<!--/ Disabled link -->
</div>
</div>
</div>
<div style="height: 40px"></div>
<h5>Large and small dropdowns </h5>
<br>
<div class="row" style="margin-bottom:1.7rem;">
<div class="col-md-12">
<!-- Large button group -->
<div class="btn-group" style="padding:5px;">
<button class="btn btn-pink btn-lg dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu3">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!--/ Large button group -->
<!-- Large button group -->
<div class="btn-group" style="padding:5px;">
<button class="btn btn-cyan btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!--/ Large button group -->
<!-- Large button group -->
<div class="btn-group" style="padding:5px;">
<button class="btn btn-blue-grey btn-lg dropdown-toggle" type="button" id="dropdownMenu5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu5">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
</div>
<!--/ Large button group -->
<!-- Small button group -->
<div class="btn-group" style="padding:5px;">
<button class="btn btn-light-green btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!--/ Small button group -->
<!-- Small button group -->
<div class="btn-group" style="padding:5px;">
<button class="btn btn-indigo btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!--/ Small button group -->
<!-- Small button group -->
<div class="btn-group" style="padding:5px;">
<button class="btn btn-yellow btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!--/ Small button group -->
</div>
</div>
</section>
<!--/Section: Dropdowns-->
<hr>
<!--Section: Inputs-->
<section class="section">
<div style="height: 10px"></div>
<!--Section heading-->
<h1 class="section-heading">Inputs</h1>
<div style="height: 20px"></div>
<h5>Input fields </h5>
<div style="height: 60px"></div>
<div class="row">
<div class="col-md-6">
<div class="md-form">
<input type="text" id="form1" class="form-control">
<label for="form1" class="">Example label</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form">
<input placeholder="Placeholder" type="text" id="form5" class="form-control">
<label for="form5">Example label</label>
</div>
</div>
</div>
<!-- /.Live preview-->
<div style="height: 40px"></div>
<!-- Live preview-->
<div class="row">
<div class="col-md-6">
<div class="md-form">
<input value="John Doe" type="text" id="form6" class="form-control">
<label class="active" for="form6">Example label</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form">
<input type="text" id="form11" class="form-control" disabled>
<label for="form11" class="disabled">Disabled</label>
</div>
</div>
</div>
<!-- /.Live preview-->
<div style="height: 40px"></div>
<!-- Live preview-->
<div class="row text-xs-left">
<div class="col-md-6">
<div class="md-form">
<i class="fa fa-tag prefix"></i>
<input type="text" id="form2" class="form-control">
<label for="form2">Example label</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form">
<i class="fa fa-user prefix"></i>
<input type="text" id="form3" class="form-control">
<label for="form3">Example label</label>
</div>
</div>
</div>
<!-- /.Live preview-->
<div style="height: 40px"></div>
<!-- Live preview-->
<div class="row text-xs-left">
<div class="col-md-12">
<h5 class="text-xs-center">Error or Success Messages </h5>
</div>
<br>
<br>
<br>
<div class="col-md-6">
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input type="email" id="form9" class="form-control validate">
<label for="form9" data-error="wrong" data-success="right">Type your email</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form">
<i class="fa fa-lock prefix"></i>
<input type="password" id="form10" class="form-control validate">
<label for="form10" data-error="wrong" data-success="right">Type your password</label>
</div>
</div>
</div>
<!-- /.Live preview-->
<div style="height: 40px"></div>
<!--Image-->
<h5 class="text-xs-center">Textarea </h5>
<div style="height: 40px"></div>
<!-- Live preview-->
<div class="row text-xs-left">
<div class="col-md-6">
<div class="md-form">
<textarea type="text" id="form7" class="md-textarea"></textarea>
<label for="form7">Basic textarea</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form">
<i class="fa fa-pencil prefix"></i>
<textarea type="text" id="form8" class="md-textarea"></textarea>
<label for="form8">Icon Prefix</label>
</div>
</div>
</div>
<!-- /.Live preview-->
</section>
<!--/Section: Inputs-->
<hr class="between-sections">
<!--Section: Carousels-->
<section class="section">
<!--Section heading-->
<h1 class="section-heading">Carousels</h1>
<div style="height: 10px"></div>
<h5>Classic carousel </h5>
<br>
<!--Carousel Wrapper-->
<div id="carousel-example-1z" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-1z" data-slide-to="1"></li>
<li data-target="#carousel-example-1z" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<img src="http://mdbootstrap.com/images/slides/slide%20(34).jpg" alt="First slide">
</div>
<!--/First slide-->
<!--Second slide-->
<div class="carousel-item">
<img src="http://mdbootstrap.com/images/slides/slide%20(35).jpg" alt="Second slide">
</div>
<!--/Second slide-->
<!--Third slide-->
<div class="carousel-item">
<img src="http://mdbootstrap.com/images/slides/slide%20(36).jpg" alt="Third slide">
</div>
<!--/Third slide-->
</div>
<!--/.Slides-->
<!--Controls-->
<a class="left carousel-control" href="#carousel-example-1z" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-1z" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->
<div style="height: 40px"></div>
<h5>Classic carousel with captions </h5>
<br>
<!--Carousel Wrapper-->
<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-2" data-slide-to="1"></li>
<li data-target="#carousel-example-2" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="http://mdbootstrap.com/images/slides/slide%20(42).jpg" alt="First slide">
<div class="carousel-caption">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="http://mdbootstrap.com/images/slides/slide%20(43).jpg" alt="Second slide">
<div class="carousel-caption">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="http://mdbootstrap.com/images/slides/slide%20(44).jpg" alt="Third slide">
<div class="carousel-caption">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="left carousel-control" href="#carousel-example-2" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-2" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->
<div style="height: 40px"></div>
<h5>Video Carousel </h5>
<br>
<!--Carousel Wrapper-->
<div id="video-carousel-example" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#video-carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#video-carousel-example" data-slide-to="1"></li>
<li data-target="#video-carousel-example" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<video class="video-fluid" autoplay loop>
<source src="http://mdbootstrap.com/images/video/Strum-Away.mp4" type="video/mp4" />
</video>
</div>
<div class="carousel-item">
<video class="video-fluid" autoplay loop>
<source src="http://mdbootstrap.com/images/video/Beach-Ball.mp4" type="video/mp4" />
</video>
</div>
<div class="carousel-item">
<video class="video-fluid" autoplay loop>
<source src="http://mdbootstrap.com/images/video/Nature-Sunset.mp4" type="video/mp4" />
</video>
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="left carousel-control" href="#video-carousel-example" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#video-carousel-example" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->
</section>
<!--/Section: Carousels-->
<hr class="between-sections">
<!-- Section: Panels -->
<section>
<!--Section heading-->
<h1 class="section-heading">Panels</h1>
<div style="height: 40px"></div>
<h5>Basic, Header and Footer</h5>
<br>
<div class="row">
<div class="col-md-6">
<!--Panel-->
<div class="card card-block text-xs-left">
<h4 class="card-title">Panel title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link text-muted">Card link</a>
<a href="#" class="card-link text-muted">Another link</a>
</div>
<!--/.Panel-->
</div>
<div class="col-md-6">
<!--Panel-->
<div class="card">
<div class="card-header danger-color-dark white-text">
Featured
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a class="btn btn-danger">Go somewhere</a>
</div>
</div>
<!--/.Panel-->
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<!--Panel-->
<div class="card text-xs-center">
<div class="card-header default-color-dark white-text">
Featured
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a class="btn btn-default">Go somewhere</a>
</div>
<div class="card-footer text-muted default-color-dark white-text">
<p>2 days ago</p>
</div>
</div>
<!--/.Panel-->
</div>
<div class="col-md-6">
<!--Panel-->
<div class="card">
<h3 class="card-header primary-color white-text">Featured</h3>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a class="btn btn-primary">Go somewhere</a>
</div>
</div>
<!--/.Panel-->
</div>
</div>
<br>
<h5>Background variants</h5>
<br>
<div class="row">
<div class="col-md-6">
<!--Card Primary-->
<div class="card card-primary text-xs-center z-depth-2 m-b-2">
<div class="card-block">
<p class="white-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>
</div>
<!--/.Card Primary-->
<!--Card Danger-->
<div class="card card-danger text-xs-center z-depth-2 m-b-2">
<div class="card-block">
<p class="white-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>
</div>
<!--/.Card Danger-->
<!--Card Success-->
<div class="card card-success text-xs-center z-depth-2 m-b-2">
<div class="card-block">
<p class="white-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>
</div>
<!--/.Card Success-->
</div>
<div class="col-md-6">
<!--Card Warning-->
<div class="card card-warning text-xs-center z-depth-2 m-b-2">
<div class="card-block">
<p class="white-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>
</div>
<!--/.Card Warning-->
<!--Card Info-->
<div class="card card-info text-xs-center z-depth-2 m-b-2">
<div class="card-block">
<p class="white-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>
</div>
<!--/.Card Info-->
<!--Card Default-->
<div class="card default-color text-xs-center z-depth-2 m-b-2">
<div class="card-block">
<p class="white-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>
</div>
<!--/.Card Default-->
</div>
</div>
</section>
<!--/ Section: Panels -->
<hr class="between-sections">
<section>
<!--Section heading-->
<h1 class="section-heading">Typography</h1>
<div style="height: 40px"></div>
<h5>Headings</h5>
<br>
<div class="row">
<div class="col-md-12">
<h1 class="text-xs-left"><span style="font-size: 1rem; margin-right: 5rem;">Header 1</span>h1. Material Design for Bootstrap </h1>
<br>
<h2 class="text-xs-left"><span style="font-size: 1rem; margin-right: 5rem;">Header 2</span>h2. Material Design for Bootstrap </h2>
<br>
<h3 class="text-xs-left"><span style="font-size: 1rem; margin-right: 5rem;">Header 3</span>h3. Material Design for Bootstrap </h3>
<br>
<h4 class="text-xs-left"><span style="font-size: 1rem; margin-right: 5rem;">Header 4</span>h4. Material Design for Bootstrap </h4>
<br>
<h5 class="text-xs-left"><span style="font-size: 1rem; margin-right: 5rem;">Header 5</span>h5. Material Design for Bootstrap </h5>
<br>
<h6 class="text-xs-left"><span style="font-size: 1rem; margin-right: 5rem;">Header 6</span>h6. Material Design for Bootstrap </h6>
<br>
<div style="height: 40px"></div>
<h5>Responsive headings</h5>
<br>
<p class="text-xs-left">By adding an appropriate class you can make your heading responsive. Thanks to that it will looks good on all screen sizes.</p>
<p class="text-xs-left red-text">Resize your browser windows to see the effect</p>
<br>
<h1 class="h1-responsive text-xs-left"><span style="font-size: 1rem; margin-right: 5rem;">Header 1</span>h1. heading</h1>
<br>
<h2 class="h2-responsive text-xs-left"><span style="font-size: 1rem; margin-right: 5rem;">Header 2</span>h2. heading</h2>
<br>
<h3 class="h3-responsive text-xs-left"><span style="font-size: 1rem; margin-right: 5rem;">Header 3</span>h3. heading</h3>
<br>
<h4 class="h4-responsive text-xs-left"><span style="font-size: 1rem; margin-right: 5rem;">Header 4</span>h4. heading</h4>
<br>
<h5 class="h5-responsive text-xs-left"><span style="font-size: 1rem; margin-right: 5rem;">Header 5</span>h5. heading</h5>
<br>
<div style="height: 40px"></div>
<h5>Notifications</h5>
<br>
<div class="text-xs-left">
<blockquote class="blockquote bq-primary">
<p class="bq-title">Info notification</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque! Sit, rem,
in?
</p>
</blockquote>
<blockquote class="blockquote bq-warning">
<p class="bq-title">Warning notification</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque! Sit, rem,
in?
</p>
</blockquote>
<blockquote class="blockquote bq-success">
<p class="bq-title">Success notification</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque! Sit, rem,
in?
</p>
</blockquote>
<blockquote class="blockquote bq-danger">
<p class="bq-title">Danger notification</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque! Sit, rem,
in?
</p>
</blockquote>
</div>
<div style="height: 40px"></div>
<h5>Contextual colors and backgrounds</h5>
<br>
<div class="text-xs-left">
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
<div class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
<br>
<div class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
<br>
<div class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
<br>
<div class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</div>
<br>
<div class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</div>
<br>
<div class="bg-inverse">Cras mattis consectetur purus sit amet fermentum.</div>
<br>
</div>
<div style="height: 40px"></div>
<h5>Blockquotes</h5>
<br>
<blockquote class="blockquote text-xs-left">
<p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<blockquote class="blockquote blockquote-reverse">
<p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<div style="height: 40px"></div>
<h5>Font weight and italics</h5>
<br>
<div class="text-xs-left">
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-italic">Italicized text.</p>
</div>
</div>
</div>
</section>
<hr class="between-sections">
<!-- Section: Icons -->
<section>
<!--Section heading-->
<h1 class="section-heading">600+ Icons</h1>
<div style="height: 40px"></div>
<p class="lead">MDB uses a powerful set of icons called Font Awesome.</p>
<p>Font Awesome gives you scalable vector icons that can be customized — size, color, drop shadow and anything that can be done with the power of CSS.</p>
<div style="height: 40px"></div>
<div class="row text-xs-left">
<div class="col-md-3 col-sm-4">
<p><i class="fa fa-camera-retro fa-lg indigo-text" aria-hidden="true"></i> fa-lg</p>
<p><i class="fa fa-camera-retro fa-2x indigo-text" aria-hidden="true"></i> fa-2x</p>
<p><i class="fa fa-camera-retro fa-3x indigo-text" aria-hidden="true"></i> fa-3x</p>
<p><i class="fa fa-camera-retro fa-4x indigo-text" aria-hidden="true"></i> fa-4x</p>
<p><i class="fa fa-camera-retro fa-5x indigo-text" aria-hidden="true"></i> fa-5x</p>
</div>
<div class="col-md-3 col-sm-4">
<p><i class="fa fa-heart-o fa-lg pink-text" aria-hidden="true"></i> fa-lg</p>
<p><i class="fa fa-heart-o fa-2x pink-text" aria-hidden="true"></i> fa-2x</p>
<p><i class="fa fa-heart-o fa-3x pink-text" aria-hidden="true"></i> fa-3x</p>
<p><i class="fa fa-heart-o fa-4x pink-text" aria-hidden="true"></i> fa-4x</p>
<p><i class="fa fa-heart-o fa-5x pink-text" aria-hidden="true"></i> fa-5x</p>
</div>
<div class="col-md-3 col-sm-4">
<p><i class="fa fa-birthday-cake fa-lg amber-text" aria-hidden="true"></i> fa-lg</p>
<p><i class="fa fa-birthday-cake fa-2x amber-text" aria-hidden="true"></i> fa-2x</p>
<p><i class="fa fa-birthday-cake fa-3x amber-text" aria-hidden="true"></i> fa-3x</p>
<p><i class="fa fa-birthday-cake fa-4x amber-text" aria-hidden="true"></i> fa-4x</p>
<p><i class="fa fa-birthday-cake fa-5x amber-text" aria-hidden="true"></i> fa-5x</p>
</div>
<div class="col-md-3 col-sm-4">
<p><i class="fa fa-plane fa-lg lime-text" aria-hidden="true"></i> fa-lg</p>
<p><i class="fa fa-plane fa-2x lime-text" aria-hidden="true"></i> fa-2x</p>
<p><i class="fa fa-plane fa-3x lime-text" aria-hidden="true"></i> fa-3x</p>
<p><i class="fa fa-plane fa-4x lime-text" aria-hidden="true"></i> fa-4x</p>
<p><i class="fa fa-plane fa-5x lime-text" aria-hidden="true"></i> fa-5x</p>
</div>
</div>
</section>
<!--/ Section: Icons -->
<hr class="between-sections">
<!--Section: Animations-->
<section class="section">
<!--Section heading-->
<h1 class="section-heading">Animations</h1>
<p class="lead"><strong>Over 70 CSS animations</strong> </p>
<p>Bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.</p>
<br>
<div class="row">
<div class="col-md-6">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(31).jpg" alt="" class="img-fluid wow bounceInUp">
</div>
<div class="col-md-6">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(32).jpg" alt="" class="img-fluid wow tada">
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(33).jpg" alt="" class="img-fluid wow fadeInLeft">
</div>
<div class="col-md-6">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(34).jpg" alt="" class="img-fluid wow fadeInRight">
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(35).jpg" alt="" class="img-fluid wow fadeInUp" data-wow-delay="0.2s">
</div>
<div class="col-md-6">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(36).jpg" alt="" class="img-fluid wow fadeInUp" data-wow-delay="0.6s">
</div>
</div>
</section>
<!--/Section: Animations-->
<hr class="between-sections">
<!--Section: Charts-->
<section class="section">
<!--Section heading-->
<h1 class="section-heading">Charts</h1>
<p class="lead">Simple, clean and interactive charts</p>
<br>
<div style="height: 40px"></div>
<h5>Classic charts </h5>
<br>
<!-- Live preview-->
<div class="row">
<div class="col-md-4">
<canvas id="lineChartEx"></canvas>
</div>
<div class="col-md-4">
<canvas id="radarChartEx"></canvas>
</div>
<div class="col-md-4">
<canvas id="barChartEx"></canvas>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-4">
<canvas id="polarChartEx"></canvas>
</div>
<div class="col-md-4">
<canvas id="pieChartEx"></canvas>
</div>
<div class="col-md-4">
<canvas id="doughnutChartEx"></canvas>
</div>
</div>
<!-- /.Live preview-->
</section>
<!--/Section: Charts-->
<hr class="between-sections">
<!--Section: Hover effects-->
<section>
<!--Section heading-->
<h1 class="section-heading">Hover effects</h1>
<div style="height: 40px"></div>
<h4>Overlay effect</h4>
<br>
<div class="row">
<div class="col-md-4">
<div class="view overlay hm-blue-light">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(1).jpg" class="img-fluid " alt="">
<div class="mask flex-center">
<p class="white-text">Light overlay</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="view overlay hm-red-strong">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(1).jpg" class="img-fluid " alt="">
<div class="mask flex-center">
<p class="white-text">Strong overlay</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="view overlay hm-green-slight">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(1).jpg" class="img-fluid " alt="">
<div class="mask flex-center">
<p class="white-text">Super light overlay</p>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<div class="row" style="margin-bottom:2rem;">
<div class="col-md-6">
<h4 class="text-xs-center">Zoom effect</h4>
<br>
<div class="view overlay hm-zoom">
<img src="http://mdbootstrap.com/images/regular/people/lq/img%20(1).jpg" class="img-fluid " alt="">
<div class="mask flex-center">
<p class="white-text">Zoom effect</p>
</div>
</div>
</div>
<div class="col-md-6">
<h4 class="text-xs-center">Shadow effect</h4>
<br>
<img src="http://mdbootstrap.com/images/regular/nature/img%20(35).jpg" class="img-fluid img-circle hoverable" alt="">
</div>
</div>
</section>
<!--/Section: Hover effects-->
<hr class="between-sections">
<!--Section: Masks-->
<section class="section">
<!--Section heading-->
<h1 class="section-heading">Masks</h1>
<div style="height: 10px"></div>
<h5>Patterns </h5>
<br>
<div class="row">
<div class="col-md-6">
<div class="view">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask flex-center">
<p class="white-text">no mask</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="view">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask pattern-1 flex-center">
<p class="white-text">.pattern-1</p>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="view">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask pattern-2 flex-center">
<p class="white-text">.pattern-2</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="view">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask pattern-3 flex-center">
<p class="white-text">.pattern-3</p>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="view">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask pattern-4 flex-center">
<p class="white-text">.pattern-4</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="view">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask pattern-5 flex-center">
<p class="white-text">.pattern-5</p>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="view">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask pattern-8 flex-center">
<p class="white-text">.pattern-8</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="view">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask pattern-6 flex-center">
<p class="white-text">.pattern-6</p>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="view">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask pattern-7 flex-center">
<p class="white-text">.pattern-7</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="view">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask pattern-9 flex-center">
<p class="white-text">.pattern-9</p>
</div>
</div>
</div>
</div>
<div style="height: 40px"></div>
<h5>Overlays </h5>
<br>
<!-- Live preview-->
<div class="row">
<div class="col-md-12">
<div class="view">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask flex-center">
<h2 class="white-text">no overlay</h2>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="view hm-black-slight">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask flex-center">
<p class="white-text">light overlay</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="view hm-black-strong">
<img src="http://mdbootstrap.com/images/regular/nature/img%20(28).jpg" class="img-fluid" alt="">
<div class="mask flex-center">
<p class="white-text">strong overlay</p>
</div>
</div>
</div>
</div>
</section>
<!--/Section: Masks-->
<hr class="between-sections">
<!--Section: Modals-->
<section class="section">
<!--Section heading-->
<h1 class="section-heading">Modals</h1>
<p>Click the button:</p>
<!-- Button trigger modal -->
<button type="button" class="btn btn-indigo btn-lg" data-toggle="modal" data-target="#myModal">
Basic example
</button>
<br>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<!--Body-->
<div class="modal-body">
...
</div>
<!--Footer-->
<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>
<!--/.Content-->
</div>
</div>
</section>
<!--/Section: Modals-->
<hr class="between-sections">
<!-- Images -->
<section>
<!--Section heading-->
<h1 class="section-heading">Images</h1>
<br>
<br>
<br>
<div class="row">
<div class="col-md-3">
<h5>Rounded image</h5>
<br>
<img src="http://mdbootstrap.com/images/avatars/img%20(1).jpg" alt="..." class="img-rounded">
</div>
<div class="col-md-3">
<h5>Circle image</h5>
<br>
<img src="http://mdbootstrap.com/images/avatars/img%20(1).jpg" alt="..." class="img-circle">
</div>
<div class="col-md-3">
<h5>Rounded raised</h5>
<br>
<img src="http://mdbootstrap.com/images/avatars/img%20(1).jpg" alt="..." class="img-rounded z-depth-4">
</div>
<div class="col-md-3">
<h5>Circle raised</h5>
<br>
<img src="http://mdbootstrap.com/images/avatars/img%20(1).jpg" alt="..." class="img-circle z-depth-4">
</div>
</div>
<br>
<br>
</section>
<!--/ Images -->
<hr class="between-sections">
<!-- List groups -->
<section>
<!--Section heading-->
<h1 class="section-heading">List groups</h1>
<div style="height: 40px"></div>
<h5>Labels</h5>
<br>
<div class="row">
<div class="col-md-12 text-xs-left">
<ul class="list-group">
<li class="list-group-item">
<span class="tag bg-primary label-pill pull-xs-right">14</span> Cras justo odio
</li>
<li class="list-group-item">
<span class="tag bg-primary label-pill pull-xs-right">2</span> Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span class="tag bg-primary label-pill pull-xs-right">1</span> Morbi leo risus
</li>
</ul>
</div>
</div>
<div style="height: 40px"></div>
<h5>Linked items</h5>
<br>
<div class="row">
<div class="col-md-12 text-xs-left">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
</div>
</div>
<div style="height: 40px"></div>
<h5>Contextual classes</h5>
<br>
<div class="row">
<div class="col-md-12 text-xs-left">
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<br>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
</div>
</div>
<div style="height: 40px"></div>
<h5>Custom content</h5>
<br>
<div class="row">
<div class="col-md-12 text-xs-left">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
</div>
</div>
</div>
<div style="height: 40px"></div>
<h5>Reviews</h5>
<br>
<div class="row">
<div class="col-md-12 text-xs-left">
<!--First review-->
<div class="media">
<a class="media-left waves-light">
<img class="img-circle" src="http://mdbootstrap.com/images/avatars/avatar-4.jpg" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Maria Kate</h4>
<ul class="rating inline-ul">
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate temporibus iure soluta. Quasi mollitia maxime nemo quam accusamus possimus, voluptatum expedita assumenda. Earum sit id ullam eum vel delectus!</p>
</div>
</div>
<!--Second review-->
<div class="media">
<a class="media-left waves-light">
<img class="img-circle" src="http://mdbootstrap.com/images/avatars/avatar-8.jpg" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Nathan Casie</h4>
<ul class="rating inline-ul">
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate temporibus iure soluta. Quasi mollitia maxime nemo quam accusamus possimus, voluptatum expedita assumenda. Earum sit id ullam eum vel delectus!</p>
</div>
</div>
<!--Second review-->
<div class="media">
<a class="media-left waves-light">
<img class="img-circle" src="http://mdbootstrap.com/images/avatars/avatar-10.jpg" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Lara Smith</h4>
<ul class="rating inline-ul">
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star amber-text"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate temporibus iure soluta. Quasi mollitia maxime nemo quam accusamus possimus, voluptatum expedita assumenda. Earum sit id ullam eum vel delectus!</p>
</div>
</div>
</div>
</div>
</section>
<!--/ List groups -->
<hr class="between-sections">
<!--Section: Navbars-->
<section class="section">
<!--Section heading-->
<h1 class="section-heading">Navbars</h1>
<!--Navbar blue-->
<nav class="navbar navbar-dark bg-primary">
<!-- Collapse button-->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx2"><i class="fa fa-bars"></i></button>
<div class="container">
<!--Collapse content-->
<div class="collapse navbar-toggleable-xs" id="collapseEx2">
<!--Navbar Brand-->
<!--Links-->
<ul class="nav navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item btn-group">
<a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
<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>
</li>
</ul>
<!--Search form-->
<form class="form-inline">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
<!--/.Collapse content-->
</div>
</nav>
<!--/.Navbar blue-->
<div style="height: 40px"></div>
<!--Navbar purple-->
<nav class="navbar navbar-dark secondary-color-dark">
<!-- Collapse button-->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx"><i class="fa fa-bars"></i></button>
<div class="container">
<!--Collapse content-->
<div class="collapse navbar-toggleable-xs" id="collapseEx">
<!--Links-->
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#best-features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#examples-of-use">Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
</ul>
<!--/Links-->
<!--Navbar icons-->
<ul class="nav navbar-nav nav-flex-icons">
<li class="nav-item">
<a class="nav-link"><i class="fa fa-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-google-plus"></i></a>
</li>
<li class="nav-item btn-group">
<a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i></a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
<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>
</li>
</ul>
<!--/Navbar icons-->
</div>
<!--/.Collapse content-->
</div>
</nav>
<!--/.Navbar purple-->
<div style="height: 40px"></div>
<!--Navbar green-->
<nav class="navbar navbar-dark default-color">
<!-- Collapse button-->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx22"><i class="fa fa-bars"></i> </button>
<div class="container">
<!--Collapse content-->
<div class="collapse navbar-toggleable-xs" id="collapseEx22">
<!--Navbar Brand-->
<!--Links-->
<ul class="nav navbar-nav pull-right">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-envelope"></i> Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i> Profile</a>
<div class="dropdown-menu dropdown-default" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
<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>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-gear"></i> Settings</a>
</li>
</ul>
<!--Links-->
</div>
<!--/.Collapse content-->
</div>
</nav>
<!--/.Navbar green-->
<div style="height: 40px"></div>
<h5>Breadcrumbs </h5>
<br>
<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>
<!-- /.Live preview-->
<br>
<!-- Live preview-->
<nav class="navbar navbar-dark stylish-color">
<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>
</nav>
<!-- /.Live preview-->
<br>
<!-- Live preview-->
<nav class="navbar navbar-light teal lighten-5">
<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>
</nav>
</section>
<!--/Section: Navbars-->
<hr class="between-sections">
<!--Section: Miscellaneous-->
<section class="section">
<!--Section heading-->
<h1 class="section-heading">Miscellaneous</h1>
<div style="height: 40px"></div>
<div class="row">
<div class="col-md-5">
<h5>Paginations </h5>
<br>
<!--Pagination blue-->
<nav>
<ul class="pagination pg-blue">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
<li class="page-item"><a class="page-link">5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination blue-->
<!--Pagination red-->
<nav>
<ul class="pagination pg-red">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
<li class="page-item"><a class="page-link">5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination red-->
<!--Pagination teal-->
<nav>
<ul class="pagination pg-teal">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
<li class="page-item"><a class="page-link">5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination teal-->
<!--Pagination dark-->
<nav>
<ul class="pagination pg-dark">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
<li class="page-item"><a class="page-link">5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination dark-->
<!--Pagination blue grey-->
<nav>
<ul class="pagination pg-bluegrey">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
<li class="page-item"><a class="page-link">5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination grey-->
<!--Pagination amber-->
<nav>
<ul class="pagination pg-amber">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
<li class="page-item"><a class="page-link">5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination amber-->
<!--Pagination purple-->
<nav>
<ul class="pagination pg-purple">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
<li class="page-item"><a class="page-link">5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination purple-->
<!--Pagination dark grey-->
<nav>
<ul class="pagination pg-darkgrey">
<!--Arrow left-->
<li class="page-item">
<a class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
<li class="page-item"><a class="page-link">5</a></li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!--/Pagination dark grey-->
</div>
<div class="col-md-7">
<h5>Tags </h5>
<br>
<h1>Example heading <span class="tag red">New</span></h1>
<h2>Example heading <span class="tag blue">New</span></h2>
<h3>Example heading <span class="tag black">New</span></h3>
<h4>Example heading <span class="tag green">New</span></h4>
<h5>Example heading <span class="tag grey">New</span></h5>
<h6>Example heading <span class="tag indigo">New</span></h6>
<div style="height: 60px"></div>
<h5>Collapse</h5>
<br>
<p>
<a class="btn btn-purple" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-purple" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
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 class="col-md-12">
<div style="height: 40px"></div>
<h5>Tooltips (hover buttons below)</h5>
<br>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
<div style="height: 40px"></div>
<h5>Popovers (click buttons below)</h5>
<br>
<button type="button" class="btn btn-danger" data-toggle="popover" title="Popover title" data-placement="left" data-content="And here's some amazing content. It's very engaging. Right?">Popover on left</button>
<button type="button" class="btn btn-danger" data-toggle="popover" title="Popover title" data-placement="top" data-content="And here's some amazing content. It's very engaging. Right?">Popover on top</button>
<button type="button" class="btn btn-danger" data-toggle="popover" title="Popover title" data-placement="right" data-content="And here's some amazing content. It's very engaging. Right?">Popover on right</button>
<button type="button" class="btn btn-danger" data-toggle="popover" title="Popover title" data-placement="bottom" data-content="And here's some amazing content. It's very engaging. Right?">Popover on bottom</button>
</div>
</div>
</section>
<!--/Section: Miscellaneous-->
<hr class="between-sections">
<!--Section: More-->
<section class="section">
<!--Section heading-->
<h1 class="section-heading">...and many more</h1>
<h3>Material Design for Bootstrap 4 or 3</h3>
<br>
<h4>Full demo & download</h4>
<br>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-12">
<!--Featured image-->
<div class="view overlay hm-white-slight m-b-2">
<img src="http://mdbootstrap.com/images/about/intro.jpg">
<a target="_blank" href="http://mdbootstrap.com/material-design-for-bootstrap/">
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<br>
<a target="_blank" href="http://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-primary btn-lg"><i class="fa fa-download left"></i> Free download</a>
</div>
<!--/First column-->
</div>
<!--/First row-->
</section>
<!--/Section: More-->
<hr class="between-sections">
<!--Projects section v.1-->
<section class="section">
<!--Section heading-->
<h1 class="section-heading wow fadeIn">Learn more about MDB</h1>
<!--Section sescription-->
<p class="section-description wow fadeIn">Start our free, amazing tutorials, which will let you combine Material Design with Bootstrap and Wordpress.</p>
<!--First row-->
<div class="row text-xs-center">
<!--Second column-->
<div class="col-md-6 m-b-r">
<!--Card-->
<div class="card card-cascade wider wow fadeIn">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="http://mdbootstrap.com/wp-content/uploads/2016/01/bootstrap-tutorial-1.jpg" class="img-fluid" alt="">
<a target="_blank" href="http://mdbootstrap.com/bootstrap-tutorial/">
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<br>
<!--Title-->
<h4 class="card-title">Bootstrap tutorial</h4>
<!--Text-->
<p class="card-text">This complete and easy guide will teach you how to create stunning, responsive website and apps.</p>
<a target="_blank" href="http://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-primary">Start</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-md-6 m-b-r">
<!--Card-->
<div class="card card-cascade wider wow fadeIn">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="http://mdbootstrap.com/wp-content/uploads/2016/06/wordpress-min-1.jpg" class="img-fluid" alt="">
<a target="_blank" href="http://mdbootstrap.com/wordpress-tutorial/">
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<br>
<!--Title-->
<h4 class="card-title">Wordpress tutorial</h4>
<!--Text-->
<p class="card-text">This comprehensive tutorial contains everything you have to know about WordPress Theme development, starting with setting the environment, through WordPress installation and configuration, setting up theme construction,
development including custom widgets and functions. </p>
<a target="_blank" href="http://mdbootstrap.com/wordpress-tutorial/" class="btn btn-primary">Start</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/Third column-->
</div>
<!--/First row-->
</section>
<!--/Projects section v.1-->
</div>
</main>
<!--/Main layout-->
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.1.1/css/mdb.min.css);
// Adds some data to charts
$(function() {
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}, {
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}]
};
var option = {
responsive: true,
scaleFontSize: 10,
};
//Chart 1
var ctx = document.getElementById("lineChartEx").getContext('2d');
var lineChart = new Chart(ctx).Line(data, option);
// Chart 2
var ctx = document.getElementById("radarChartEx").getContext('2d');
var radarChart = new Chart(ctx).Radar(data, option);
// Chart 3
var ctx = document.getElementById("barChartEx").getContext('2d');
var barChart = new Chart(ctx).Bar(data, option);
});
$(function() {
var data = [{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red"
}, {
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
}, {
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}, {
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
}, {
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}];
var option = {
responsive: true,
};
//Chart 4
var ctx = document.getElementById("polarChartEx").getContext('2d');
var myPolarChart = new Chart(ctx).PolarArea(data, option);
//Chart 5
var ctx = document.getElementById("pieChartEx").getContext('2d');
var myPieChart = new Chart(ctx).Pie(data, option);
//Chart 6
var ctx = document.getElementById("doughnutChartEx").getContext('2d');
var myDoughnutChart = new Chart(ctx).Doughnut(data, option);
});
