Form in Navbar isn't inline

Question

So as I'm slowly learning Bootstrap here I ran into a new problem I'm not quite sure how to solve. I have a sticky navbar at the top of my page which looks like this:

Now you can see the problem straight away. The Sign In Form out to the right is not inline with the rest of the navbar. I'm not entirely sure what I'm missing here as trying to add "inline" (as I've seen others do) doesn't really change anything. Is it because I use a form when I should build this up differently?

I can also pretty quickly see that the text I used to write "Login" won't match the rest of the menus styling in terms of shades of grey on the colouring.

<div class="sticky-header-navbar-container">
    <div class="well">
        <div class="navbar navbar-default navbar-fixed-top" id="navbar">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
                <li>
                    <form class="navbar-form" role="search">
                        <div class="input-group" style="width: 100%">
                            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header">
                            <div class="input-group-btn">
                                <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                            </div>
                        </div>
                    </form>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#">Register</a>
                </li>
                <li>
                    <form class="form-signin">
                        <p>Login</p>
                        <label for="inputEmail" class="sr-only">Email address</label>
                        <input type="email" id="inputEmail" class="form-control" placeholder="Email Address" required autofocus>
                        <label for="inputPassword" class="sr-only">Password</label>
                        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" value="remember-me"> Remember Me
                            </label>
                        </div>
                    </form>
                    <div class="btn-group" role="button">
                        <button type="button" class="btn btn-success btn-bg" id="signin-btn">Sign In</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

Answer 1

You need to make a few changes:

• Change the <p>Login</p> to <span>Login</span> (spans are inline elements)
• Move the <button ...>Sign In</button> inside the form and remove the div it was in
• Add navbar-form to the class attribute of your Sign In form.

Here's the final code:

<div class="sticky-header-navbar-container">
        <div class="well">
            <div class="navbar navbar-default navbar-fixed-top" id="navbar">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                    <li>
                        <form class="navbar-form" role="search">
                            <div class="input-group" style="width: 100%">
                                <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header">
                                <div class="input-group-btn">
                                    <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                                </div>
                            </div>
                        </form>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right line-inline">
                    <li>
                        <a href="#">Register</a>
                    </li>
                    <li>

                        <!-- Changes I made start here -->

                        <form class="form-signin navbar-form">
                            <span>Login</span>
                            <label for="inputEmail" class="sr-only">Email address</label>
                            <input type="email" id="inputEmail" class="form-control" placeholder="Email Address" required autofocus>
                            <label for="inputPassword" class="sr-only">Password</label>
                            <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" value="remember-me"> Remember Me
                                </label>
                            </div>
                            <button type="button" class="btn btn-success btn-bg" id="signin-btn">Sign In</button>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
    </div>

Here's what I was able to produce:

Answer 2

put form in <div class="col-md-12"><div> or 6