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>

Try it »

If you run the above example it will produce output something like this –

Bootstrap add search box with icon in navbar


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>

Try it »

If you run the above example it will produce output something like this –

search box in inverted color bootatrap

Tip : On the same way you can also add your own class to change the navbar color.

Advertisements

Add Comment

📖 Read More