CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Teemu Turkia
Teemu Turkia

Reputation: 100

Bootstrap 3 - Aligning elements of inline form with multiline labels

I'm having a problem aligning elements in my inline form. Form is pretty simple, but one of the columns have a long label, which pushes input element lower than other input elements. What is the correct way to align those input elements horizontally no matter how many lines label is?

JSFiddle

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="form-group col-xs-2">
            <label for="first" class="control-label">This is propably a multiline label</label>
            <input class="form-control" id="first">
        </div>
        <div class="form-group col-xs-4">
            <label for="second" class="control-label">Label</label>
            <input class="form-control" id="second">
        </div>
        <div class="form-group col-xs-6">
            <label for="third" class="control-label">Another</label>
            <input class="form-control" id="third">
        </div>
    </div>
</div>

Upvotes: 2

Views: 1920

Answers (1)

user3805356
user3805356

Reputation: 1

Change in HTML:
Make the grid  4 4 4 in html.


 <div class="container">
    <div class="row">
        <div class="form-group col-xs-4">
            <label for="first" class="control-label">This is propably a multiline label</label>
            <input class="form-control" id="first">
        </div>
        <div class="form-group col-xs-4">
            <label for="second" class="control-label">Label</label>
            <input class="form-control" id="second">
        </div>
        <div class="form-group col-xs-4">
            <label for="third" class="control-label">Another</label>
            <input class="form-control" id="third">
        </div>
    </div>
</div>


Css change:
Set the height of label to accommodate the max label height

 .row {
    vertical-align: bottom;
}
.form-group {
    display: inline-block;
}
.form-group .control-label{
    height:40px;
}

Upvotes: 0

Related Questions