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
3 Answers
<link href="" 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="" 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 =>
Et voilà.
- Columns go inside rows, not the other way around
- The offset properties are from Bootstrap 3 not Bootstrap 4. You should use margin offsets instead
Such:
<form class="row">
<div class="col-lg-6 ml-auto">
