pull-right in navbar not working

Question

I use Asp.net mvc and bootstrap , I tried to put search bar to the right of the navbar by pull-right and float-right but it's not working seacrh bar stays next to other elements on the left of the navbr.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-inverse">
            <div style="">
                <div class="navbar-header">
                    
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    @Html.ActionLink("RAWAN", "Index", "Home")

                </div>
                <!-- Note the new id: #bs-example-navbar-collapse-2 -->
                <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2">
                    <ul class="nav navbar-nav" style="color:white">
                        <li>@Html.ActionLink("News", "About", "Home")</li>
                        <li>@Html.ActionLink("Supervisors", "Contact", "Home")</li>
                        <li>@Html.ActionLink("Senior Projects", "Contact", "Home")</li>
                        <li>@Html.ActionLink("About me", "Contact", "Home")</li>
                        <!-- Search bar -->
                          <li class="pull-right" style="padding-right:-50px;">
        <div class=" float-right pull-right">
            <form class="navbar-form pull-right" role="search" >
                <div class="input-group pull-right">
                    <input type="text" class="form-control pull-right" placeholder="Search" name="srch-term" id="srch-term">
                    <div class="input-group-btn">
                        <button class="btn btn-default pull-right" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                    </div>
                </div>
            </form>
        </div>
    </li>        
                    </ul>
                </div>
            </div>
        </div>

score 1 · Accepted Answer · answered Feb 10 '18 at 13:13

The ul has css classes nav and navbar-nav, which gives it the float: left styling, which aligns it with the left of its container, and makes the ul wrap its content without leaving any space between elements unless explicitly instructed to. In order to see the effects of the float: right on the search bar, try placing that div in the same container as the ul like so:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="navbar navbar-inverse">
        <!--  <div class="container"> -->
        <div style="">
            <div class="navbar-header">
                <!-- Note: data-target="#bs-example-navbar-collapse-2" -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("RAWAN", "Index", "Home")

            </div>
            <!-- Note the new id: #bs-example-navbar-collapse-2 -->
            <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2">
                <ul class="nav navbar-nav" style="color:white">
                    <li>@Html.ActionLink("News", "About", "Home")</li>
                    <li>@Html.ActionLink("Supervisors", "Contact", "Home")</li>
                    <li>@Html.ActionLink("Senior Projects", "Contact", "Home")</li>
                    <li>@Html.ActionLink("About me", "Contact", "Home")</li>
                </ul>
                <!-- Search bar -->
                <div class=" float-right pull-right">
                    <form class="navbar-form pull-right" role="search" >
                        <div class="input-group pull-right">
                            <input type="text" class="form-control pull-right" placeholder="Search" name="srch-term" id="srch-term">
                            <div class="input-group-btn">
                                <button class="btn btn-default pull-right" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

score 0 · Answer 2 · answered Feb 10 '18 at 13:26

You need to place the search bar outside of the <ul> and place it in the same container as the <ul>. Additionally, you only need one pull-right in the top level container for your search bar.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse">
  <div style="">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">RAWAN</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
      
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>


    </div>
    <!-- Note the new id: #bs-example-navbar-collapse-2 -->
    <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2">
      <ul class="nav navbar-nav" style="color:white">
        <li><a href="#">News</a></li>
        <li><a href="#">Supervisors</a></li>
        <li><a href="#">Senior Projects</a></li>
        <li><a href="#">About Me</a></li>
      </ul>
      <!-- Search bar -->

      <div class="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>
  </div>

pull-right in navbar not working

2 Answers2