Bootstrap 3: Two Row Nav

by Steve Coffman

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
    <div class="container">
        <div class="col-md-2">
            <img src="http://placehold.it/70x70" class="img-responsive" style="position:relative;top:10px" />
        </div>
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-1 col-md-offset-6">
                    <div class="navbar-text text-right">
                        <p><a href="#">Login</a>
                        </p>
                    </div>
                </div>
                <div class="col-md-5">
                    <form class="navbar-form">
                        <div class="input-group"> <span class="input-group-btn">
                                <button class="btn btn-default" type="button">Search</button>
                                </span>

                            <input type="text" class="form-control" />
                        </div>
                    </form>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <ul class="nav navbar-nav pull-right">
                        <li><a href="#">Page 1</a>
                        </li>
                        <li class="divider-vertical"></li>
                        <li><a href="#">Page 2</a>
                        </li>
                        <li class="divider-vertical"></li>
                        <li><a href="#">Page 3</a>
                        </li>
                        <li class="divider-vertical"></li>
                        <li><a href="#">Page 4</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>