Menu
Hi there i am trying to position a login form in the middle of the screen using BootStrap 2. I have tried several combinations using offset etc. But i do not seem to have anu luck..
<div class="row-fluid">
<form action='' method='POST' id='loginForm' class='form-horizontal' autocomplete='off'>
...
</form>
</div>
Any suggestions on how i can achieve this?
786
If you want to do a horizontal centering, just put the form inside a DIV tag and apply align="center" attribute to it. So even if the form width is changed, your centering will remain the same.
To make a form horizontal, add class=”form-horizontal” in the <form> element. If you're using the <label> element then you must use class=”control-label”. Also, remember that you can use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.
if you want to use the grid system start by following @Pickle's answer. This will center the spanned columns that contain your form. If you want the form centered w/in that span, you'll have to do a bit more work such as the things mentioned by @kajo in his comment on your question.
To elaborate on @Pickle's answer, here's some sample code that centers a span of 4 columns in the default 12-column grid. If you need a different number of columns spanned, use @Pickle's formula (but keep in mind your number of spanned columns must be an even number)
<div class="container">
<div class="row">
<div class="offset4 span4">
.. form goes here ..
</div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
