Align the form to the center in Bootstrap 4

Question

I am trying to align the form to the center and keep it responsive  I have tried several ways but no success  I am trying to center all the text and the form  I am using Bootstrap v4  I am not sure if that helps      HTML    lt section id  cover  gt        lt div id  cover-caption  gt            lt div id  container  gt                lt div class  col-sm-10 col-sm offset-1  gt                    lt h1 class  display-3  gt Welcome to Bootstrap 4 lt  h1 gt                    lt div class  info-form  gt                    lt form action    class  form-inline  gt                       lt div class  form-group  gt                           lt label class  sr-only  gt Name lt  label gt                           lt input type  text  class  form-control  placeholder  Jane Doe  gt                       lt  div gt                       lt div class  form-group  gt                           lt label class  sr-only  gt Email lt  label gt                           lt input type  text  class  form-control  placeholder  jane doe example com  gt                       lt  div gt                       lt button type  submit  class  btn btn-success   gt okay  go  lt  button gt                   lt  form gt                   lt  div gt                   lt br gt                    lt a href   nav-main  class  btn btn-secondary-outline btn-sm  role  button  gt  amp darr  lt  a gt                lt  div gt            lt  div gt        lt  div gt    lt  section gt    CSS   html  body   height  100       cover     background   222 url     img stars jpg   center center no-repeat    background-size  cover    color  white    height  100     text-align  center    display  flex    align-items  center        cover-caption     width  100

User · Answer

lt div class  d-flex justify-content-center align-items-center container   gt        lt div class  row   gt             lt form action    gt               lt div class  form-group  gt                   lt label for  inputUserName  class  control-label  gt Enter UserName lt  label gt                   lt input type  email  class  form-control  id  inputUserName  aria-labelledby  emailnotification  gt                   lt small id  emailnotification  class  form-text text-muted  gt Enter Valid Email Id lt  small gt               lt  div gt               lt div class  form-group  gt                   lt label for  inputPassword  class  control-label  gt Enter Password lt  label gt                   lt input type  password  class  form-control  id  inputPassword  aria-labelledby  passwordnotification  gt                lt  div gt           lt  form gt        lt  div gt    lt  div gt

User · Answer

All above answers perfectly gives the solution to center the form using Bootstrap 4  However  if someone wants to use out of the box Bootstrap 4 css classes without help of any additional styles and also not wanting to use flex  we can do like this   A sample form    HTML   lt div class  container-fluid h-100 bg-light text-dark  gt     lt div class  row justify-content-center align-items-center  gt       lt h1 gt Form lt  h1 gt         lt  div gt     lt hr  gt     lt div class  row justify-content-center align-items-center h-100  gt       lt div class  col col-sm-6 col-md-6 col-lg-4 col-xl-3  gt         lt form action    gt           lt div class  form-group  gt             lt select class  form-control  gt                       lt option gt Option 1 lt  option gt                       lt option gt Option 2 lt  option gt                     lt  select gt           lt  div gt           lt div class  form-group  gt             lt input type  text  class  form-control    gt           lt  div gt           lt div class  form-group text-center  gt             lt div class  form-check-inline  gt               lt label class  form-check-label  gt       lt input type  radio  class  form-check-input  name  optradio  gt Option 1    lt  label gt             lt  div gt             lt div class  form-check-inline  gt               lt label class  form-check-label  gt       lt input type  radio  class  form-check-input  name  optradio  gt Option 2    lt  label gt             lt  div gt             lt div class  form-check-inline  gt               lt label class  form-check-label  gt       lt input type  radio  class  form-check-input  name  optradio  disabled gt Option 3    lt  label gt             lt  div gt           lt  div gt           lt div class  form-group  gt             lt div class  container  gt               lt div class  row  gt                 lt div class  col  gt  lt button class  col-6 btn btn-secondary btn-sm float-left  gt Reset lt  button gt  lt  div gt                 lt div class  col  gt  lt button class  col-6 btn btn-primary btn-sm float-right  gt Submit lt  button gt  lt  div gt               lt  div gt             lt  div gt           lt  div gt          lt  form gt       lt  div gt     lt  div gt   lt  div gt    Link to CodePen  https   codepen io anjanasilva pen WgLaGZ  I hope this helps someone  Thank you

User · Answer

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     lt section id  quot cover quot  gt       lt div id  quot cover-caption quot  gt           lt div id  quot container quot  class  quot container quot  gt               lt div class  quot row quot  gt                   lt div class  quot col-sm-10 offset-sm-1 text-center quot  gt                       lt h1 class  quot display-3 quot  gt Welcome to Bootstrap 4 lt  h1 gt                       lt div class  quot info-form quot  gt                           lt form action  quot  quot  class  quot form-inline justify-content-center quot  gt                               lt div class  quot form-group quot  gt                                   lt label class  quot sr-only quot  gt Name lt  label gt                                   lt input type  quot text quot  class  quot form-control quot  placeholder  quot Jane Doe quot  gt                               lt  div gt                               lt div class  quot form-group quot  gt                                   lt label class  quot sr-only quot  gt Email lt  label gt                                   lt input type  quot text quot  class  quot form-control quot  placeholder  quot jane doe example com quot  gt                               lt  div gt                               lt button type  quot submit quot  class  quot btn btn-success  quot  gt okay  go  lt  button gt                           lt  form gt                       lt  div gt                       lt br gt                        lt a href  quot  nav-main quot  class  quot btn btn-secondary-outline btn-sm quot  role  quot button quot  gt   lt  a gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  section gt

[html] Align the form to the center in Bootstrap 4

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to bootstrap-4

Examples related to twitter-bootstrap-4