How to center form in bootstrap 3

Question

How can I center my login form ? I'm using bootstrap column but it's not working.

Here is my code:

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-6">
            <h2>Log in</h2>   
            <div>
                <table>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>3</td>
                    </tr>
                 </table>
             </div> 
        </div>
    </div>
</div>

http://stackoverflow.com/questions/18153234/center-a-div-using-bootstrap-3-markup-or-css — NoobEditor, Dec 31 '13 at 06:45

score 223 · Answer 1 · edited Apr 20 '20 at 16:19

223

There is a simple way of doing this in Bootstrap. Whenever I need to make a div center in a page, I divide all columns by 3 (total Bootstrap columns = 12, divided by 3 >>> 12/3 = 4). Dividing by four gives me three columns. Then I put my div in middle column. And all this math is performed by this way:

<div class="col-md-4 col-md-offset-4">my div here</div>

col-md-4 makes one column of 4 Bootstrap columns. Let's say it's the main column. col-md-offset-4 adds one column (of width of 4 Bootstrap column) to both sides of the main column.

edited Apr 20 '20 at 16:19

Salek

449
1
10
19

answered Mar 21 '15 at 15:06

Sid

2,582
4
16
20

7

This is clearly the correct answer, and is even done in a "bootstrap-ish" way. – Yan Paulo Aug 07 '17 at 22:30
agreed with you @Donato, years gap may be kept it from getting marked!! – NoobEditor Nov 21 '17 at 10:55
It does not work when the element to align is longer than the width of the actual width of centered `
`. But I just decrease the offset and it does the work, thanks.
– WesternGun Dec 15 '17 at 08:53
Note that you have to add one div above and one after the deiv you are working on – Luigi Lopez Apr 04 '18 at 04:49
1

This solution is not very good because it makes your div take up 4 columns which won't look good in some screen sizes. When you have a mostly empty page with a centered form in the exact middle, it is best to have set a width to the div. – Calicoder May 02 '18 at 22:39
This does not look right to me: the text is not centered properly, but only using a horizontal offset such that it is placed left-aligned in a centered column – Nico Haase Sep 13 '19 at 15:19
yes, it doesn't center the text, it makes center the div. Use text-center class in this div to make the text centered. – Sid Sep 16 '19 at 07:18

score 62 · Accepted Answer · answered Dec 31 '13 at 06:47

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!

score 8 · Answer 3 · answered Jan 02 '14 at 16:46

The total columns in a row has to add up to 12. So you can do col-md-4 col-md-offset-4. So your breaking up your columns into 3 groups of 4 columns each. Right now you have a 4 column form with an offset by 6 so you are only getting 2 columns to the right side of your form. You can also do col-md-8 col-md-offset-2 which would give you a 8 column form with 2 columns each of space left and right or col-md-6 col-md-offset-3 (6 column form with 3 columns space on each side), etc.

score 6 · Answer 4 · edited May 13 '20 at 07:22

6

I tried this and it worked

<div class="container">
 <div class="row justify-content-center">
  <div class="form-group col-md-4 col-md-offset-5 align-center ">
       <input type="text" name="username" placeholder="Username" >
  </div>
 </div> 
</div>

edited May 13 '20 at 07:22

Ameya

11
4

answered Sep 28 '19 at 16:01

user7288944

91
2
6

score 5 · Answer 5 · answered Sep 27 '18 at 14:21

5

I Guess you are trying to center the form both horizontally and vertically with respect to the any container div.

You don't have to make use of bootstrap for it. Just use the popular method (below) to center the form.

.container{
 position relative;
}
.form{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}

answered Sep 27 '18 at 14:21

sujithuix

264
3
8

got it working without . before form (so: form { // etct} – Tichel Jan 09 '22 at 14:55

score 4 · Answer 6 · answered Dec 31 '13 at 06:48

4

use centered class with offset-6 like below sample.

<body class="container">
<div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
</div>

answered Dec 31 '13 at 06:48

Ammar

686
11
28

6

Where does this `centered` class come from? My copy of Bootstrap 3 does not contain such a class – Nico Haase Sep 13 '19 at 15:20

score 1 · Answer 7 · answered Feb 04 '21 at 01:02

1

Wrap whatever you are trying to center around this div.

<div class="position-absolute top-50 start-50 translate-middle"></div>

https://getbootstrap.com/docs/5.0/utilities/position/

answered Feb 04 '21 at 01:02

John Davis

21
5

This worked form me – Jatin Gera Oct 29 '22 at 06:38

score 0 · Answer 8 · edited Nov 27 '21 at 01:51

Many people advise using col- and col-offset- classes, but it doesn't work right for me, it centers the form only for a certain screen size, but if you change it, the markup slides out.

I found two ways to align form:

Use a custom CSS:

<div class=".center">
  <form>

  </form>
</div>

.center {
  margin: 0 auto;
  width: 100%;
}
form {
  margin: 0 auto;
  width: 500px; /*find your value*/
  text-align: center;
}

Original code

OR just copy a CSS class "justify-content-center" from bootstrap 4, it's very short:

.justify-content-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

And then use it:

<div class="container">
    <div class="row">
        <div class="form-inline justify-content-center">
        </div>
    </div>
</div>

score -1 · Answer 9 · answered Dec 02 '18 at 14:42

if you insist on using Bootstrap, use d-inline-block like below

    <div class="row d-inline-block">
       <form class="form-inline">
         <div class="form-group d-inline-block">
           <input type="email" aria-expanded="false" class="form-control mr-2" 
               placeholder="Enter your email">
           <button type="button" class="btn btn-danger">submit</button>
         </div>
       </form>
     </div>

score -3 · Answer 10 · answered Sep 13 '19 at 02:58

-3

<div class="col-md-4 offset-md-4"> 
put your form here
</div>

answered Sep 13 '19 at 02:58

idirsun

474
6
8

1

The provided answer was flagged for review as a Low Quality Post. Here are some guidelines for [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). This provided answer may be correct, but it could benefit from an explanation. – Trenton McKinney Sep 13 '19 at 04:14
@Rob While it was flagged as low quality, low quality is reserved for answers that are a problem requiring immediate attention, as per the instructions from a moderator. It’s frowned upon to leave code only answers, hence the comment. However, this wouldn’t be removed for being low quality, or even wrong, based upon my experience with declined low quality flags. Additionally, it wouldn’t be removed for being short and it doesn’t fall under under other flags, so it was marked ok. The system doesn’t allow for removing short answers, but they can be downvoted. – Trenton McKinney Sep 13 '19 at 14:20

How to center form in bootstrap 3

10 Answers10

Linked