Center form

Question

Center form

Navigation

#1 by (1 votes)

1

I have a form and I need to centralize it using only the classes offered by bootstrap .

My form:

<div class="container-fluid">
    <div class="row">
        <div class="span12" style="text-align:center; margin: 0 auto;">
            <div class ="span8">
                <form class="form-horizontal" style="width: 25%; margin: 0 auto;" action="index.php" method="POST">
                    <input type="text" class="form-control" name="email" placeholder="Email"><br>
                    <input type="password" class="form-control" name="senha" placeholder="Senha"><br>
                    <button type="submit" class="btn btn-lg btn-default">Entrar</button><p>
                    <input type= "hidden" name="entrar" value="login"><p>
                    <a href="cadastro.php" button type="submit" class="btn btn-lg btn-default">Cadastre-se</button></a>
                </form>
            </div>
        </div>
    </div>
</div>

html bootstrap

asked by anonymous 10.09.2017 / 20:27

1 answer

jQuery.get executes after all rest of the function Receive user vector in C

score 1 · Answer 1

Bootstrap 2.3.x

From what I've been able to observe for span classes in their divs you're using Boostrap 2. Before you respond I seriously recommend that you abandon this version of the framework because it's far outdated in my opinion. There is already version 3 of the framework and 4, which is in the alpha version and with an open beta.

For you to centralize a form like yours, simply add the .text-center class provided by Bootstrap to div that contains the .span12 class, note this small example I made:

.margintop{
  margin-top:5px;
}

<!DOCTYPE html>
<html>
    <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
    </head>
    <body>
      <div class="container">
        <div class="row">
            <div class="span12 text-center"> <!-- Centralização do form -->
                <form class="form-horizontal">
                  <input type="text" class="form-control margintop" name="email" placeholder="Email"> <br>
                   <input type="password" class="form-control margintop" name="email" placeholder="Senha"> <br>
                   <button class="btn btn-lg btn-default margintop">Entrar</button>
                </form>
            </div>
        </div>
      </div>
    </body>
</html>