How to Center Form in Twitter Bootstrap

How do you get centered content using Twitter Bootstrap?

This is for Text Centering (which is what the question was about)

For other types of content, see Flavien's answer.

Update: Bootstrap 2.3.0+ Answer

The original answer was for an early version of bootstrap. As of bootstrap 2.3.0, you can simply give the div the class .text-center.

---

Original Answer (pre 2.3.0)

You need to define one of the two classes, row or span12 with a text-align: center. See http://jsfiddle.net/xKSUH/ or http://jsfiddle.net/xKSUH/1/

How to center form in twitter bootstrap?

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;
}

Align the form to the center in Bootstrap 4

You need to use the various Bootstrap 4 centering methods...

• Use text-center for inline elements.
• Use justify-content-center for flexbox elements (ie; form-inline)

https://codeply.com/go/Am5LvvjTxC

Also, to offset the column, the col-sm-* must be contained within a .row, and the .row must be in a container...

<section id="cover">
    <div id="cover-caption">
        <div id="container" class="container">
            <div class="row">
                <div class="col-sm-10 offset-sm-1 text-center">
                    <h1 class="display-3">Welcome to Bootstrap 4</h1>
                    <div class="info-form">
                        <form action="" class="form-inline justify-content-center">
                            <div class="form-group">
                                <label class="sr-only">Name</label>
                                <input type="text" class="form-control" placeholder="Jane Doe">
                            </div>
                            <div class="form-group">
                                <label class="sr-only">Email</label>
                                <input type="text" class="form-control" placeholder="jane.doe@example.com">
                            </div>
                            <button type="submit" class="btn btn-success ">okay, go!</button>
                        </form>
                    </div>
                    <br>

                    <a href="#nav-main" class="btn btn-secondary-outline btn-sm" role="button">↓</a>
                </div>
            </div>
        </div>
    </div>
</section>

Center form in bootstrap

you only need to apply some width and make it center with margin: 0 auto

<div class="form-group row" id="signupcreate">
        <div class="col-sm-4">
            <label>Email</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="col-sm-4">
            <label>Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <div class="col-sm-4">
            <button type="submit">Submit</button>
        </div>
    </div>

below code will center your form

#signupcreate{
  width: 60%;
  margin: 0 auto;
  float: none;
}

how to center form using bootstrap 4

used justify-content-center

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <form class="col-lg-6 offset-lg-3 ">   <div class="row justify-content-center">     <input type="text" placeholder="Example input">     <span class="input-group-btn">       <button class="btn btn-primary">Download</button>     </span>   </div> </form>

How to center form in bootstrap 3

A simple way is to add

.center_div{
    margin: 0 auto;
    width:80% /* value of your choice which suits your alignment */
}

to you class .container.Add width:xx % to it and you get perfectly centered div!

eg :

<div class="container center_div">

but i feel that by default container is centered in BS!

Center a column using Twitter Bootstrap 3

There are two approaches to centering a column <div> in Bootstrap 3:

Approach 1 (offsets):

The first approach uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5, that's (12-2)/2.

In markup this would look like:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

Now, there's an obvious drawback for this method. It only works for even column sizes, so only .col-X-2, .col-X-4, col-X-6, col-X-8, and col-X-10 are supported.

---

Approach 2 (the old margin:auto)

You can center any column size by using the proven margin: 0 auto; technique. You just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:

.col-centered{
    float: none;
    margin: 0 auto;
}

Now you can add it to any column size at any screen size, and it will work seamlessly with Bootstrap's responsive layout:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Note: With both techniques you could skip the .row element and have the column centered inside a .container, but you would notice a minimal difference in the actual column size because of the padding in the container class.

---

Update:

Since v3.0.1 Bootstrap has a built-in class named center-block that uses margin: 0 auto, but is missing float:none, you can add that to your CSS to make it work with the grid system.

Centering a form in bootstrap not working

If you want to align the form elements center, you should use text-align:center style. So you should add text-center bootstrap class into the elements which you want to align center.

Does it work for you?

Center Form using Twitter Bootstrap

You need to include your form inside a container, the bootstrap already comes with a container class that is width:940px so you can wrap everything inside and it'll center automatically, like so:

<div class="container">
    <div class="row">
        <div class="span12">
            <form class="form-horizontal" method="post" action="/form/">
                <fieldset>
                    <legend>Please login</legend>
                    <div class="control-group">
                        <label class="control-label" for="id_username">Username</label>
                        <div class="controls">
                            <input name="username" maxlength="100" placeholder="Enter your username..." type="text" class="input-large" id="id_username" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="id_password">Password</label>
                        <div class="controls">
                            <input name="password" maxlength="100" placeholder="Enter your password..." type="password" class="input-large" id="id_password" />
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>

How can I center form content in a Bootstrap container?

Can you change the HTML? The biggest problem is that your section isn't a flex parent, so none of those properties (justify-content, align-, etc) will affect the children elements.

What you might want to consider is adding the row element inside of the container-fluid along with using the col classes to wrap the form.

The other concern is that your form fields (.form-control input elements) have a max-width set using inline styles, so on larger screens they may not appear centered, since they will be shorter in width than the containing col element.

You can remove that inline style (if it's not needed) to achieve a centered look. I put in custom CSS to set the max-width: none !important to show the affect of removing the inline style.

.form-control {
  max-width: none !important/* override the inline style */
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="p-5 container-fluid text-center" id="banner">
  <h1 class="display-1" id="title">Contact Us</h1>
  <img src="images/marine_divider1_lmbc_red.png" id="wheel" alt="divider"><br>
</div>

<section id="contact">
  <div class="container-fluid">
    <!-- added this -->
    <div class="row">
      <!-- added this  the offset class adds the margin left the equivalent of the columns -->
      <div class="col-md-6 offset-md-3 col-lg-4 offset-lg-4">
        <form class="form" name="form" autocomplete="off" action="https://formsubmit.co/troy_a_w_easson@outlook.com" method="POST">

          <div class="mb-3" id="form_box">
            <label class="form-label" for="name" style="color: black; margin-bottom: 0px;">Name:</label>
            <input class="form-control" id="name" type="text" name="name" required style="max-width: 500px; margin-top: 0px;">
          </div>

          <div class="mb-3" id="form_box">
            <label class="form-label" for="email" style="color: black; margin-bottom: 0px">Email Address:</label>
            <input class="form-control" id="email" type="email" placeholder="e.g. name@example.com" name="email" required style="max-width: 500px; margin-top: 0px;">
            <div id="emailHelp" class="form-text">We'll never share your email with anyone else without your permission.</div>
          </div>

          <div class="mb-5" id="form_box">
            <label class="form-label" for="subject" style="color: black; margin-bottom: 0px">Subject:</label>
            <input class="form-control mb-2" id="subject" type="text" name="subject" style="max-width: 500px; margin-top: 0px;">
          </div>

          <div class="form-floating mb-5" id="form_box">
            <textarea id="query" class="form-control" name="message" spellcheck="true" style="height: 250px; overflow-y: visible; max-width: 500px"></textarea>
            <label for="query" class="textlab">Type your message here: <span class="tooltip" data-tooltip="Type your message here">?</span></label>
          </div>

          <div class="form-floating mb-5" id="form_box">
            <textarea id="query" class="form-control" name="mark" spellcheck="true" style="height: 100px; max-width: 500px"></textarea>
            <label for="query" class="textlab">How did you hear about us?<span class="tooltip" data-tooltip="Just a few words on how you found our website and heard about our club">?</span></label>
          </div>

          <div class="mb-5 text text-center">
            <button type="submit" id="conbtn" class="btn btn-danger btn-lg btn-block">Send Now!</button>
          </div>
        </form>
        <div class="container text-center mx-auto">
          <img src="images/controllertransp.png" id="controller" alt="divider"><br>
        </div>
      </div>
    </div>
  </div>
</section>

---

Related Topics