Three area Nav bar in Bootstrap

Question

I'm trying to create a bootstrap nav bar with three areas. Left, Middle, and Right.

Left side will have a user avatar portrait bar, middle will be a search bar, and right will be some buttons.

I'm having trouble centering the search bar. Any ideas on how to implement this? I would post my attempt, but it's become so cluttered its quite unreadable now.

After a few edits and help from those below. I have done this. http://www.bootply.com/azFiegnAoO

But now there is a small problem, the width of the navbar set at 100% is wider than the page and extends a page a bit to the right.

Answer 1

set the width of the left and right part of the navbar to be equal and add margin: 0 auto to the css of the navbar