Place form in the center

Navigation
0

Example: 

<div class="container">

    <div class="row">
        <div class="col-md-12">
            <!-- Centralizar este form -->
            <form>
            ....
            </form>
        </div>
    </div>
</div>
    
asked by anonymous 19.04.2016 / 21:19

2 answers

2

One way to do whatever you want is to use 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><scriptsrc="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 that for each screen size (xs, sm, md, lg), you will have to configure it in a way, so test all sizes.

/ p>     

19.04.2016 / 21:59
-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;
    
20.04.2016 / 01:05
Stretch canvas without interpolating image What is the "url" option in the app / config / app.php configuration file