Reputation: 6783
<div class="container">
<div class="row">
<div class="span6 center">
<form>
<table>
<tbody>
<td>foo</td>
</tbody>
</table>
</form>
</div>
</div>
</div>
Note: I am using an abstracted layer so am unable to change the class of <form>
.
How do I get the form centred using Twitter-Bootstrap?
FYI: I have also tried with pagination-centred
.
Upvotes: 19
Views: 74197
Reputation: 18411
The native way for positioning elements in Bootstrap is using offset
. I will assume that you are using a 12-column layout.
<div class="container">
<div class="row">
<div class="span6 offset3">
<form>
...
</form>
</div>
</div>
</div>
Further information in the documentation
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form>
...
</form>
</div>
</div>
</div>
Further information in the documentation
Upvotes: 59
Reputation: 1267
This is where i found my answer.
https://stackoverflow.com/a/15084576/1140407
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
and to CSS:
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}
Upvotes: 7
Reputation: 126
Have you tried this?
.center form {
display: table;
margin: 0 auto;
}
This is the easy and fast solution for me.
Upvotes: 4
Reputation: 75409
Both answers posted are valid and work so I upvoted them. Here is another method i did not see posted.
You can center your form by setting it to display:inline-block
and center it within the .center
container using text-align:center
. This way the form will center regardless of width within that container:
CSS
.center {
text-align:center;
}
.center form {
display:inline-block;
}
Upvotes: 19