Allocate search box in standard Bootstrap Navbar

Asked

Viewed 1,093 times

2

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.

asp.net-mvc bootstrap-3

1 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

  • Thank you very much for your help, but that’s not what I want. Since I’m using Asp net, this code you sent would be on _Layout.cshtml. I really wish I could put this search box using another view.

Browser other questions tagged asp.net-mvc bootstrap-3

You are not signed in. Login or sign up in order to post.