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 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://frontendfreecode.com">Free Frontend</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 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">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars

Feel The Power

Bootstrap Search Boxes:

Various Colorful Bootstrap Search Boxes

Stylish Bootstrap Search Bar

Bootstrap Search Color

Colorful HTML Search Box