"Login Form MD"
Bootstrap 3.3.0 Snippet by eldragon87

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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<body class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="box">
<div class="input-group">
<span class="input-group-addon addon-facebook">
<i class="fa fa-fw fa-2x fa-facebook fa-fw"></i>
</span>
<a class="btn btn-lg btn-block btn-facebook" href="#"> Register with Facebook</a>
</div>
<div class="input-group">
<span class="input-group-addon addon-twitter">
<i class="fa fa-fw fa-2x fa-twitter fa-fw"></i>
</span>
<a class="btn btn-lg btn-block btn-twitter" href="#"> Register with Twitter</a>
</div>
<form role="form">
<div class="divider-form"></div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="divider-form"></div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
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
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css);
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
body {
background-color: #f0f3f5;
font-family: 'Roboto';
}
.box {
background-color: #fff;
padding: 25px 40px;
margin-top: 30px; /*Remove, its example*/
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.input-group {
margin: 5px 0px;
}
.addon-facebook {
background-color: #345387;
border: none;
border-radius: 2px 0px 0px 2px;
color: #fff;
}
.btn-facebook,
.btn-facebook:hover {
background-color: #4b6ea9;
color: #fff;
border-radius: 0px 2px 2px 0px;
font-size: 15px;
}
.addon-twitter {
background-color: #00c6e9;
border: none;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: