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/

Expected Result : enter image description here

<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">&times;</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">&times;</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;
    }