css - targeting and centering twitter bootstrap fields in form -


I have a form that I want to center the fields in the middle of the page. Currently this form is centered, but there are no fields.

Here is the picture of the scene. You can see that the word "start" is centered, but there is no form. http://postimg.org/image/hep95pl8h/

required form fields Be like the concentrated Tumor layout.

I think this is my markup.

  & lt; H1 class = "center" & gt; Start & lt; / H1> & Lt; Form class = "create_account" id = "login" verb = "{{URL :: route ('account-creation-post')}}" method = "post" & gt; & Lt; Div class = "input-group input-group-LG" & gt; & Lt; Div class = "form-group" & gt; & Lt; Br> & Lt; input class = "form-control input-lg" type = 'text' name = 'first_name' required placeholder = "First Name" {{(Input :: old ( 'first_name'))? 'Values' '. E (Input :: old ('first_name')). ' '': ''}} & Gt; & Lt; Div class = "errors" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "form-group" & gt; & Lt; Br> & Lt; input class = "form-control input-lg" type = 'text' name = 'last_name' required placeholder = "Last Name" {{(Input :: old ( 'last_name'))? 'Values' '. E (Input :: old ('last_name')). ' '': ''}} & Gt; & Lt; Div class = "errors" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "form-group" & gt; & Lt; Br> & Lt; Input class = "form-control input-lg" type = 'email' name = 'email' required placeholder = "email" {{(input :: old ('email'))? 'Values' '. E (Input :: old ('email')). ' '': ''}} & Gt; & Lt; Div class = "errors" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "form-group" & gt; & Lt; Br> & Lt; Input class = "form-control input-LG" type = 'text' name = 'username' required placeholder = "user name" {{(input :: old ('username'))? 'Values' '. E (Input :: old ('username')). ' '': ''}} & Gt; & Lt; Div class = "errors" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "form-group" & gt; & Lt; Br> & Lt; Input class = "form-control input-LG" type = 'password' name = 'password' required placeholder = "password" /> & Lt; Div class = "errors" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "form-group" & gt; & Lt; Br> & Lt; Input class = "form-control input-LG" type = 'password' name = 'password_again' required placeholder = "confirm password" / & gt; & Lt; Div class = "errors" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Input class = "BTN BTN-BTN-Primary BTN-Block" type = "submit" value = "Start waiving" & gt; & Lt ;! - The session related token pass-csrf - & gt; {{Form :: token ()}} & lt; / Form & gt;   

Here's my CSS

  .create_account {width: 400px; Height: auto; Margin: 0 auto; Text align: center; } .create_account Input {width: 80%; Height: auto; Margin: 0 auto; }    

Try it out:

  .input- Group {width: 80%; Margin: 0 Auto;} .create_account Input {width: 100%}   

In this input is a full width extension. Father, in this case, .input-group is set to 80%. I guess you want to.

Comments

Popular posts from this blog

java - ImportError: No module named py4j.java_gateway -

python - Receiving "KeyError" after decoding json result from url -

.net - Creating a new Queue Manager and Queue in Websphere MQ (using C#) -