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

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

<div class="container-fluid h-100 bg-light text-dark">
  <div class="row justify-content-center align-items-center">
    <h1>Form</h1>    
  </div>
  <hr/>
  <div class="row justify-content-center align-items-center h-100">
    <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3">
      <form action="">
        <div class="form-group">
          <select class="form-control">
                    <option>Option 1</option>
                    <option>Option 2</option>
                  </select>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" />
        </div>
        <div class="form-group text-center">
          <div class="form-check-inline">
            <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 1
  </label>
          </div>
          <div class="form-check-inline">
            <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 2
  </label>
          </div>
          <div class="form-check-inline">
            <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio" disabled>Option 3
  </label>
          </div>
        </div>
        <div class="form-group">
          <div class="container">
            <div class="row">
              <div class="col"><button class="col-6 btn btn-secondary btn-sm float-left">Reset</button></div>
              <div class="col"><button class="col-6 btn btn-primary btn-sm float-right">Submit</button></div>
            </div>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>

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

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

[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