Center a form for all devices: bootstrap/css

Question

I centered my form for laptop, with this .css code:

form{
  position: absolute;
  top: 40%;
  left: 20%;
}

And here is the result:

this

But now, when I whatch it on my smartphone, I get this:

this

Which is not centered.

How would you center a form for every devices in Bootstrap/CSS ?

score 2 · Answer 1 · edited May 23 '17 at 12:10

Add this class next to the row class: "justify-content-center". And delete "left: 20%" Like this:

<div class="container">
    <form>
        <div class="row justify-content-center">
            <input type="text">
            <input type="text">
            <input type="text">
        </div>
    </form>
</div>

However, it won't success with absolute position. You may change that with relative position. Or check these: How to center absolutely positioned element in div? or How to center a "position: absolute" element

score 0 · Answer 2 · answered May 01 '17 at 06:03

0

Add (left and right) margin: auto.

form{
 margin: auto;
}

If you need top/bottom margin, set it like margin: 5px auto

answered May 01 '17 at 06:03

IiroP

1,067
2
10
14

score 0 · Answer 3 · answered May 01 '17 at 06:33

This will center the form using your current setup:

form {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  margin: auto;
}

But I would personally go with Atreidex's solution using existing Bootstrap classes (well, I personally wouldn't use Bootstrap, but if I already were using it, I would make use of its available classes rather than re-inventing the wheel - isn't that why you're using Bootstrap?).

Center a form for all devices: bootstrap/css

3 Answers3