Set bootstrap form to center

Question

so i have this simple bootstrap login page

<?php
    include 'include/global.php';
    include 'include/function.php';

if (isset($_GET['action']) && $_GET['action'] == 'index') {

?>

        $('title').html('Login');

        function login_selectuser(device_name, sn) {

            $("#button_login").attr("href","finspot:FingerspotVer;"+$('#select_scan').val())

        }
    </script>

    <div class="row">
        <div class="col-md-4">

        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label for="user_name">Username</label> 
                <select class="form-control" onchange="login_selectuser()" id='select_scan'>
                    <option selected disabled="disabled"> -- Select Username -- </option>
                        <?php               
                            $strSQL = "SELECT a.* FROM demo_user AS a JOIN demo_finger AS b ON a.user_id=b.user_id";
                            $result = mysql_query($strSQL);

                            while($row = mysql_fetch_array($result)){

                                $value = base64_encode($base_path."verification.php?user_id=".$row['user_id']);

                                echo "<option value=$value id='option' user_id='".$row['user_id']."' user_name='".$row['user_name']."'>$row[user_name]</option>";
                            }               
                        ?>
                </select>
            </div>
            <a href="" id="button_login" type="submit" class="btn btn-success">Login</a>
        </div>
        <div class="col-md-4">

        </div>
    </div>

the problem is the form position is on the top of page.. i want to put my form in the middle of the page...can u guys help me with this problem?

@Omi It appears that the OP is asking about _vertical_ centering. — Don't Panic, Mar 20 '17 at 21:00
Possible duplicate of [How to center align vertically the container in bootstrap](http://stackoverflow.com/questions/22196587/how-to-center-align-vertically-the-container-in-bootstrap) — Omi, Mar 20 '17 at 21:01
@sasule Have you looked through any of the other questions here about vertical centering in bootstrap? [There are some great answers here.](http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3) — Don't Panic, Mar 20 '17 at 21:03
Also, this is beside the point of this question, but did you realize you don't actually have a `
` here? — Don't Panic, Mar 20 '17 at 21:06
Possible duplicate of [Best way to center a
on a page vertically and horizontally?](http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) — Joe Niland, Mar 20 '17 at 23:17

score 0 · Answer 1 · edited May 23 '17 at 10:30

This question is essentially a duplicate of this question.

To vertically center your form, you would want to use standard CSS vertical centering. Bootstrap does not have an out of the box vertical content centering class.

That being said, you can use features like Jumbotron to get you a good part of the way there the bootstrap way.

The jumbotron will just give you a nice framing structure to wrap your form in, and then you would need to apply either flexbox (still not universally supported, but very clean) or the traditional CSS approach to vertical centering, which is far hackier, but better supported.

Personally, inside or outside of bootstrap, I have used Chris Coyier's approach and benefitted from it.

First, make sure you actually have a form tag wrapping your whole form.

Then put a custom class on your .form-group element.

Then you can apply this:

The non-flexbox way I have used is:

form.FORM_TAG_WRAPPER_CLASS {
  position: relative;
}
.FORM_GROUP_CUSTOM_CLASS {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

and the flexbox way is this:

form.FORM_TAG_WRAPPER_CLASS {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

These approaches and more are documented here.

Set bootstrap form to center

1 Answers1