How to center a inline form bootstrap 3

Question

I am trying to make a search bar with multiple options and want to center it

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div id="search_panel">
  <div class='container'>
    <form class="form-inline" role="form">
      <!-- SEARCH PLACE -->
      <div class="form-group">
        <label class="sr-only" for="inputEmail">search</label>
        <input id="where" name="where" type="search" placeholder="where you want to visit ...." class="form-control input-md" required="">
      </div>
      <!-- CHECK-IN DATE -->
      <div class="form-group" id="start">
        <i class="fa fa-calendar fa-2x"></i>
        <input type='text' placeholder="Check-In Date" class="form-control" id='datepicker-start' />
      </div>
      <div class="form-group" id="end">
        <i class="fa fa-calendar fa-2x"></i>
        <input type='text' placeholder="Check-Out Date" class="form-control" id='datepicker-end' />
      </div>
      <!-- Button Drop Down -->
      <div class="form-group">
        <label class="sr-only" for="inputEmail">Select Basic</label>
        <select id="selectbasic" name="selectbasic" class="form-control">
          <option value="1">Option one</option>
          <option value="2">Option two</option>
        </select>
      </div>
    </form>
  </div>
</div>

Answer 1

you can also combine classes

if you change your defnition from

<form class="form-inline" role="form">

to <form class="form-inline text-center" role="form"> it should work!

Id like to keep as much as I can plain bootstrap before I add extra styles

and bootstrap comes with native alignment classes which can be found here: http://getbootstrap.com/css/#type-alignment

HTH