Search code examples
formsbootstrap-4vertical-alignment

How can i vertical align center forms


Before i ask i must first say i tried vertical methods align, it didnt work so i must post this problem of mine.Sry it might be trivial question,but im struggling with it.

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      One of three columns
    </div>
    <div class="col-sm-6">
        <section>
        <h1>Signup</h1>
            <form action="includes/signup.inc.php" method="post">
                <input type="text" name="uid" placeholder="Username">
                <input type="text" name="mail" placeholder="E-mail">
                <input type="password" name="pwd" placeholder="Password">
                <input type="password" name="pwd-repeat" placeholder="Repeat password">
                <button class="btn btn-default" type="submit" name="signup-submit">Signup</button>
            </form>
        </section>
    </div>
    <div class="col-sm-3">
      One of three columns
    </div>
  </div>
</div>

Solution

  • add form-control class with each input element.

    <input class="form-control" type="text" name="uid" placeholder="Username">
    <input class="form-control" type="text" name="mail" placeholder="E-mail">
    <input class="form-control" type="password" name="pwd" placeholder="Password">
    <input class="form-control" type="password" name="pwd-repeat" placeholder="Repeat password">
    

    enter image description here