<div class="container">
  <!-- For demo purpose -->
  <div class="row py-5">
    <div class="col-lg-9 mx-auto text-white text-center">
      <h1 class="display-4">Bootstrap 4 search bar</h1>
      <p class="lead mb-0">Collection of Bootstrap 4 search bar variants.</p>
      <p class="lead">Snippet by <a href="https://bootstrapious.com/snippets" class="text-white">
                <u>Bootstrapious</u></a>
      </p>
    </div>
  </div>
  <!-- End -->


  <div class="row mb-5">
    <div class="col-lg-8 mx-auto">
      <h5 class="font-weight-light mb-4 font-italic text-white">Custom rounded search bars with input group</h5>
      <div class="bg-white p-5 rounded shadow">

        <!-- Custom rounded search bars with input group -->
        <form action="">
          <div class="p-1 bg-light rounded rounded-pill shadow-sm mb-4">
            <div class="input-group">
              <input type="search" placeholder="What're you searching for?" aria-describedby="button-addon1" class="form-control border-0 bg-light">
              <div class="input-group-append">
                <button id="button-addon1" type="submit" class="btn btn-link text-primary"><i class="fa fa-search"></i></button>
              </div>
            </div>
          </div>
          <div class="p-1 bg-light rounded rounded-pill shadow-sm mb-4">
            <div class="input-group">
              <div class="input-group-prepend">
                <button id="button-addon2" type="submit" class="btn btn-link text-warning"><i class="fa fa-search"></i></button>
              </div>
              <input type="search" placeholder="What're you searching for?" aria-describedby="button-addon2" class="form-control border-0 bg-light">
            </div>
          </div>
          <div class="input-group mb-4 border rounded-pill p-1">
            <input type="search" placeholder="What're you searching for?" aria-describedby="button-addon3" class="form-control bg-none border-0">
            <div class="input-group-append border-0">
              <button id="button-addon3" type="button" class="btn btn-link text-success"><i class="fa fa-search"></i></button>
            </div>
          </div>
          <div class="input-group mb-4 border rounded-pill p-1">
            <div class="input-group-prepend border-0">
              <button id="button-addon4" type="button" class="btn btn-link text-info"><i class="fa fa-search"></i></button>
            </div>
            <input type="search" placeholder="What're you searching for?" aria-describedby="button-addon4" class="form-control bg-none border-0">
          </div>
        </form>
        <!-- End -->

      </div>
    </div>
  </div>


  <div class="row mb-5">
    <div class="col-lg-8 mx-auto">
      <h5 class="font-weight-light mb-4 font-italic text-white">Underlined search bars</h5>
      <div class="bg-white p-5 rounded shadow">

        <!-- Underlined search bars -->
        <form>
          <div class="form-group mb-4">
            <input id="exampleFormControlInput1" type="email" placeholder="What're you searching for?" class="form-control form-control-underlined">
          </div>
          <div class="form-group mb-4">
            <input id="exampleFormControlInput2" type="email" placeholder="What're you searching for?" class="form-control form-control-underlined border-primary">
          </div>
          <div class="form-group mb-4">
            <input id="exampleFormControlInput3" type="email" placeholder="What're you searching for?" class="form-control form-control-underlined border-info">
          </div>
          <div class="form-group mb-4">
            <input id="exampleFormControlInput4" type="email" placeholder="What're you searching for?" class="form-control form-control-underlined border-warning">
          </div>
          <div class="form-group mb-4">
            <input id="exampleFormControlInput5" type="email" placeholder="What're you searching for?" class="form-control form-control-underlined border-success">
          </div>
          <div class="form-group">
            <input id="exampleFormControlInput6" type="email" placeholder="What're you searching for?" class="form-control form-control-underlined border-danger">
          </div>
        </form>
        <!-- End -->

      </div>
    </div>
  </div>


  <div class="row mb-5">
    <div class="col-lg-8 mx-auto">
      <h5 class="font-weight-light mb-4 font-italic text-white">Underlined search bars with buttons</h5>
      <div class="bg-white p-5 rounded shadow">

        <!-- Underlined search bars with buttons -->
        <form>
          <div class="row mb-4">
            <div class="form-group col-md-9">
              <input id="exampleFormControlInput5" type="email" placeholder="What're you searching for?" class="form-control form-control-underlined">
            </div>
            <div class="form-group col-md-3">
              <button type="submit" class="btn btn-primary rounded-pill btn-block shadow-sm">Search</button>
            </div>
          </div>
          <div class="row">
            <div class="form-group col-md-3">
              <button type="submit" class="btn btn-primary rounded-pill btn-block shadow-sm">Search</button>
            </div>
            <div class="form-group col-md-9">
              <input id="exampleFormControlInput6" type="email" placeholder="What're you searching for?" class="form-control form-control-underlined">
            </div>
          </div>
        </form>
        <!-- End -->

      </div>
    </div>
  </div>


  <div class="row mb-5">
    <div class="col-lg-8 mx-auto">
      <h5 class="font-weight-light mb-4 font-italic text-white">Default search bars with input group</h5>
      <div class="bg-white p-5 rounded shadow">

        <!-- Default search bars with input group -->
        <form action="">
          <div class="input-group mb-4">
            <input type="search" placeholder="What're you searching for?" aria-describedby="button-addon5" class="form-control">
            <div class="input-group-append">
              <button id="button-addon5" type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
            </div>
          </div>
          <div class="input-group mb-4">
            <input type="search" placeholder="What're you searching for?" aria-describedby="button-addon6" class="form-control">
            <div class="input-group-append">
              <button id="button-addon6" type="submit" class="btn btn-info"><i class="fa fa-search"></i></button>
            </div>
          </div>
          <div class="input-group mb-4">
            <div class="input-group-prepend">
              <button id="button-addon7" type="submit" class="btn btn-success"><i class="fa fa-search"></i></button>
            </div>
            <input type="search" placeholder="What're you searching for?" aria-describedby="button-addon7" class="form-control">
          </div>
          <div class="input-group">
            <div class="input-group-prepend">
              <button id="button-addon8" type="submit" class="btn btn-danger"><i class="fa fa-search"></i></button>
            </div>
            <input type="search" placeholder="What're you searching for?" aria-describedby="button-addon8" class="form-control">
          </div>
        </form>
        <!-- End -->

      </div>
    </div>
  </div>
  <div class="row mb-5">
    <div class="col-lg-8 mx-auto">
      <h5 class="font-weight-light mb-4 font-italic text-white">Default search inputs with colorful borders</h5>
      <div class="bg-white p-5 rounded shadow">

        <!-- Default search inputs with colorful borders -->
        <form action="">
          <div class="form-group mb-4">
            <input type="search" placeholder="What're you searching for?" aria-describedby="button-addon" class="form-control border-primary">
          </div>
          <div class="form-group mb-4">
            <input type="search" placeholder="What're you searching for?" aria-describedby="button-addon" class="form-control border-info">
          </div>
          <div class="form-group mb-4">
            <input type="search" placeholder="What're you searching for?" aria-describedby="button-addon" class="form-control border-warning">
          </div>
          <div class="form-group mb-4">
            <input type="search" placeholder="What're you searching for?" aria-describedby="button-addon" class="form-control border-success">
          </div>
          <div class="form-group mb-4">
            <input type="search" placeholder="What're you searching for?" aria-describedby="button-addon" class="form-control border-danger">
          </div>
        </form>
        <!-- End -->

      </div>
    </div>
  </div>
</div>