Align Bootstrap 3 Navbar-right and include search box also right-aligned

Question

I'm using bootstrap 3 to build a site and I am having the following problem:

The site design I am working from has a right-aligned navigation that should include a search bar following the final link. Here's a visual: http://imgur.com/eevc0iS

I can only seem to make this work if I keep the navigation left aligned after the logo. I can't get the navigation AND the search bar to be in a nice right-aligned line.

I would like to have it look much the same as I have it now, but with that search bar on the other side.

Here's the code:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
        <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" rel="home" href="#">BRAND</a>
        </div><!-- / .navbar-header--> 
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">link</a></li>
            <li><a href="#">link two</a></li>
            <li><a href="#">link three</a></li>
            <li><a href="#">about</a></li>
      </ul>
      <div class="col-sm-3 col-md-3 pull-right">
            <form class="navbar-form" role="search">
          <div class="input-group">
              <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </div>
          </div>
            </form>
          </div>
    </div><!--/.nav-collapse -->
</div><!-- /. container-->
</div> <!-- /. navbar-->

Answer 1

You do not need to wrap with a div to float right.

Simply use the class names already available, the clue is in the markup .navbar-left and .navbar-right . Use these to float an element left or right within the Navbar and avoid 'divitis'.

You will need to swap the links and search around as we are floating.

JsFiddle

There is also .pull-left and .pull-right that you can use elsewhere on the page for similar floating requirements.

Answer 2

I closed the ul tag after the search-form div. Works perfect.

link

link two

link three

about

  <div class="col-sm-3 col-md-3 pull-right">
        <form class="navbar-form" role="search">
      <div class="input-group">
          <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
        <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
      </div>
        </form>
      </div>
    </ul>
</div><!--/.nav-collapse -->

Answer 3

I use the newest sample on Bootstrap official site to do the test and I think it can be done by a few css rule. Wrap the elements which you want to be right-aligned and set the wrapper's position and right. See the sample.

#right
{
    position:absolute;
    right:0px;
}

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>


    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>

        <div id="right">
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
            </div>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

JSFIDDLE

Answer 4

Problem : Align search box and button

Solution : Below code was part of ruby html.erb file.

<!-- Search form -->
  <%= form_tag "", url: students_path, class:"form-inline my-2 my-lg-0", role: "search", method: :get do %>
      <div class="input-group">        
        <%= text_field_tag :search, @search_term, class: "form-control mr-sm-2", placeholder: "Search" %>
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </div>
  <% end %>
  <!-- Search form -->

Note : input-group solved my problem.