Bootstrap 3 Select drop down mis-alignment

Question

I am trying to use an input text box along with a selection box of custom height and width, but I couldn't align them properly:

<form class="form-inline" role="form">
<div class="form-group">
    <input class="form-control" style="width: 600px; height: 30px" />
    <select class="form-control">
        //options here
    </select>
    <button type="submit" class="btn btn-default" id="<portlet:namespace/>productSearchBtn">Search</button>
</div>
</form>

and the output looks something like this

then I set a custom width for Select button [width: 300px],

It seems like the input text box, select drop down and submit button are misaligned.

Please...how can I fix them so both are aligned properly?

Answer 1

You should be looking at Bootstrap 3.0 grid-column structure.

Here's what you are looking for

Markup:

    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
    <div class="col-xs-4 col-md-3">
        <input class="form-control" />
    </div>
    <div class="col-xs-4 col-md-3">
        <select class="form-control">//options here</select>
    </div>
    <div class="col-xs-2 col-md-1">
        <button type="submit" class="btn btn-default" id="<portlet:namespace/>productSearchBtn">Search</button></div>
</div>