How to align the content of the column to the center vertically? Bootstrap

Question

Hello i need to align the content of the column to the center vertically. This is the image of my form

And code:

<div class="row">
    <div class="form-group col-lg-2">
            <label translate="global.field.name" for="name">Name</label>
            <input type="text" class="form-control" />
    </div>
    <div class="form-group col-lg-2">
            <label translate="global.field.code" for="code">Code</label>
            <input type="text" class="form-control" />
    </div>
    <div class="form-group col-lg-2">
            <label translate="global.field.translation" for="translation">Translation</label>
            <input type="text" class="form-control" />
    </div>
    <div class="form-group col" >
            <button><span class="glyphicon glyphicon-remove"></span></button>
            <button><span class="glyphicon glyphicon-search"></span></button>
    </div>

How to align the last column to the center vertically?

it already is since div has no height set – charlietfl Oct 31 '15 at 12:55 — charlietfl, Oct 31 '15 at 12:55

score 1 · Answer 1 · answered Oct 31 '15 at 13:06

You could use flexbox like this..

.vcenter {
    display: flex;
    align-items: center;
}

<div class="row vcenter">
    <div class="form-group col-lg-2">
            <label translate="global.field.name" for="name">Name</label>
            <input type="text" class="form-control" />
    </div>
    <div class="form-group col-lg-2">
            <label translate="global.field.code" for="code">Code</label>
            <input type="text" class="form-control" />
    </div>
    <div class="form-group col-lg-2">
            <label translate="global.field.translation" for="translation">Translation</label>
            <input type="text" class="form-control" />
    </div>
    <div class="form-group col-lg-1" >
            <button class="btn btn-default"><span class="glyphicon glyphicon-remove"></span></button>
            <button class="btn btn-default"><span class=" glyphicon glyphicon-search"></span></button>
    </div>
 </div>

http://codeply.com/go/Ak9iMhZAuH

solved my problem with this answer – Vítor Nóbrega Oct 31 '15 at 14:09 — Vítor Nóbrega, Oct 31 '15 at 14:09
why did you accept the other answer? – Carol Skelly Oct 31 '15 at 16:37 — Carol Skelly, Oct 31 '15 at 16:37
Sorry, Your answer solves my problem – Vítor Nóbrega Oct 31 '15 at 21:20 — Vítor Nóbrega, Oct 31 '15 at 21:20

uksz · Accepted Answer · 2015-10-31T12:54:31.987

0

Add this to the div you want to align:

.vcenter {
display: inline-block;
vertical-align: middle;
float: none;}

edited Oct 31 '15 at 12:54

answered Oct 31 '15 at 12:50

uksz

18,239
30
94
161

1

question is asking about vertical alignment, not horizontal – charlietfl Oct 31 '15 at 12:51

How to align the content of the column to the center vertically? Bootstrap

2 Answers2