How Do I Center A Form Within Jumbotron - Bootstrap 4

I'm completely new to Bootstrap so sorry if this is a silly question. I am trying to center a form within a jumbotron: Everything in the jumbotron centers except the form. I've bee

Solution 1:

Bootstrap has a class .center-block that can be used alongside a nested col-*-* sizing to center the form. The responsive col-*-* will help the form adjust based on screen size.

A set width could cause the form to flow out of the container at smaller screen size.

You will also need to remove the float:left; from the inner col-*-* which you can set via a class:

CSS:

.pull-none {
  float: none;
}

HTML:

<divclass="container"><divclass="row"><divclass="col-sm-12 foo"><divclass="jumbotron"><divclass="row"><divclass="col-sm-6 col-lg-4 center-block pull-none bar"><form></form></div></div></div></div></div></div>

You can also, use col-*-offset-* to center elements as well, here is an example setting the form to col-sm-6 and offsetting by 4 to center:

<divclass="row"><divclass="col-sm-12 foo"><divclass="row"><divclass="col-sm-6 col-sm-offset-4 center-block pull-none bar"><form></form></div></div></div></div>

Here is a jsfiddle demonstrating the functionality.

Solution 2:

All it really needs is a set width and an auto margin.

width: 700px;
margin: 0 auto;

However, you can also use bootstrap rows and columns if you wish.

<div class="row">
    <divclass="col-md-12"><form...
    </div></div>