Bootstrap Navbar Search Icon

How to add a search box with icon to the navbar in Bootstrap 3?

I'm running BS3 on a dev site and the following produces the effect/layout you're requesting. Of course you'll need the glyphicons set up in BS3.

<div class="navbar navbar-inverse navbar-static-top" role="navigation">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="/" title="Aahan Krish's Blog - Homepage">ITSMEEE</a>
    </div>

    <div class="collapse navbar-collapse navbar-ex1-collapse">

        <ul class="nav navbar-nav">
            <li><a href="/topic/notes/">/notes</a></li>
            <li><a href="/topic/dev/">/dev</a></li>
            <li><a href="/topic/good-reads/">/good-reads</a></li>
            <li><a href="/topic/art/">/art</a></li>
            <li><a href="/topic/bookmarks/">/bookmarks</a></li>
            <li><a href="/all-topics/">/all</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>
</div>

UPDATE: See JSFiddle

Bootstrap navbar search icon

One of the way to do it is to add left padding to the field and add background image for the field.

See example: http://jsfiddle.net/hYAEQ/

It's not exact way twitter.com do it, they used absolute position element above search field because they have all images in the single sprite, and can't easily use them as backgrounds, but it should do.

I used inline image for a background to make it easier to post it to jsfiddle, but feel free to use normal links to images here.

EDIT: The way to do it using bootstrap sprite and additional container for icon
http://jsfiddle.net/hYAEQ/2/

EDIT 2:

Fix for white bootstrap theme: http://jsfiddle.net/hYAEQ/273/

EDIT 3:

If you are using navbar-inverse (black navbar) you will want this minor tweak: http://jsfiddle.net/hYAEQ/410/

.navbar-search .search-query {
    padding-left: 29px !important;
}

Bootstrap navbar search button not where it should be

Bootstrap has many versions, the latest version is 5.0 v.
The code which you have written is 4.0v so you should include 4.0 v CDN.
Just write the code for the respective version of CDN

<!DOCTYPE html>
<html lang="en">
 <!-- load static  -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, maximum-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">

</head>
<body>
 <!-- navbar code -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs- 
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</div>
</nav>

    <div class="container">
         <!-- block content

         endblock content  -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

I hope you get the point, just make sure it matches the version.

Link for Bootstrap navbar 5.0v -https://getbootstrap.com/docs/5.0/components/navbar/#supported-content

How do I add the search icon next to the tab icon on the navigation bar?

There are two solutions:

solutions 1 :

use display : inline-block , Give this to search and sandwiches navbar

solutions 2 :

usedisplay : flex , Give this to their parent tag

search button to open search box in bootstrap navbar

You can try these snippets.

Solutuion with CSS Only:

.hide{  opacity: 0;  max-height: 0;}
#trigger {  position: absolute;  left: -999em;}
#container input[type="checkbox"]:checked + div{  max-height: 99em;  opacity: 1;  height: auto;  overflow: hidden;}

<div id="container"> <label for="trigger">click me for Search</label>   <input type="checkbox" id="trigger">  <div class="hide">    <form>        <input type="text" name="search" placeholder="Search..">    </form>  </div><div>

How do fix the search icon position use in the navbar?

Just add display: flex to your class .searchbar.
Or best way would be to use position: absolute to the search icon.