How to enable a Search form

Hello,

I'm trying to set up a search form in the navbar and have run into some difficulties. I've spent days and hours trying to find an answer to this by searching various forum and sites but have failed. I'm not an expert with Drupal or Boostrap so I would appreciate your help in what I expect is a simple task for some others. I'm running Boostrap 3 LESS with my own sub-theme.

I've successfully set up a nice looking search form and button in the navbar that's responsive and collapses into the hamburger. However, I haven't figured out how to enable the search so that it actually functions and delivers results based on the keywords string typed into the form's text box. I created a Custom Block for the search form, and placed it in the Navigation (Collapsible) region. The block contains the following code:

<div class="col-sm-3 col-md-3 pull-right">
  <form class="navbar-form" role="search">
   <div class="input-group">
    <input type="text" class="form-control" placeholder="Search" name="q">
     <div class="input-group-btn">
      <button aria-label="Submit Search" class="btn btn-default" type="submit"><font color="#4c5052"><i class="glyphicon glyphicon-search" aria-hidden="true"></i></font></button>
     </div>
   </div>
  </form>
</div>  

Now, how do I make this form actually functional, for example, so that it uses Drupal 8's Search Module to provide results?

On a side note, I found a strange issue. After saving the custom block, with the above code, all is fine. However, if I ever open the custom block to edit the code then a chunk of the code simply vanishes and I have to retype it before saving. The code that vanishes is everything between <button></button>. This, however, is not a big issue because I can retype the code.

Thanks for your help. I also welcome any improvements on the code I listed above or new ideas and approaches.