CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Rockstart
Rockstart

Reputation: 2377

Top margin alignment in a row in bootstrap

I have a row in bootstrap with a label,textbox and button.

But the top edges of the label and text box are not getting aligned. Is there any way in bootstrap to fix this.

Code:

<div class="row">
            <div class="col-md-3">

                <h4><span class="label classone control-label">Your Purchased items</span></h4>
            </div>
            <div class="col-md-3 col-md-offset-5">

                <input type="search"
                       class="col-md-12 form-control"
                       placeholder="Enter item code or item name" />
            </div>
            <div class="col-md-1">
                <input type="button"
                       class="form-control btn btn-default btn-xs searchButton"
                       value="Search" />
            </div>

</div>

Fiddle Link: http://jsfiddle.net/ponsakthi/eTJ7j/embedded/result/

Upvotes: 0

Views: 184

Answers (2)

jitendrapurohit
jitendrapurohit

Reputation: 9675

It can be easily done using : h4 { display:inline; }

Upvotes: 0

th0ward
th0ward

Reputation: 285

You could add the below CSS: 

h4 {
line-height:0.2em; 
margin:0px 0px 0px 0px;

}

Note that this would affect all elements using h4, though does align with the other elements on the page.

Upvotes: 1

Related Questions