Bootstrap form not in the center of the div - html

Question

I have a bootstraap form where two field I have added the class .d-inline-block so that it comes next to each other and I have another field where I have not added the class so that It comes below of the two field.
I want this to be in the center of the div which I am not able to do it. Only the first two fields are coming to center but not the last div.
Can someone point out the mistake?
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );
.d-inline-block {
width: 40%;
}
.message {
width: 80%;
}
.formClass {
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
<form class="formClass ">
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="nameInput">
<div class="form-control-placeholder"> Name </div>
</div>
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
<div class="form-group message">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
</form>
https://jsfiddle.net/97avbgsq/

Answer 1

Add a class to the third DIV and give that display: inline-block;:
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );
.d-inline-block {
width: 40%;
}
.message {
width: 80%;
}
.formClass {
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
.x {
display: inline-block;
}
<form class="formClass ">
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="nameInput">
<div class="form-control-placeholder"> Name </div>
</div>
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
<div class="form-group message x">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
</form>
https://jsfiddle.net/tyuxpzk9/1/

Answer 2

While you're free to create your own custom CSS classes to control form field sizes and position, I would like to suggest using the built in grid system column classes to control the size and position of the input fields.
Bootstrap 4 Grid System
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
<form>
<div class="row">
<div class="form-group col-sm-4 offset-sm-2">
<input type="text" class="form-control" id="nameInput">
<label class="d-block text-center" for="nameInput">Name</label>
</div>
<div class="form-group col-sm-4">
<input type="text" class="form-control" id="phoneInput">
<label class="d-block text-center" for="phoneInput">Phone</label>
</div>
</div>
<div class="row">
<div class="form-group col-sm-8 offset-sm-2">
<input type="text" class="form-control" id="phoneInput">
<label class="d-block text-center" for="phoneInput">Phone</label>
</div>
</div>
</form>

Answer 3

Using bootstrap 4, you can use the helper classes .d-flex .flex-wrap .justify-content-center on the parent.
.d-inline-block {
width: 40%;
}
.message {
width: 80%;
}
.formClass {
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="formClass d-flex flex-wrap justify-content-center">
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="nameInput">
<div class="form-control-placeholder"> Name </div>
</div>
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
<div class="form-group message">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
</form>
But if you want to use your original code, to horizontally center a block element with a width, use margin-left: auto; margin-right: auto or margin: auto for short if that works for you. You can also do that using the .mx-auto bootstrap helper class.
.d-inline-block {
width: 40%;
}
.message {
width: 80%;
}
.formClass {
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="formClass ">
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="nameInput">
<div class="form-control-placeholder"> Name </div>
</div>
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
<div class="form-group message mx-auto">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
</form>