content logo

Bootstrap Search Boxes:

Various Colorful Bootstrap Search Boxes

Search boxes are great features in any website. They help users find what they want faster by letting them search for the exact post or content they are after. This will make your website much more professional and increases your traffic by a great number. There is a factor, however, that many web designers neglect and that is appearance. The design of your search box also matters because it affects how your website looks. The first thing a person visiting your site for the first time sees is the look of it. if it is nice, then it makes the visitors stay and lures them in.

So, if you are willing to design a proper Bootstrap search colour search box, why keep it simple? You can improve the design easily with the help of Bootstrap and make it so much more interesting. Bootstrap allows you to design search bars and search boxes with many different styles, shapes, colours, etc. you can also use the colourful HTML search box we have in this post for absolutely no fee if you want to save some time. Our stylish Bootstrap search bar features custom rounded search boxes with a coloured magnifying glass icon besides it. this truly special and is necessary if you want to make your website look professional and improved.

#Stylish Bootstrap Search Bar #Bootstrap Search Color #Colorful HTML Search Box

<!-- This script got from www.frontendfreecode.com -->
<div class="container">
  <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 boxes with input group</h5>
      <div class="bg-white p-5 rounded shadow">

        <!-- Custom rounded search boxes 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 boxes</h5>
      <div class="bg-white p-5 rounded shadow">

        <!-- Underlined search boxes -->
        <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 boxes with buttons</h5>
      <div class="bg-white p-5 rounded shadow">

        <!-- Underlined search boxes with buttons -->
        <form>
          <div class="row mb-4">
            <div class="form-group col-sm-9">
              <input id="exampleFormControlInput5" type="email" placeholder="What're you searching for?" class="form-control form-control-underlined">
            </div>
            <div class="form-group col-sm-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-sm-3">
              <button type="submit" class="btn btn-primary rounded-pill btn-block shadow-sm">Search</button>
            </div>
            <div class="form-group col-sm-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 boxes with input group</h5>
      <div class="bg-white p-5 rounded shadow">

        <!-- Default search boxes 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><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Free Code</a>
                                                                            
.form-control:focus {
  box-shadow: none;
}

.form-control-underlined {
  border-width: 0;
  border-bottom-width: 1px;
  border-radius: 0;
  padding-left: 0;
}

body {
  background: #ffd89b;
  background: -webkit-linear-gradient(to right, #ffd89b, #19547b);
  background: linear-gradient(to right, #ffd89b, #19547b);
  min-height: 100vh;
}

.form-control::placeholder {
  font-size: 0.95rem;
  color: #aaa;
  font-style: italic;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.frontendfreecode.com -->

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.form-control:focus {
  box-shadow: none;
}

.form-control-underlined {
  border-width: 0;
  border-bottom-width: 1px;
  border-radius: 0;
  padding-left: 0;
}

body {
  background: #ffd89b;
  background: -webkit-linear-gradient(to right, #ffd89b, #19547b);
  background: linear-gradient(to right, #ffd89b, #19547b);
  min-height: 100vh;
}

.form-control::placeholder {
  font-size: 0.95rem;
  color: #aaa;
  font-style: italic;
}
</style>

</head>
<body>
<div class="container">
  <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 boxes with input group</h5>
      <div class="bg-white p-5 rounded shadow">

        <!-- Custom rounded search boxes 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 boxes</h5>
      <div class="bg-white p-5 rounded shadow">

        <!-- Underlined search boxes -->
        <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 boxes with buttons</h5>
      <div class="bg-white p-5 rounded shadow">

        <!-- Underlined search boxes with buttons -->
        <form>
          <div class="row mb-4">
            <div class="form-group col-sm-9">
              <input id="exampleFormControlInput5" type="email" placeholder="What're you searching for?" class="form-control form-control-underlined">
            </div>
            <div class="form-group col-sm-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-sm-3">
              <button type="submit" class="btn btn-primary rounded-pill btn-block shadow-sm">Search</button>
            </div>
            <div class="form-group col-sm-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 boxes with input group</h5>
      <div class="bg-white p-5 rounded shadow">

        <!-- Default search boxes 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><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Frontend Free Code</a></div>

</body>
</html>
Preview