HOw to do search like this one?

I came up with a pure CSS solution, as oppose to the JavaScript method used for the example you provided. Basically I used the :focus pseudo-class to change the width and added a CSS transition to animate it. You can view the codepen to see the results. Either way, here's the code. Just note, that the stuff relating to the top-bar class was just to give a container to work with. As long as the form is floated to the right the effect should work like in your example. (just watch out for collapsing containers).

<div class="top-bar">
  <div class="left">

  </div>

  <div class="right">
    <form class="search-form">
      <input type="text" name="search" placeholder="Search" />
    </form>  
  </div>
</div>  

.top-bar {
  background: lightblue;
  padding: 0.4rem;
}
.top-bar:before {
  content: "";
  display: table;
}
.top-bar:after {
  content: "";
  display: table;
  clear:both;
}
.search-form {
  float: right;
}
.search-form input[name="search"] {
  border-radius: 0.3rem;
  border: 1px solid #aaa;
  padding: 0.5rem 0.4rem;
  font-size: 1.1rem;
  width: 180px;
  transition: width 0.3s ease-in-out;
}

.search-form input[name="search"]:focus {
  width: 300px;
  outline: 0;
}

Now, the example you pointed to uses JavaScript to add width values as inline styles. So while this solution pretty much accomplishes the same thing, it's not what is done in that bootstrap theme example.