RagnaLugria RagnaLugria - 1 month ago 18
CSS Question

Bootstrap login screen fixed when resizing

so here I am trying to create a login screen via bootstrap however I cant seem to figure out to have the look stay in the same positions (just getting smaller) whenever i resize it. Any advice? i tried placing them inside a container div, width:100% and center, nothing seems to be working.



/* heres the css: */

.login-form {
margin: 25px auto 25px auto;
width: 25%;
background-color: white;
padding: 150px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
z-index: -1;
}

.form-group {
margin-bottom: 15px;
}

#logo {
background-color: white;
background-size: 170px auto;
background-position: center center;
background-repeat: no-repeat;
max-width:100%;
height: 192px;
width: 192px;
margin: 22px auto auto auto;
padding: 0px;
border: 5px solid white;
box-shadow: 1px 3px 2px grey;
}

<div class="col-md-12">
<div id="logo">
<img class="img-responsive" src="uv.gif">
</div>
</div>
<div class="login-form">
<h1>United Volunteers</h1>
<div class="form-group" style="width:90%">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-input" placeholder="Username">
</div>

<div class="form-group"><label>Password</label>
<input type="password" class="form-input" placeholder="Password">
</div>
</div>
</div>





This is maximized
This is windowed

Answer

Give the form a column wrapper like this:

<div class="container-fluid">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
          <div id="logo">
          <img class="img-responsive" src="uv.gif">
          </div>
      </div>
      <div class="col-md-offset-2 col-md-8 text-center">
        <div class="login-form">
          <h1>United Volunteers</h1>      
          <div class="form-group">
            <label>Username</label>
            <input type="text" class="form-input" placeholder="Username">
          </div>
          <div class="form-group">
            <label>Password</label>
            <input type="password" class="form-input" placeholder="Password">
          </div>
        </div> <!-- // login-form -->      
      </div>

    </div> <!-- // row -->
  </div> <!-- // container -->
</div> <!-- // container-fluid -->

CSS:

.login-form {
    box-sizing: border-box;
    margin: 25px auto;
    background-color: white;
    padding: 150px 50px 50px 50px;
    box-shadow: 1px 5px 2px #330000;
    z-index: -1;
}

.form-group {
    margin-bottom: 15px;
}

#logo {
    background-color: white;
    background-size: 170px auto;
    background-position: center center;
    background-repeat: no-repeat;
    max-width:100%;
    height: 192px;
    width: 192px;
    margin: 22px auto auto auto;
    padding: 0px;
    border: 5px solid white;
    box-shadow: 1px 3px 2px grey;
}

jsfiddle:

https://jsfiddle.net/michaelyuen/r27pw3k7/1/