css - targeting and centering twitter bootstrap fields in form -

css - targeting and centering twitter bootstrap fields in form -

i have form want fields centered in middle of page. form centered, fields not.

here pic of view. can see word "start" centered, form not.

the form fields need centered. tumblr layout.

here markup in view.

<h1 class="center">start</h1> <form class="create_account" id="login" action="{{ url::route('account-create-post') }}" method="post"> <div class="input-group input-group-lg"> <div class="form-group"> <br> <input class="form-control input-lg" type='text' name='first_name' required placeholder="first name"{{ (input::old('first_name')) ? ' value"' . e(input::old('first_name')) . '"' : '' }}> <div class="errors"> </div> </div> <div class="form-group"> <br> <input class="form-control input-lg" type='text' name='last_name' required placeholder="last name" {{ (input::old('last_name')) ? ' value"' . e(input::old('last_name')) . '"' : '' }}> <div class="errors"> </div> </div> <div class="form-group"> <br> <input class="form-control input-lg" type='email' name='email' required placeholder="email" {{ (input::old('email')) ? ' value"' . e(input::old('email')) . '"' : '' }}> <div class="errors"> </div> </div> <div class="form-group"> <br> <input class="form-control input-lg" type='text' name='username' required placeholder="username" {{ (input::old('username')) ? ' value"' . e(input::old('username')) . '"' : '' }}> <div class="errors"> </div> </div> <div class="form-group"> <br> <input class="form-control input-lg" type='password' name='password' required placeholder="password" /> <div class="errors"> </div> </div> <div class="form-group"> <br> <input class="form-control input-lg" type='password' name='password_again' required placeholder="confirm password" /> <div class="errors"> </div> </div> <input class="btn btn-primary btn-block" type="submit" value="start apologizing"> <!-- pass token related session-protects against csrf --> {{ form::token() }} </form>

here css

.create_account { width: 400px; height: auto; margin: 0 auto; text-align: center; } .create_account input { width: 80%; height: auto; margin: 0 auto; }

try this:

.input-group {width:80%; margin:0 auto;} .create_account input {width:100%}

jsfiddle

it has input expand total width of parent, in case, .input-group set 80% presume wanted.

css twitter-bootstrap-3