How to align controls each other

Question

i am trying to align html controls next to each other without giving huge space and I try to override the bootstrap .css but no luck.

here is my screen looks like:

I have created JSFiddle and also below is my html code.

JSFIDDLE

<div class="row">
  <div class="col-xs-4">
    <div class="form-group1">
      <label class="col-xs-5 control-label" for="">Rows per page:</label>

      <div class="col-xs-4">
        <form action="/SystemAdmin" id="form_header_pager" method="post" name=
        "form_header_pager">
          <select class="form-control" data-val="true" data-val-number=
          "The field PageSize must be a number." data-val-required=
          "The PageSize field is required." id="PageSize" name=
          "PageSizeSelect">
            <option selected="selected" value="10">
              10
            </option>

            <option value="25">
              25
            </option>

            <option value="50">
              50
            </option>

            <option value="ALL">
              ALL
            </option>
          </select>
        </form>
      </div>
    </div>
  </div>

  <div class="col-xs-4">
    <div>
      <div>
        <b>Total records:</b> 0
      </div>
    </div>
  </div>

  <div class="col-xs-4">
    <div class="form-group1">
      <label class="col-xs-5 control-label" for="">Show Records:</label>

      <div class="col-xs-7">
        <form action="/SystemAdmin" id="form_header_show_records" method="post"
        name="form_header_show_records">
          <select class="form-control" id="ShowRecords" name="showrecords">
            <option value="all">
              Show All Records
            </option>

            <option value="invalid">
              Show Invalid Records
            </option>

            <option value="valid">
              Show Valid Records
            </option>
          </select>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

The big spaces within your layout are caused from using the grid column widths. Bootstrap provides inline form element styling and it's recommended to use that instead of the grid columns.

The additional CSS adjustment I had to make was your totals area. Since it didn't have an input or select element, the vertical alignment was slightly off. If you had a row of inputs (as show in Bootstrap's documentation), you wouldn't need any additional CSS here.

You can view this corrected code snippet below. Please note that you must run it in "Full Page" mode to view it correctly. By default the form-inline tool only works in viewports greater than 768px.

.record-results {
    display: inline-block;
    margin-bottom: 3px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-inline">
    <div class="form-group">
        <form action="/SystemAdmin" id="form_header_pager" method="post" name="form_header_pager">
            <label for="PageSize">Rows per page:</label>
            <select class="form-control" data-val="true" data-val-number="The field PageSize must be a number." data-val-required="The PageSize field is required." id="PageSize" name="PageSizeSelect">
                <option selected="selected" value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="ALL">ALL</option>
            </select>
        </form>
    </div>
    <div class="form-group ">
        <span class="record-results"><strong>Total records:</strong> 0</span>
    </div>
    <div class="form-group">
        <form action="/SystemAdmin" id="form_header_show_records" method="post" name="form_header_show_records">
            <label for="showrecords">Show Records:</label>
            <select class="form-control" id="ShowRecords" name="showrecords">
                <option value="all">Show All Records</option>
                <option value="invalid">Show Invalid Records</option>
                <option value="valid">Show Valid Records</option>
            </select>
        </form>
    </div>
</div>

Answer 2

JSBIN

your layout is confused me. So I did another to achieve. The key code:

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Rows per page:</label>
    <select name="" id="" class="form-control">
      <option value="1">test</option>
      <option value="1">test</option>
      <option value="1">test</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Total records:</label>
    <span class="text-danger">99</span>
  </div>
  <div class="form-group">
    <label for="exampleInputName2">Show Records:</label>
    <select name="" id="" class="form-control">
      <option value="1">test</option>
      <option value="1">test</option>
      <option value="1">test</option>
    </select>
  </div>
</form>