How to apply the same style to all controls in form-inline?

Vote count:

0

Here is my partial bootstrap code. The form lets you search a person by first name and last name:

<div style="text-align:right">
  <div class="form-inline">
    <div class="form-group">
        <label for="Search">Search</label>
    </div>
    <div class="form-group">
            <input class="form-control text-box single-line" id="FirstName" name="FirstName" placeholder="First Name" type="text" value="" />
    </div>

    <div class="form-group">
            <input class="form-control text-box single-line" id="LastName" name="LastName" placeholder="Last Name" type="text" value="" />
    </div>

    <div class="form-group">
        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
    </div>
  </div>
</div>

The topmost div helps the set of inner controls to be shown on the right side of the web page (as desired).

When the viewport is wide enough, all the controls are displayed in one line as they are supposed to be.

However, when the viewport width is reduced, the text-box controls line up vertically (as expected) but the "Search" label and the "search" button stay on the right of the page.

This does not happen if I remove the topmost div. However, I do need it to display the controls on the right side of the page.

I am wondering if there is a way to make all the controls in the set work consistently. Regards.

asked 31 secs ago

Peter

1,567

How to apply the same style to all controls in form-inline?