content logo
Bootstrap Search Boxes: Various Colorful Bootstrap Search Boxes

Bootstrap enables you to design search boxes or search bars in different shapes, styles, and colors. You can use buttons, inputs, etc. to design the search box suitable for your website. See the various code examples provided below.

#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 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" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>

</body>
</html>
Preview