responsiveness is not working for bootstrap alert and forgot password link
I have designed login page using bootstrap 3 template. I have placed bootstrap error alert and i have forgot password link, but when i resize the browser the alert and forgot password link are displaced from their place
Fiddle :https://jsfiddle.net/tgmorswx/4/
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="alert alert-danger alert-dismissible fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please Sign In</h3>
</div>
<div class="panel-body">
<form role="form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<!-- Change this to a button or input when using this as a form -->
<a href="index.html" class="btn btn-lg btn-success btn-block">Login</a>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
2 answers
-
answered 2018-05-16 06:22
לבני מלכה
remove this:
.login-panel { margin-top: 25%; }
by: (see fiddle:https://jsfiddle.net/8f4epsqh/)
.login-panel{ margin-top: 15px!important;} .alert-danger{ margin-top: 15px!important; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4"> <div class="alert alert-danger alert-dismissible fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action. </div> <div class="login-panel panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Please Sign In</h3> </div> <div class="panel-body"> <form role="form"> <fieldset> <div class="form-group"> <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus> </div> <div class="form-group"> <input class="form-control" placeholder="Password" name="password" type="password" value=""> </div> <div class="checkbox"> <label> <input name="remember" type="checkbox" value="Remember Me">Remember Me </label> </div> <!-- Change this to a button or input when using this as a form --> <a href="index.html" class="btn btn-lg btn-success btn-block">Login</a> </fieldset> </form> </div> </div> </div> </div> </div>
you can set
margin-top
to alert(as i did) -
answered 2018-05-16 07:59
faisal97
Check This One
https://jsfiddle.net/F86597/pq4ncrb7/1/
.alert-danger{ margin-top: -85px!important; position: absolute; } .login-panel{ margin-top: 100px!important; }