Jared Jared - 4 days ago 5
CSS Question

Bootstrap Labels and Input not aligned horizontally

I found an interesting problem when playing around with Bootstrap labels and inputs when in a form-inline class. The Labels seem to be adjusted slightly higher than the inputs.
enter image description here

I'm just using basic razor html helpers to produce these inputs and an anchor tag for the Search.

<div class="form-inline">
@Html.LabelFor(x => x.StartDate, "From:", new { @class = "form-control input-sm" })
@Html.TextBoxFor(x => x.StartDate, "MM-DD-YYYY", new { @class = "form-control input-sm", @id = "start-date" })
@Html.LabelFor(x => x.EndDate, "To:", new { @class = "form-control input-sm" })
@Html.TextBoxFor(x => x.EndDate, "MM-DD-YYYY", new { @class = "form-control input-sm", @id = "end-date" })
<a id="searchBtn" class="btn btn-primary">Search</a>




Willing to propose new solutions to resolve this inline form group. But to me this looks annoying and unpleasing :(

Answer

Add some custom style, without bootstrap's default styling. Check this example:

<form>
<label for="email">Email address:</label>
<input type="email" class="xinput" id="email">

<label for="pwd">Password:</label>
<input type="password" class="xinput" id="pwd">

<button type="submit" class="xsubmit">Submit</button>
 </form>

CSS:

label{border: 1px solid #ccc;
 height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;}
.xinput{height: 34px;
border: 1px solid #ccc;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;}
.xsubmit{height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555; border: none; outline: none; background-color: #008cba; color:    white;}

http://jsfiddle.net/elance/52VtD/15654/

Comments