Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to center form using bootstrap 4

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/

like image 595
bakaio Avatar asked Oct 04 '17 08:10

bakaio


People also ask

How do I center a form vertically in bootstrap?

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.

How do you center a form control?

Select the controls or groups to center. From the Format menu, choose Center in Form.


2 Answers

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>
like image 157
Farhad Bagherlo Avatar answered Sep 30 '22 07:09

Farhad Bagherlo


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à.

like image 44
rdhainaut Avatar answered Sep 30 '22 06:09

rdhainaut