How to vertical-align input elements in Bootstrap?

Question

How can I vertical-align my input elements in Bootstrap? I wish to place the inputs in the very vertical center of my container.

HTML

    <form class="form-horizontal" role="form">
  <div class="form-group">
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10"> 
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>
        </div>
    </div>

In addition, if some information is missing, I will be more than happy to give the information.

http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 — CHINE Oussama, Jun 15 '16 at 11:00

score 0 · Answer 1 · edited May 23 '17 at 12:08

0

Your answer provided here How to vertically align label and input in Bootstrap 3?

Use http://getbootstrap.com/css/#forms-horizontal

<form class="form-horizontal">

or you can use

<div class="parent">
    <div class="child">
    </div>
</div>

//css

.parent{ position: relative }
.child { position: absolute;
         top: 50%;
         transform: translateY(-50%); }

edited May 23 '17 at 12:08

Community

1
1

answered Jun 15 '16 at 11:14

ArtemSky

1,173
11
20

score 0 · Answer 2 · answered Jun 15 '16 at 11:29

0

.container{
  display: flex;
  align-items: center;
}

#form{
    width:100%;
}

i try to make in https://jsfiddle.net/y5ne8gg9/

This is like you want ?

answered Jun 15 '16 at 11:29

Pajar Fathurrahman

991
1
9
19

score 0 · Answer 3 · answered Jun 15 '16 at 22:47

Here's a similar form: https://jsfiddle.net/UXEngineer/qtas70qy/

<h1>Login Portal</h1>
<hr />
<p>Enter your Username/Email and Password to log in to your account.</p>
<div class="clearfix"></div>
<form name="LoginForm" runat="server" action="~/Account/Default.aspx">
  <div class="col-md-12 col-sm-12">
    <div class="input-group">
      <span class="input-group-addon" id="UserAccountEmail-addon"><i class="fa fa-users"></i></span>
      <input type="email" id="UserAccountEmailtxt" name="UserAccountEmailAddress" class="form-control" maxlength="250" placeholder="Username or Email" required="required" aria-describedby="UserAccountEmail" />
    </div>
  </div>
  <div class="col-md-12 col-sm-12 clearfix">
    <div class="padding-top-eight-px"></div>
  </div>
  <div class="col-md-12 col-sm-12">
    <div class="input-group">
      <span class="input-group-addon" id="AccountPassword-addon"><i class="fa fa-unlock-alt padding-left-and-right-three-px"></i></span>
      <input type="email" id="AccountPasswordtxt" name="UserAccountPassword" class="form-control" maxlength="50" placeholder="Password" required="required" aria-describedby="AccountPassword" />
    </div>
  </div>
  <div class="col-md-12 col-sm-12 clearfix">
    <div class="padding-top-eight-px"></div>
  </div>
  <div class="center-text">
    <input type="checkbox" id="RememberUsercb" name="RememberMe" class="checkbox-inline" />
    <label for="RememberUsercb" class="mouse-pointer">Remember me</label>
  </div>
  <div class="col-md-12 col-sm-12 clearfix">
    <div class="padding-top-five-px"></div>
  </div>
  <div class="col-md-12 col-sm-12 clearfix">
    <hr />
  </div>
  <div class="col-md-12 col-sm-12 clearfix">
    <div class="padding-top-five-px"></div>
  </div>
  <div class="col-md-12 col-sm-12 clearfix">
    <div class="center-text">
        <button type="submit" id="UserLogInbtn" class="btn btn-success" title="Login In" name="LogIn">Submit Form</button>
    </div>
  </div>
</form>

Here's the css:

.padding-top-five-px {
  padding-top: 5px;
}

.padding-top-eight-px {
  padding-top: 8px;
}

.center-text { text-align: center; }

.padding-left-and-right-three-px {
  padding-left: 3px padding-right: 3px;
}

How to vertical-align input elements in Bootstrap?

3 Answers3