Bootstrap - horizontal Aligning Text Fields

Question

I am trying to align textfields with bootstrap however I keep failing to adopt anything I found on sources to my project. What I am trying to do is aligning e-mail and password text-fields but leave 'Remember me' and 'Login' centered.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

     <form method="POST" action="/auth/login">

       <div class="form-group">    
         <div>
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" name="email" value="{{ old('email') }}">
         </div>
       </div>

       <div class="form-group">  
         <div>
            <label for="exampleInputPassword1">Password</label>
            <input type="password" name="password" id="password">
         </div>
       </div>

      <div class="form-group">  
        <div class="checkbox">
           <label>
             <input type="checkbox" name="remember"> Remember me
           </label>
        </div>
      </div>

     <div class="form-group">  
       <div>
        <button type="submit" class="btn btn-default">Login</button>
       </div>
     </div>

 </form>

Answer 1

You can use Bootstrap's form-horizontal class to help achieve the layout.

Demo: http://www.bootply.com/nJ2P2gi76B

  <form class="form-horizontal">
    <div class="form-group">
      <label for="inputEmail" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail">
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword" class="col-sm-2 control-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword">
      </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">Log in</button>
      </div>
    </div>
  </form>

Answer 2

It would help if you could post a JSFiddle with the css you are using!

Guessing from what i see:

• You could add a class to both fields and override the css.

• or put both fields in a div and align them without impacting the rest.

Using an enclosing div: JSFiddle

CSS:

.input-fields {
    width: 300px;
}

.input-fields .form-group {
    float: right;
}

.form-group {
    clear: both;
    text-align: center;
}

HTML:

<form method="POST" action="/auth/login">
 <div class="input-fields">
   <div class="form-group">    
     <div>
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" name="email" value="{{ old('email') }}">
     </div>
   </div>

   <div class="form-group">  
     <div>
        <label for="exampleInputPassword1">Password</label>
        <input type="password" name="password" id="password">
     </div>
   </div>
 </div>
  <div class="form-group">  
    <div class="checkbox">
       <label>
         <input type="checkbox" name="remember"> Remember me
       </label>
    </div>
  </div>

 <div class="form-group">  
   <div>
    <button type="submit" class="btn btn-default">Login</button>
   </div>
 </div>

</form>

Answer 3

you can use text-center to center the inner content of your div. you can use text-left, text-center, text-right classes to align the contents.

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css);

	<form method="POST" action="/auth/login">

		<div class="form-group">    
			<div>
				<label for="exampleInputEmail1">Email address</label>
				<input type="email" name="email" value="{{ old('email') }}">
			</div>
		</div>

		<div class="form-group">  
			<div>
				<label for="exampleInputPassword1">Password</label>
				<input type="password" name="password" id="password">
			</div>
		</div>

		<div class="form-group text-center">  
			<div class="checkbox">
				<label>
					<input type="checkbox" name="remember"> Remember me
				</label>
			</div>
		</div>

		<div class="form-group text-center">  
			<div>
				<button type="submit" class="btn btn-default">Login</button>
			</div>
		</div>

	</form>

Answer 4

You can access only the text input by using a css attribute selector.

For Example...

input[type="text"] {
   ...
}

You can get more specific if needed...

#someID input[type="text"] {
    ...
}