CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Daniel
Daniel

Reputation: 6039

The search box and an additional button not aligned in a navbar

I have a navbar. inside it I have a search form and an additional button. The problem is that the button not aligned with other elements in the navbar: enter image description here

Here is my code. Anyone sees why they shouldn't be aligned? 

<html> 
    <head> 
        <title>Bootstrap 3 </title>
        <link href ="css/bootstrap.css" rel = "stylesheet">
        <link href ="css/bootstrap.min.css" rel = "stylesheet">
        <link href ="css/bootstrap-theme.min.css" rel = "stylesheet">
        <link href ="css/styles.css" rel = "stylesheet">

        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head> 
    <body> 

        <nav class="navbar navbar-default">

          <div class="container-fluid">

            <div class="navbar-header">

        <!-- box -->
        <form class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>

            </div>

        <!-- Single button -->
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Action <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div>

          </div>

        </nav>

    </body> 
</html>

Upvotes: 0

Views: 130

Answers (1)

Macsupport
Macsupport

Reputation: 5444

You need to add the class navbar-btn to your button:

jsfiddle

<button type="button" class="navbar-btn btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Action <span class="caret"></span>
      </button>

Upvotes: 1

Related Questions