form-group Bootstrap

Navigation
0

I made a form with Bootstrap, but I need to position it in the middle of the screen. I placed it with col-md-offset-? horizontally, but I need to position it vertically.

Any way in BootStrap or should I do it on my own in a different CSS?

    
asked by anonymous 18.03.2014 / 17:30

1 answer

3

There are several ways to center horizontally and vertically. You're talking about "offset" to center horizontally using Bootstrap's grid system , so it's better to understand the concept because col-md-? numbers may vary:

Concept of offset

Bootstrap GRID by default has 12 columns , see this image with lines of 6 and 12 columns :

So,ifyouwanttocenterthecolumncol-md-6theoffsetshouldbe"3" , so there are 3 columns for each side, totaling 12 columns , it is easier to see the following image:

Vertical Alignment

There are several ways to do this, as you have not put any code, it is difficult to be specific, here are some more professional solutions than others:

  • Place a container DIV of your form with the following CSS: 

    height: 300px; /* obrigatório para centralizar verticalmente */
top:0px;
bottom:0px;
margin:auto;
position:absolute

  • Add% of% to your container or margin-top:100px , adjust the value according to your need, but remember this is a false vertical center, when in fact you are pushing object down, and if height vary the distance will always be the same.

  • There is also form , but it works with vertical-align:middle only, maybe you have some gambiarra here.

    • 18.03.2014 / 18:57
    Gzip compression using Apache server How to make Bootstrap work in IE7