Centralize form

Asked

Viewed 490 times

1

I have a form and 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

  • You want to center without using the style, that’s it?

1 answer

1

Bootstrap 2.3.x

From what I could see by the classes span in their divsyou are using Boostrap 2. Before replying I strongly recommend that you abandon this version of the framework for being too outdated in my opinion. There is already version 3 of the framework and 4, which is in alpha version and with an open beta.

To center a form like yours just add the class .text-center offered by Bootstrap at div containing the class .span12, 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>

Browser other questions tagged html bootstrap

You are not signed in. Login or sign up in order to post.