Bootstrap add search box with icon in navbar
Bootstrap add search box with icon in navbar : Sometimes we need to add the search box in main navbar with icons. Here in this tutorial we are going to explain how you can create a simple form navbar which contains the search box with icons. We will explain this with example and demo.
Bootstrap add search box with icon in navbar
You can create search box simply as below –
Bootstrap add search box with icon navbar : Example
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" name="search" class="form-control" placeholder="Search here..">
</div>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
|
If you run the above example it will produce output something like this –
More Examples
Let’s have look over more example and demo here.
Saerch bar with icon inverse navbar
You can add the navbar-inverse class to create inverted navbar with search icons.
Bootstrap add search box with icon in navbar : Example
<form class="navbar-form navbar-inverse" role="search">
<div class="form-group">
<input type="text" name="search" class="form-control" placeholder="Search here..">
</div>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
|
If you run the above example it will produce output something like this –
Tip : On the same way you can also add your own class to change the navbar color.
Advertisements
