form-group Bootstrap

Asked

Viewed 2,826 times

0

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

some way in Bootstrap or should I do on my own in a differentiated CSS?

  • Intuitively, I believe it is row-md-offset-? for col = column and row = line. But you should play an example working on your http://jsfiddle.net problem and post here.

1 answer

3


It has several ways to center horizontally and vertically. You’re talking about "offset" to center horizontally using the grid system Bootstrap, so you better understand the concept because the numbers col-md-? may vary:

Offset concept

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

So if you want to center the column col-md-6 the offset must be from "3", so there are 3 columns for each side, totaling in 12 columns, 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 solutions more professional than others:

  1. Put a DIV of container of your form with the following CSS:

    height: 300px; /* obrigatório para centralizar verticalmente */
    top:0px;
    bottom:0px;
    margin:auto;
    position:absolute
    
  2. Add margin-top:100px to his container or form, adjust the value according to your need, but remembering this is a false vertical center, when in fact you are pushing the object down, and if height varies the distance will always be the same.

  3. There is also the vertical-align:middle, but it works with tables just, maybe there’s some mischief around here.

  • I did exactly as you explained with col-md-? for the horizontal alignment, however I was thinking about the same way you explained vertically, I thought there was some way in the bootstrap, but in the same way I appreciate the help.

Browser other questions tagged

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