I just learned bootstrap and try to centered a form using bootstrap 4 but seems keep failing. I've try put container, margin auto, grid, etc but still failing.
Here is the last code using bootstrap grid.
<form class="col-lg-6 offset-lg-3">
<div class="row">
<input type="text" placeholder="Example input">
<span class="input-group-btn">
<button class="btn btn-primary">Download</button>
</span>
</div>
</form>
and here is the link https://jsfiddle.net/artjia/emsw7t93/
One way to vertically center is to use my-auto . This will center the element within it's flexbox container (The Bootstrap 4 . row is display:flex ). For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.
Select the controls or groups to center. From the Format menu, choose Center in Form.
used justify-content-center
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<form class="col-lg-6 offset-lg-3 ">
<div class="row justify-content-center">
<input type="text" placeholder="Example input">
<span class="input-group-btn">
<button class="btn btn-primary">Download</button>
</span>
</div>
</form>
Use the css class justify-content-center
.
offset-col-* css class doesn t exist anymore in V4 bootstrap. Now it uses flex grid.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center">
<div class="col-6">
<form>
<input type="text" placeholder="Example input">
<span class="input-group-btn">
<button class="btn btn-primary">Download</button>
</span>
</form>
</div>
</div>
</div>
For more info, consult the documentation => https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment
Et voilà.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With