I would like to use the .navbar-search class in Boostrap, but I would like to use it with .pull-right. However .pull-right doesn't seem to affect the search bar as .navbar-search has a float: left in it and that seems to override .navbar-search.
Is there an obvious way to make it work with Bootstrap or do I need to just add custom css for a float right nab search?
HTML (Generated from HAML in a rails app)
<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>
Generated CSS:
.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>
After testing out the class with the most current bootstrap.css
sheet, we found that the .pull-right
class was not available under the older version of the bootstrap so updating that fixed the issue.
Demo of class being used with the latest bootstrap sheet.
Add !important to .pull-right
.pull-right {
float: right !important;
}