I want do a nav like this:
Logo::::::::|:::::Dropdown+Search(center):::::|::::::::::Glyphcon1Glyphcon2|
In this moment I make this, but the glyphcon show it down of nav content.
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Desplegar navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logotipo</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<div class="input-group navbar-form navbar-center">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span></li>
<li><span class="glyphicon glyphicon-shopping-cart"></span></li>
</ul>
</div>
</nav>
How can I put the dropdown+search in the center of the nav and put the glyphcon in the same line without problems?
<div class="input-group navbar-form navbar-center"> occupying the whole line so next <div class="nav navbar-right navbar-nav"> goes to right of next line. to fix that put <div class="input-group navbar-form navbar-center"> inside other <div class="nav navbar-nav navbar-left">
In element nav navbar-nav navbar-right you are including two icons in <li></li> tag which is similar like text and it goes down but when you include icon inside tag a/c to bootstrap <a> tag it is padded inside nav class.
<div class="collapse navbar-collapse navbar-ex1-collapse">
<div class="nav navbar-nav navbar-left">
<div class="input-group navbar-form navbar-center">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span></li>
<li><span class="glyphicon glyphicon-shopping-cart"></span></li>
</ul>
</div>
Related
I'm new to front end design and am having challenges implementing a search box with filters into my navbar. I know this is potentially trivial but I have found it very challenging, and typically end up with a jumbled mess when I insert the searchbox code into my desired area (commented in the second code block).
The code for the search box is:
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter by</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Contains</li>
<li>It's equal</li>
<li>Greather than ></li>
<li>Less than < </li>
<li class="divider"></li>
<li>Anything</li>
</ul>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" name="x" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
The code for my nav bar is as follows, with a comment indicating where I need the search box to go:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>
<!--SEARCH BAR HERE -->
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Log in</li>
<li>Join us</li>
<li><i class="fa fa-twitter color-twitter"></i></li>
<li><i class="fa fa-facebook color-facebook"></i></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
The final result should look something like:
NavBar Desired Result
Sincere gratitude in advance.
Here is a working snippet based on Bootstrap 3 (click to "Expand snippet"):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<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-->
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter by</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Contains</li>
<li>It's equal</li>
<li>Greather than ></li>
<li>Less than < </li>
<li class="divider"></li>
<li>Anything</li>
</ul>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" name="x" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
This Link here <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
And also the relative CodePen: https://codepen.io/beaver71/pen/pdmBMr
I have a bootstrap navbar here below and I want to increase the size of the search field to large with 'input-lg', but when I do this, the other items don't center vertically correctly. How can I vertically center the other items in the navbar to match the large input group? Even if I try to set each item to a 'btn-lg' it enlarges the text but not the actual link or item.
I just want it to be aligned with the large input field. But it's up resting on the top of the navbar like in this picture.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
It's not a very elegant solution, but this should accomplish what you're looking for... codepen.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#" style="margin-top: 5px;">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active" style="margin-top: 5px;">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I just added a little css to your navigation items. Adding margin-top: 5px to each navigation list item does the trick.
I am using the example on https://getbootstrap.com/components/#navbar, and I want to align the search box to the right (it is currently on the left) while keeping the same order of elements (search, link, dropdown). I can do this by changing it to
navbar-right
and putting it after the last dropdown menu html. However this changes the order in the mobile collapsed menu, switching search to last. How do I align it to the right without changing this order?
Edit: this is the code in the tutorial.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<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>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I have gotten search aligned right by changing the code to the following, but it causes the order in mobile collapsed menu to be switched.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" 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><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
One option is to position the form yourself so your elements are in the order you want regardless of the viewport size. This does have some caveats, one being that you won't be able to fit much more (if anything) inside the navbar because of space and if you do add/change anything you'll have to adjust the forms position as well.
See working example Snippet.
.navbar-right-form {
float: left;
right: 175px;
position: absolute;
}
#media (max-width: 767px) {
.navbar-right-form {
right: 0;
margin-right: -15px;
position: relative;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <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" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown"> Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown"> Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
i would recommend to customize your navigation by adding simple rules who determine for which operating engine it should be used by:
hidden-xs, hidden-sm, hidden-md, hidden-lg
it is css class
these rules hides elements.
and you can your custom navigation
I would like to use navbar-right on a navbar-form and a navbar-nav however it ends up putting the form on one row and the navbar_nav on another row on the right. How can I get the navbar to show the brand on the left and on the right is a search field followed by a nav links.
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid col-sm-12 col-lg-offset-2 col-lg-8">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#navbar_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" href="/" style="white-space:nowrap">Site</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar_collapse">
<div class="navbar-right">
<form class="navbar-form" role="search" ng-submit="collectionSearch()">
<div class="form-group">
<input type="text" class="form-control" placeholder="Collection ID"
ng-model="cSearch" size=10 required>
</div>
</form>
<ul class="nav navbar-nav">
<li id="create_tab">Create</li>
<li id="tests_tab">Tests</li>
<li id="collections_tab">Collections</li>
<li id="account_tab">Account</li>
<li id="logout_tab" >Logout</li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Any suggestions are appreciated. Thank you!
You need to use this bootstrap classes navbar-form and navbar-left to move the search icon on left side. Here is a DEMO.
<form class="navbar-form navbar-left" role="search" ng-submit="collectionSearch()">
</form>
If I understand correctly, this should answer your question:
http://jsfiddle.net/zu5uoopc/
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" 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><!-- /.navbar-collapse -->
I am trying to achieve a two row navigation using BS 3, but I am having a hard time find out how to do it. Every method I've tried has failed. I would like to keep the markup as standard as possible. Here's what I want it to look like:
http://jsfiddle.net/technotarek/ePGa9/
The example uses old BS code. I can't seem to get it to work in BS 3.0.
Here's my attempt. The logo is quite large, but I want it to scale accordingly.
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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" href="/"><img class="img-responsive" src="http://placehold.it/490x164&text=Logo" alt="My Logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<form class="navbar-form pull-right">
<div class="input-group">
<input type="text" class="search-box-text form-control" />
<span class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="icon-search"></i></button>
</span>
</div>
</form>
<ul class="nav navbar-nav pull-right">
<li>Register</li>
<li>Log in</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
Your code is here BootstrapNavbarWithLogoSearchbarResponsive
html
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> <img src="http://placehold.it/70x70">
</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Active</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
css
.navbar-brand {
float: left;
height: 10%;
padding: 0;
}