Allocate search box in standard Bootstrap Navbar

Question

I’m having trouble allocating a search box on bootstrap. I’m trying to allocate it to navbar standard, top right aligned. My intention is that at each screen, I can modify the parameters for the field to work with each type of search like: product, category.

My View Index category

<div class="navbar navbar-header navbar-fixed-top">
<div class="container">
    <div class="navbar-collapse collapse">
        <div class="nav navbar-nav navbar-right">
            <form role="search" class="navbar-form">
                <div class="form-group has-feedback">
                    <input type="text" class="form-control" placeholder="Procurar" />
                    <span class="form-control-feedback glyphicon glyphicon-search"></span>
                </div>
            </form>
        </div>
    </div>
</div>

This way, I can’t use the other "buttons" of navbar bootstrap standard.

I’m using ASP . NET MVC bootstrap.

Answer 1

Good morning friend, I do not know if I understood very well your problem.

You want to use the buttons, including with the option of Collapse on the left and the search box on the right side of the navbar?

If so, here’s an example. I used a snippet of code from the W3schools tutorials and entered your search box into it. See:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
            <form role="search" class="navbar-form">
                <div class="form-group has-feedback">
                    <input type="text" class="form-control" placeholder="Procurar" />
                    <span class="form-control-feedback glyphicon glyphicon-search"></span>
                </div>
            </form>
      </ul>
    </div>
  </div>
</nav>

I hope I’ve helped. Any questions return.

More information:

http://www.w3schools.com/bootstrap/bootstrap_navbar.asp http://getbootstrap.com/components/#navbar