O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding a search form to your designing

In the preceding sections we've build a navigation structure. About fifty percent of your visitors will use this navigation, the other half will prefer to search your content. So a good ability to search the content and your products must always be represented on your pages.

We can add a search form in the header of our page, which should look as follows:

Adding a search form to your designing

Edit the following HTML code in the html/includes/header.html file:

 <div class="utility-nav"> <ul> <li><a href="#" ><i class="icon fa fa-user fa-lg"></i><span> Log In or Register</span></a></li> <li><a href="#" ><i class="icon fa fa-shopping-cart fa-lg"></i><span> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required