CODEWITHSUNDEEP
htmlcssformstwitter-bootstrap
user411103
user411103

Reputation:

Center input fields in form

I have a login form that is on the center of the page. The FORM is already in the right place with the right size. However, the two inputs are aligned to the left and I want them to be centered. The following code does not work. Any ideas?

HTML

<div class="col-sm-4 col-sm-offset-4">
      <form action="/new" method="POST">
        <input class="loginField" type="text" name="email" placeholder="Email address"></input>
        <input class="loginField" type="text" name="password" placeholder="Password"></input>
      </form>
    </div>

CSS

.loginField {
  margin: 0 auto;
  width: 500px;
  height: 50px;
}

Upvotes: 2

Views: 4000

Answers (2)

vanburen
vanburen

Reputation: 21663

You should use the form-control class to alter the default behavior of Bootstrap inputs.

*I altered your HTML so it's mobile first, this wont effect the text being centered if it's unnecessary for your needs tho.

body {
  padding-top: 50px;
}
#loginForm {
  max-width: 500px;
  margin: 0 auto;
}
#loginForm .form-control {
  position: relative;
  height: 50px;
  font-size: 16px;
  text-align: center;
  border-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form id="loginForm">
    <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
  </form>
</div>
<!-- /container -->
<hr>

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206565

Add a class="text-center" to your form

<form class="text-center" action="/new" method="POST">

jsBin demo

Logically, if you don't want all your form's text to be centered, wrap your inputs inside a i.e: <div> and add the class to that DIV instead.

Upvotes: 1

Related Questions