Book Image

Bootstrap 4 Site Blueprints - Second Edition

By : Ian Whitney, David Cochran
Book Image

Bootstrap 4 Site Blueprints - Second Edition

By: Ian Whitney, David Cochran

Overview of this book

Packed with trade secrets, this second edition is your one-stop solution to creating websites that will provide the best experience for your users. We cover six popular, real-world examples, where each project teaches you about the various functionalities of Bootstrap 4 and their implementation. The book starts off by getting you up and running with the new features of Bootstrap 4 before gradually moving on to customizing your blog with Bootstrap and SASS, building a portfolio site, and turning it into a WordPress theme. In the process, you will learn to recompile Bootstrap files using SASS, design a user interface, and integrate JavaScript plugins. Towards the end of the book, you will also be introduced to integrating Bootstrap 4 with popular application frameworks such as Angular 2, Ruby on Rails, and React.
Table of Contents (15 chapters)
Bootstrap 4 Site Blueprints
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Preface

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:

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> View Cart</span></a></li> 
      </ul> 
   </div> 
  <form class="search-form form-inline pull-md-right"> 
    <input class=...