Bootstrap Search Boxes:

Full Screen Search Box with Bootstrap

Have you ever been to one of those large and complex websites where you needed to find a certain post among all the content they had? This situation is more common than you think. Many people search through all the available content on the website just to find what they are after but get frustrated when they fail. These big websites have too many pages and subpages and simply cannot link every piece of content they have from the homepage. Due to this reason, these websites add in a little feature called a search bar. Search bars are necessary if you want your website to be lucrative as they are a great way to ensure your visitors don’t get mad and leave.

In this post, we have a CSS search result code for a Bootstrap search result to help you design the proper search box you need for your website. Another fix to the problem of not enough physical space in your pages is using a full screen Bootstrap search box. it looks similar to a normal search box but when you click on it, a new page with a transparent background will open to help you focus only on what you are after. Everything else becomes kind of invisible and the only visible thing is the search box in the middle of the page. You can write the words you need in the field and find them in the website. This is a really great feature and makes your website stand out among the others as not all websites do this.a

Bootstrap Search Result

CSS Search Result

Bootstrap Search

<!-- This script got from frontendfreecode.com -->
<div id="FullScreenOverlay" class="overlay">
  <span class="closebtn" onclick="closeSearchHero()" title="Close Overlay">×</span>
  <div class="overlay-content">
    <form >
      <input type="text" placeholder="Name the thing you love, we find best price for you" name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>

<div class="SearchHero text-center">
  <h2>Name ONE thing you love</h2>
  <button class="openBtn" onclick="openSearchHero()">Tap to search Products</button>
  <p style="margin-top:5px;">You will find it here (We won't judge)</p>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

* {
     border-radius: 0 !important;
 }   
.openBtn {

    background: #f1f1f1;
    border: none;
    padding: 10px 15px;
    font-size: 20px;
    cursor: pointer;
}

    .openBtn:hover {
        background: #bbb;
    }

.overlay {
    height: 100%;
    width: 100%;
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
}

.overlay-content {
    position: relative;
    top: 46%;
    width: 80%;
    text-align: center;
    margin-top: 30px;
    margin: auto;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    cursor: pointer;
    color: white;
}

    .overlay .closebtn:hover {
        color: #ccc;
    }

.overlay input[type=text] {
    padding: 15px;
    font-size: 17px;
    border: none;
    float: left;
    width: 80%;
    background: white;
}

    .overlay input[type=text]:hover {
        background: #f1f1f1;
    }

.overlay button {
    float: left;
    width: 20%;
    padding: 19px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
}

    .overlay button:hover {
        background: #bbb;
    }

.SearchHero {
    background: #333333; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #dd1818, #333333); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #dd1818, #333333); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #ffffff;
    padding: 20px;
}

    .SearchHero p {
        font-size: 13px;
    }

function openSearchHero() {
    document.getElementById("FullScreenOverlay").style.display = "block";
}

function closeSearchHero() {
    document.getElementById("FullScreenOverlay").style.display = "none";
}

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/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' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
* {
     border-radius: 0 !important;
 }   
.openBtn {

    background: #f1f1f1;
    border: none;
    padding: 10px 15px;
    font-size: 20px;
    cursor: pointer;
}

    .openBtn:hover {
        background: #bbb;
    }

.overlay {
    height: 100%;
    width: 100%;
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
}

.overlay-content {
    position: relative;
    top: 46%;
    width: 80%;
    text-align: center;
    margin-top: 30px;
    margin: auto;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    cursor: pointer;
    color: white;
}

    .overlay .closebtn:hover {
        color: #ccc;
    }

.overlay input[type=text] {
    padding: 15px;
    font-size: 17px;
    border: none;
    float: left;
    width: 80%;
    background: white;
}

    .overlay input[type=text]:hover {
        background: #f1f1f1;
    }

.overlay button {
    float: left;
    width: 20%;
    padding: 19px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
}

    .overlay button:hover {
        background: #bbb;
    }

.SearchHero {
    background: #333333; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #dd1818, #333333); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #dd1818, #333333); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #ffffff;
    padding: 20px;
}

    .SearchHero p {
        font-size: 13px;
    }
</style>

</head>
<body>
<div id="FullScreenOverlay" class="overlay">
  <span class="closebtn" onclick="closeSearchHero()" title="Close Overlay">×</span>
  <div class="overlay-content">
    <form >
      <input type="text" placeholder="Name the thing you love, we find best price for you" name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>

<div class="SearchHero text-center">
  <h2>Name ONE thing you love</h2>
  <button class="openBtn" onclick="openSearchHero()">Tap to search Products</button>
  <p style="margin-top:5px;">You will find it here (We won't judge)</p>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
function openSearchHero() {
    document.getElementById("FullScreenOverlay").style.display = "block";
}

function closeSearchHero() {
    document.getElementById("FullScreenOverlay").style.display = "none";
}
</script>

</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:

Full Screen Search Box with Bootstrap

Bootstrap Search Result

CSS Search Result

Bootstrap Search