Center form

Asked

Viewed 93 times

0

Would anyone know how to center a form within a container with *bootstrap?

Example:

<div class="container">

    <div class="row">
        <div class="col-md-12">
            <!-- Centralizar este form -->
            <form>
            ....
            </form>
        </div>
    </div>
</div>
twitter-bootstrap

  • Want to center the whole block of form or its contents(labels, inputs ...)?

  • the whole block

2 answers

2


One way to do what you want is by using the Offsetting Columns, so you can control the size of the fields and the margin to the left of the form, see the example below:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-xs-8 col-xs-offset-4">
            <!-- Centralizar este form -->
            <form>
              <h1>FORM</h1>
              <div class="row">
                <div class="form-group col-xs-4">
                  <label>Nome</label>
                  <input type="text" class="form-control"/>
                </div>
              </div>
              <div class="row">
                <div class="form-group col-xs-2">
                  <label>Idade</label>
                  <input type="text" class="form-control"/>
                </div>
              </div>
            </form>
        </div>
    </div>
</div>

NOTE: For each screen size (Xs,Sm,Md,lg), you will have to configure one way, so test all sizes.

  • 1

    In fact it is not centralized, what the class col-*-offset-* is to give a margem on the left in relation to the parent element, which you didn’t even mention in the answer! Serves to move elements to the right.

  • @Correct Igormello, it does not center, increases the left margin by moving the elements to the right that in a certain way "centralizes" the form on the screen, what I believe is the main objective of it.

  • 1

    Okay, meeting his need, that’s the case!

-1

If you use an HTML version earlier than 5, you can use:

<center></center>

If you use HTML5, you must use CSS:

margin-left: auto;
margin-right: auto;

Browser other questions tagged twitter-bootstrap

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