Bootstrap.pull-right does not affect .navbar-search

Question

I would like to use the .navbar-search class in Boostrap, but I would like to use it with .pull-right. However .pull-right does not seem to affect the search bar, since .navbar-search has a float: left in it and seems to override .navbar-search.

Is there an obvious way to make it work with Bootstrap, or do I just need to add custom css to search on the nab floating line?

HTML (created from HAML in rails application)

<form accept-charset="UTF-8" action="/search" class="navbar-search pull-right" method="get"> <div style="margin:0;padding:0;display:inline"> <input name="utf8" type="hidden" value="✓"> </div> <input class="search-query" id="q" name="q" placeholder="Search" type="text"> </form> 

CSS generated:

 .navbar-search { position: relative; float: left; margin-top: 6px; margin-bottom: 0; } bootstrap.css:236 .pull-right { float: right; } bootstrap.css:525 

Full Nav (Generated from HAML):

 <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> ... <form accept-charset="UTF-8" action="/search" class="pull-right navbar-search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"></div> <input class="search-query" id="q" name="q" placeholder="Search" type="text"> </form> </div> </div> </div> 

Answer 1

After testing the class with the most current bootstrap.css sheet, we found that the .pull-right class is not available in the old bootstrap version, so the update fixes the problem.

Demo of the class used with the last boot list.

Answer 2

Add! important for .pull-right

 .pull-right { float: right !important; }