<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<body>
<div class="container mt-5">
<div class="title">
<h3>Navigation Pills</h3>
</div>
<div class="title">
<h3><small>Simple</small></h3>
</div>
<div class="row">
<div class="col-lg-6 col-md-8">
<ul class="nav nav-pills" role="tablist">
<!--
color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
-->
<li class="nav-item">
<a class="nav-link" href="#dashboard-1" role="tab" data-toggle="tab">
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#schedule-1" role="tab" data-toggle="tab">
Schedule
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tasks-1" role="tab" data-toggle="tab">
Tasks
</a>
</li>
</ul>
<div class="tab-content tab-space">
<div class="tab-pane active" id="dashboard-1">
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
<br><br>
Dramatically visualize customer directed convergence without revolutionary ROI.
</div>
<div class="tab-pane" id="schedule-1">
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
<br><br>Dramatically maintain clicks-and-mortar solutions without functional solutions.
</div>
<div class="tab-pane" id="tasks-1">
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
<br><br>Dynamically innovate resource-leveling customer service for state of the art customer service.
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="row">
<div class="col-md-3">
<ul class="nav nav-pills nav-pills-icons flex-column" role="tablist">
<!--
color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
-->
<li class="nav-item">
<a class="nav-link active" href="#dashboard-2" role="tab" data-toggle="tab">
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#schedule-2" role="tab" data-toggle="tab">
Schedule
</a>
</li>
</ul>
</div>
<div class="col-md-8">
<div class="tab-content">
<div class="tab-pane active" id="dashboard-2">
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
<br><br>
Dramatically visualize customer directed convergence without revolutionary ROI.
</div>
<div class="tab-pane" id="schedule-2">
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
<br><br>Dramatically maintain clicks-and-mortar solutions without functional solutions.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="title">
<h3><small>With Icons</small></h3>
</div>
<div class="row">
<div class="col-lg-6 col-md-8">
<ul class="nav nav-pills nav-pills-icons" role="tablist">
<!--
color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
-->
<li class="nav-item">
<a class="nav-link" href="#dashboard-1" role="tab" data-toggle="tab">
<i class="material-icons">dashboard</i>
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#schedule-1" role="tab" data-toggle="tab">
<i class="material-icons">schedule</i>
Schedule
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tasks-1" role="tab" data-toggle="tab">
<i class="material-icons">list</i>
Tasks
</a>
</li>
</ul>
<div class="tab-content tab-space">
<div class="tab-pane active" id="dashboard-1">
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
<br><br>
Dramatically visualize customer directed convergence without revolutionary ROI.
</div>
<div class="tab-pane" id="schedule-1">
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
<br><br>Dramatically maintain clicks-and-mortar solutions without functional solutions.
</div>
<div class="tab-pane" id="tasks-1">
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
<br><br>Dynamically innovate resource-leveling customer service for state of the art customer service.
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="row">
<div class="col-md-3">
<ul class="nav nav-pills nav-pills-icons flex-column" role="tablist">
<!--
color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
-->
<li class="nav-item">
<a class="nav-link active" href="#dashboard-2" role="tab" data-toggle="tab">
<i class="material-icons">dashboard</i>
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#schedule-2" role="tab" data-toggle="tab">
<i class="material-icons">schedule</i>
Schedule
</a>
</li>
</ul>
</div>
<div class="col-md-8">
<div class="tab-content">
<div class="tab-pane active" id="dashboard-2">
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
<br><br>
Dramatically visualize customer directed convergence without revolutionary ROI.
</div>
<div class="tab-pane" id="schedule-2">
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
<br><br>Dramatically maintain clicks-and-mortar solutions without functional solutions.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="title">
<h3><small>Colors</small></h3>
</div>
<div class="row">
<div class="col-md-4">
<p>Primary color</p>
<ul class="nav nav-pills nav-pills-primary mt-4" role="tablist">
<li class="nav-item">
<a class="nav-link" href="#dashboard-1" role="tab" data-toggle="tab">
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#schedule-1" role="tab" data-toggle="tab">
Schedule
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tasks-1" role="tab" data-toggle="tab">
Tasks
</a>
</li>
</ul>
</div>
<div class="col-md-4">
<p>Info color</p>
<ul class="nav nav-pills nav-pills-info mt-4" role="tablist">
<li class="nav-item">
<a class="nav-link" href="#dashboard-1" role="tab" data-toggle="tab">
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#schedule-1" role="tab" data-toggle="tab">
Schedule
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tasks-1" role="tab" data-toggle="tab">
Tasks
</a>
</li>
</ul>
</div>
<div class="col-md-4">
<p>Success color</p>
<ul class="nav nav-pills nav-pills-success mt-4" role="tablist">
<li class="nav-item">
<a class="nav-link" href="#dashboard-1" role="tab" data-toggle="tab">
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#schedule-1" role="tab" data-toggle="tab">
Schedule
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tasks-1" role="tab" data-toggle="tab">
Tasks
</a>
</li>
</ul>
</div>
<div class="col-md-4 mt-5">
<p>Warning color</p>
<ul class="nav nav-pills nav-pills-warning mt-4" role="tablist">
<li class="nav-item">
<a class="nav-link" href="#dashboard-1" role="tab" data-toggle="tab">
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#schedule-1" role="tab" data-toggle="tab">
Schedule
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tasks-1" role="tab" data-toggle="tab">
Tasks
</a>
</li>
</ul>
</div>
<div class="col-md-4 mt-5">
<p>Danger color</p>
<ul class="nav nav-pills nav-pills-danger mt-4" role="tablist">
<li class="nav-item">
<a class="nav-link" href="#dashboard-1" role="tab" data-toggle="tab">
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#schedule-1" role="tab" data-toggle="tab">
Schedule
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tasks-1" role="tab" data-toggle="tab">
Tasks
</a>
</li>
</ul>
</div>
<div class="col-md-4 mt-5">
<p>Rose color</p>
<ul class="nav nav-pills nav-pills-rose mt-4" role="tablist">
<li class="nav-item">
<a class="nav-link" href="#dashboard-1" role="tab" data-toggle="tab">
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#schedule-1" role="tab" data-toggle="tab">
Schedule
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tasks-1" role="tab" data-toggle="tab">
Tasks
</a>
</li>
</ul>
</div>
</div>
</div>
<footer class="footer text-center ">
<p>Made with <a href="https://demos.creative-tim.com/material-kit/index.html" target="_blank">Material Kit</a> by Creative Tim</p>
</footer>
<script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
</body>
html *{
-webkit-font-smoothing: antialiased;
}
.title h3{
font-size: 25px !important;
margin-top: 20px;
margin-bottom: 25px;
line-height: 1.4em !important;
font-weight: 300;
}
h3 {
font-size: 1.5625rem;
line-height: 1.4em;
}
small {
font-size: 75%;
color: #777;
}
.nav-pills .nav-item .nav-link {
line-height: 24px;
font-size: 12px;
font-weight: 500;
min-width: 100px;
color: #555;
transition: all .3s;
border-radius: 30px;
padding: 10px 15px;
text-align: center;
border-radius: 4px;
}
.nav-pills:not(.flex-column) .nav-item+.nav-item:not(:first-child) {
margin-left: 5px;
}
.nav-pills .nav-item .nav-link.active {
color: #fff;
background-color: #9c27b0;
box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(156,39,176,.6);
}
.nav-pills.nav-pills-info .nav-item .nav-link.active, .nav-pills.nav-pills-info .nav-item .nav-link.active:focus, .nav-pills.nav-pills-info .nav-item .nav-link.active:hover {
background-color: #00bcd4;
box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(0,188,212,.6);
color: #fff;
}
.nav-pills.nav-pills-success .nav-item .nav-link.active, .nav-pills.nav-pills-success .nav-item .nav-link.active:focus, .nav-pills.nav-pills-success .nav-item .nav-link.active:hover {
background-color: #4caf50;
box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(76,175,80,.6);
color: #fff;
}
.nav-pills.nav-pills-warning .nav-item .nav-link.active, .nav-pills.nav-pills-warning .nav-item .nav-link.active:focus, .nav-pills.nav-pills-warning .nav-item .nav-link.active:hover {
background-color: #ff9800;
box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(255,152,0,.6);
color: #fff;
}
.nav-pills.nav-pills-danger .nav-item .nav-link.active, .nav-pills.nav-pills-danger .nav-item .nav-link.active:focus, .nav-pills.nav-pills-danger .nav-item .nav-link.active:hover {
background-color: #f44336;
box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(244,67,54,.6);
color: #fff;
}
.nav-pills.nav-pills-rose .nav-item .nav-link.active, .nav-pills.nav-pills-rose .nav-item .nav-link.active:focus, .nav-pills.nav-pills-rose .nav-item .nav-link.active:hover {
background-color: #e91e63;
box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(233,30,99,.6);
color: #fff;
}
.nav-pills .nav-item .nav-link:not(.active):hover {
background-color: rgba(200,200,200,.2);
}
.nav-pills .nav-item i {
display: block;
font-size: 30px;
padding: 15px 0;
}
.nav-pills.flex-column .nav-item+.nav-item {
margin-top: 5px;
}
.tab-pane{
font-weight: 300;
}
.tab-space {
padding: 20px 0 50px;
font-weight: 300;
}
/* footer */
footer{
margin-top: 100px;
color: #555;
background: #fff;
padding: 25px;
font-weight: 300;
}
.footer p{
margin-bottom: 0;
font-size: 14px;
font-weight: 300;
}
footer p a{
color: #555;
font-weight: 400;
}
footer p a:hover {
color: #9f26aa;
text-decoration: none;
}
$(document).ready(function() {
$('body').bootstrapMaterialDesign();
});
