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    lt div class  container  gt       lt div class  row  gt           lt div class  col-md-4 col-md-offset-6  gt               lt h2 gt Log in lt  h2 gt                  lt div gt                   lt table gt                       lt tr gt                           lt td gt 1 lt  td gt                           lt td gt 1 lt  td gt                       lt  tr gt                       lt tr gt                           lt td gt 2 lt  td gt                           lt td gt 2 lt  td gt                       lt  tr gt                       lt tr gt                           lt td gt 3 lt  td gt                           lt td gt 3 lt  td gt                       lt  tr gt                    lt  table gt                lt  div gt            lt  div gt       lt  div gt   lt  div gt

User · Accepted Answer

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     lt div class  container center div  gt    but i feel that by default container is centered in BS

User · Answer

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    lt div class  col-md-4 col-md-offset-4  gt my div here lt  div gt    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

User · Answer

if you insist on using Bootstrap  use d-inline-block like below       lt div class  row d-inline-block  gt          lt form class  form-inline  gt            lt div class  form-group d-inline-block  gt              lt input type  email  aria-expanded  false  class  form-control mr-2                  placeholder  Enter your email  gt              lt button type  button  class  btn btn-danger  gt submit lt  button gt            lt  div gt          lt  form gt        lt  div gt

User · Answer

use centered class with offset-6 like below sample    lt body class  container  gt   lt div class  col-lg-1 col-offset-6 centered  gt       lt img data-src  holder js 100x100  alt      gt   lt  div gt

User · Answer

lt div class  col-md-4 offset-md-4  gt   put your form here  lt  div gt

User · Answer

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

User · Answer

I tried this and it worked   x000D   x000D   lt div class  container  gt  x000D    lt div class  row justify-content-center  gt  x000D     lt div class  form-group col-md-4 col-md-offset-5 align-center   gt  x000D          lt input type  text  name  username  placeholder  Username   gt  x000D     lt  div gt  x000D    lt  div gt   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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   lt div class  quot  center quot  gt     lt form gt      lt  form gt   lt  div gt    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  quot justify-content-center quot  from bootstrap 4  it s very short   justify-content-center       -ms-flex-pack  center  important      justify-content  center  important     And then use it   lt div class  quot container quot  gt       lt div class  quot row quot  gt           lt div class  quot form-inline justify-content-center quot  gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

Wrap whatever you are trying to center around this div   lt div class  quot position-absolute top-50 start-50 translate-middle quot  gt  lt  div gt   https   getbootstrap com docs 5 0 utilities position

[html] How to center form in bootstrap 3

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3