CODEWITHSUNDEEP
csshtmltwitter-bootstrap
user1438003
user1438003

Reputation: 6783

How to center form in twitter bootstrap?

<div class="container">
    <div class="row">
        <div class="span6 center">
            <form>
                <table>
                    <tbody>
                        <td>foo</td>
                    </tbody>
                </table>
            </form>
        </div>
    </div>
</div>

JSfiddle

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

Answers (6)

albertedevigo
albertedevigo

Reputation: 18411

The native way for positioning elements in Bootstrap is using offset. I will assume that you are using a 12-column layout.

Bootstrap 2

<div class="container">
    <div class="row">
        <div class="span6 offset3">
            <form>
                ...
            </form>
        </div>
    </div>
</div>

Further information in the documentation

Bootstrap 3

<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

Shiv
Shiv

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

user864786
user864786

Reputation: 21

<div class="container">

you coding for form

</div>

Upvotes: -1

IsaacSF
IsaacSF

Reputation: 126

Have you tried this?

.center form {
        display: table;
        margin: 0 auto;
    }

This is the easy and fast solution for me.

Upvotes: 4

Andres I Perez
Andres I Perez

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

Fred
Fred

Reputation: 4221

Nothing like good ol' CSS?

.center > form {
  width: 300px; // some amount to prevent using 100% width
  margin: 0 auto;
}

And change .span6 to .span12

Jsfiddle here. ​

Upvotes: 3

Related Questions