Bootstrap input with button in navbar

Question

I'm trying to make a search bar in Bootstrap, but I want it to be attached to the navbar. Here is what I currently have. The code for that:

<form class="navbar-form navbar-left">
  <div class="form-group">
    <input type="text" class="form-control" id="search" placeholder="Search" />
  </div>
</form>

That works perfectly fine. But what if I add a button to it:

<form class="navbar-form navbar-left">
  <div class="form-group">
    <input type="text" class="form-control" id="search" placeholder="Search" />
    <div class="input-group-btn">
      <button class="btn btn-default glyphicon glyphicon-search" type="submit"></button>
    </div>
  </div>
</form>

This is what happens, it gets all messed up instead of being on 1 line. Why is this happening and how do I fix it?

All code for the navbar:

<nav class="navbar navbar-inverse" id="topnav">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topnav">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">

        <li><a href="/home">Home</a></li>
        <li><a href="/forum">Forum</a></li> 
        <li><a href="/about">About This Site</a></li>
        <li class="navbar-left"><form class="navbar-form navbar-left">
            <div class="form-group">
                <input type="text" class="form-control" id="search" placeholder="Search" />
                <div class="input-group-btn">
                    <button class="btn btn-default glyphicon glyphicon-search" type="submit"></button>
                </div>
            </div>
        </form></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-cog"></span>&nbsp;User Settings</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-out"></span>&nbsp;Logout</a></li>
    </ul>
</div>
</nav>

That looks like a Bootstrap 3 Navbar, not Bootstrap 4. – Carol Skelly Oct 28 '18 at 13:25 — Carol Skelly, Oct 28 '18 at 13:25

score 0 · Answer 1 · answered Oct 28 '18 at 13:20

There is no input-group-btn class in Bootstrap 4. Use an input-group as explained here

      <div class="input-group">
            <input type="text" class="form-control" id="search" placeholder="Search" />
            <div class="input-group-append">
               <button class="btn btn-outline-secondary fa fa-search" type="submit"></button>
            </div>
      </div>

https://www.codeply.com/go/B1f1zG4RWQ

Also, there is no btn-default or navbar-form in Bootstrap 4. Refer to the docs to make sure you're using the correct markup and classes.

Bootstrap input with button in navbar

1 Answers1