"Bootstrap Forget Password Form"
Bootstrap 4.1.1 Snippet by cengizgoren

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.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container forget-password">
<div class="row">
<div class="col-md-12 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="text-center">
<img src="https://i.ibb.co/rshckyB/car-key.png" alt="car-key" border="0">
<h2 class="text-center">Forgot Password?</h2>
<p>You can reset your password here.</p>
<form id="register-form" role="form" autocomplete="off" class="form" method="post">
<div class="form-group">
<div class="input-group">
<select class="form-control" id="sel1">
<option selected="true" disabled="disabled">Please Select Security Question</option>
<option>Which is your favorite movie?</option>
<option>What is your pet's name?</option>
<option>What is the name of your village?</option>
</select>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope color-blue"></i></span>
<input id="forgetAnswer" name="forgetAnswer" placeholder="Answer" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<input name="btnForget" class="btn btn-lg btn-primary btn-block btnForget" value="Reset Password" type="submit">
</div>
</form>
</div>
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
body{
background:#f3c538;
}
.forget-pwd > a{
color: #dc3545;
font-weight: 500;
}
.forget-password .panel-default{
padding: 31%;
margin-top: -27%;
}
.forget-password .panel-body{
padding: 15%;
margin-bottom: -50%;
background: #fff;
border-radius: 5px;
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img{
width:40%;
margin-bottom:10%;
}
.btnForget{
background: #c0392b;
border:none;
}
.forget-password .dropdown{
width: 100%;
border: 1px solid #ced4da;
border-radius: .25rem;
}
.forget-password .dropdown button{
width: 100%;
}
.forget-password .dropdown ul{
width: 100%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: