How do I center a form within Jumbotron - Bootstrap 4

Question

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 th

Answer 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:

<div class="container">
    <div class="row">
        <div class="col-sm-12 foo">
            <div class="jumbotron">
                <div class="row">
                    <div class="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:

<div class="row">
    <div class="col-sm-12 foo">
        <div class="row">
          <div class="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.

Answer 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">
    <div class="col-md-12">
        <form...
    </div>
</div>