<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 ---------->
<head>
<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">
</head>
<body>
<div class="container mt-5">
<div class="title">
<h3>Inputs</h3>
</div>
<div class="row">
<div class="col-lg-3 col-sm-4">
<div class="form-group has-default bmd-form-group">
<input type="text" class="form-control" placeholder="Regular">
</div>
</div>
<div class="col-lg-3 col-sm-4">
<div class="form-group bmd-form-group">
<label for="exampleInput1" class="bmd-label-floating">With Floating Label</label>
<input type="email" class="form-control" id="exampleInput1">
<span class="bmd-help">We'll never share your email with anyone else.</span>
</div>
</div>
<div class="col-lg-3 col-sm-4">
<div class="form-group has-success bmd-form-group">
<label for="exampleInput2" class="bmd-label-floating">Success input</label>
<input type="text" class="form-control" id="exampleInput2">
<span class="form-control-feedback">
<i class="material-icons">done</i>
</span>
</div>
</div>
<div class="col-lg-3 col-sm-4">
<div class="form-group has-danger bmd-form-group">
<label for="exampleInput3" class="bmd-label-floating">Error input</label>
<input type="email" class="form-control" id="exampleInput3">
<span class="form-control-feedback">
<i class="material-icons">clear</i>
</span>
</div>
</div>
<div class="col-lg-3 col-sm-4">
<div class="form-group bmd-form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">group</i>
</span>
</div>
<input type="text" class="form-control" placeholder="With Material Icons">
</div>
</div>
</div>
<div class="col-lg-3 col-sm-4">
<div class="form-group bmd-form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-group"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="With Font Awesome Icons">
</div>
</div>
</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://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<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>
<script src="https://rawgit.com/creativetimofficial/material-kit/master/assets/js/core/jquery.min.js"></script>
<script src="https://rawgit.com/creativetimofficial/material-kit/master/assets/js/core/bootstrap-material-design.min.js"></script>
<script src="https://rawgit.com/creativetimofficial/material-kit/master/assets/js/plugins/moment.min.js"></script>
<script src="https://rawgit.com/creativetimofficial/material-kit/master/assets/js/material-kit.js"></script>
</body>
html *{
-webkit-font-smoothing: antialiased;
}
body{
line-height: 1.5em !important;
}
.title h3{
font-size: 25px !important;
margin-top: 20px;
margin-bottom: 25px;
line-height: 1.4em !important;
font-weight: 300;
}
/* inputs */
.container .bmd-form-group .bmd-label-static {
top: .35rem;
left: 0;
font-size: .875rem;
}
.container .bmd-form-group .form-control, .bmd-form-group input::placeholder, .bmd-form-group label {
line-height: 1.1;
}
.container .form-control, .is-focused .form-control {
background-image: linear-gradient(0deg,#9c27b0 2px,
rgba(156,39,176,0) 0),linear-gradient(0deg,#d2d2d2 1px,hsla(0,0%,82%,0) 0) !important;
}
.form-group.is-focused [class*=" bmd-label"], .form-group.is-focused [class^=bmd-label] {
color: #9c27b0;
}
.form-control {
background: no-repeat bottom,50% calc(100% - 1px);
background-size: 0 100%,100% 100%;
border: 0;
height: 36px;
transition: background 0s ease-out;
padding-left: 0;
padding-right: 0;
border-radius: 0;
font-size: 14px !important;
}
.form-control:focus{
box-shadow: none;
}
.form-control::placeholder{
font-size: 14px !important;
color: #AAA !important;
}
.bmd-form-group label {
font-size: .875rem !important;
color: #AAA;
}
.bmd-form-group [class^=bmd-label].bmd-label-floating {
will-change: left,top,contents;
margin: 0;
line-height: 1.4;
font-weight: 400;
}
.bmd-form-group .bmd-label-floating, .bmd-form-group .bmd-label-placeholder {
top: 2.3125rem !important;
}
.is-focused .bmd-label-floating {
top: 1rem;
left: 0;
font-size: .6875rem;
}
.is-filled .bmd-label-floating, .is-focused .bmd-label-floating {
top: 1rem !important;
left: 0;
font-size: .6875rem !important;
}
.has-success .form-control-feedback {
color: #4caf50 !important;
opacity: 1;
}
.has-danger .form-control-feedback {
color: #f44336;
opacity: 1;
}
.form-control-feedback {
position: absolute;
top: 33px;
right: 0;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
pointer-events: none;
opacity: 0;
}
.has-success .form-control, .is-focused .has-success .form-control {
background-image: linear-gradient(to top,#4caf50 2px,rgba(76,175,80,0) 2px),linear-gradient(to top,#d2d2d2 1px,rgba(210,210,210,0) 1px) !important;
}
.has-danger .form-control, .has-danger .form-control:invalid, .is-focused .has-danger .form-control {
background-image: linear-gradient(to top,#f44336 2px,rgba(244,67,54,0) 2px),linear-gradient(to top,#d2d2d2 1px,rgba(210,210,210,0) 1px) !important;
}
.input-group .input-group-text {
display: flex;
justify-content: center;
align-items: center;
padding: 0 15px;
background-color: transparent;
border-color: transparent;
}
/* footer */
footer{
margin-top: 20px;
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();
});
