"Bootstrap Inputs"
Bootstrap 4.0.0 Snippet by CreativeTim

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
$(document).ready(function() {
$('body').bootstrapMaterialDesign();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro Angular

Questions / Comments: