Wednesday, 1 February 2017

good example to show html items on the middle of the screen





http://www.bootply.com/u4Srz4BLgt






<div class="fluid-container" id="loginScreen">
  <div class="flexbox-container">
    <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12 col-md-offset-4 col-lg-offset-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="text-center">Login</h3>
        </div>
        <div class="panel-body">
          <form name="login">
            <div class="form-group">
              <label>Username</label>
              <input type="text" class="form-control" name="loginCtrl.login.username">
            </div>
            <div class="form-group">
              <label>Password</label>
              <input type="passwod" class="form-control" name="loginCtrl.login.password">
            </div>
            <div class="form-group">
              <div class="checkbox col-md-8 col-lg-8 col-sm-12 colxs-12 noleftpadding">
                <label>
                  <input type="checkbox"> Remember Me.
                </label>
              </div>
              <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12 norightpadding">
                <button type="button" class="pull-right btn btn-md btn-primary">Login</button>
              </div>
            </div>
          </form>
        </div>
        <div class="panel-footer">
          <div class="btn-group btn-group-justified" role="group" aria-label="...">
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-default">Forgot Password</button>
            </div>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-default">Register</button>
            </div>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-default">View Demo</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>




html,body,.fluid-container {
   height: 100%;
}

.flexbox-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;.
    align-items: center;
    height: 100%;
}
       







No comments:

Post a comment