Full-screen Search Box Bootstrap

In this blog, we are going to share a snippet about how to create a full-screen search box using Bootstrap and a little bit of JS. If you want to have a better understanding of the code, you need to watch the video tutorial below. There are a lot of videos on front-end development on our Youtube Channel. If you want to know more about front-end development, you can subscribe to our channel.

I hope you have gone through the video above and understand the basics of this project. This is a very basic search box for Bootstrap. You can change the size of the search box, and add a few other bootstrap buttons to make it look more professional. It’s a very simple script that will help you build your own search box. It’s fully responsive, and also has the ability to be resized according to the browser window size. How to use: Simply copy and paste the code into your website or blog. It’s really easy to use, and you’ll have a fully responsive search box in no time. If you want to customize it a little more, you can add some custom CSS to change the color and font.

Looking for a way to add a personalized search box to your blog? Look no further than this tutorial on how to create a responsive search box. This search box will automatically resize to fit whatever size your blog is, making it easy to find what you're looking for on your blog. By watching the video, you must have understood that we have used the basic navbar snippet of Bootstrap for this project. After that, another nav link called search has been added along with the nav links of that navbar. Clicking on this search link will open our desired full-screen search bar. We used some custom CSS to design the full-screen search bar. We have used some custom JavaScript to open the search bar when you click. Since the bootstrap is a responsive framework, the project will automatically become responsive. And if we reduce the placeholder text font size of the search bar, the snippet will be fully responsive.

You May Also Like:

Full-screen Search Box Bootstrap [ Source Code ]:

If you want to create this project, you have to create two files. One is an HTML file, and the other is a CSS file. You can also create a separate js file for the script if you want but for this tutorial, we have included the script underneath the HTML file. The bootstrap file should be linked with the latest jquery file. Take the code from the box and paste it into your project. You can download the code from the button below if it doesn't work for you.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Full screen Search box bootstrap</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <header>
        <nav class="navbar navbar-default navbar-inverse">
  <div class="container">
    
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">DigiCom</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      
      
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">home</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#">portfolio</a></li>
        <li><a href="#">services</a></li>
        <li><a href="#">contact</a></li>
        <li><a href="#search">Search</a></li>
        
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
   
   
   <div id="search">
    <button type="button" class="close">X</button>
    <form>
        <input type="search" value="" placeholder="Your Query Here ...." />
        <button type="submit" class="btn">Search</button>
    </form>
</div>
   
   
   <div class="content">
       <div class="thing">
           <h2>digital agency</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ducimus accusantium voluptates nesciunt, perspiciatis, corporis.</p>
       <a href="#">Learn More</a>
       </div>
   </div>
    </header>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(function () {
    $('a[href="#search"]').on('click', function(event) {
        event.preventDefault();
        $('#search').addClass('open');
        $('#search > form > input[type="search"]').focus();
    });
    
    $('#search, #search button.close').on('click', function(event) {
        if (event.target == this || event.target.className == 'close') {
            $(this).removeClass('open');
        }
    });
    
    
    
});
    </script>
</body>
</html>

ADD CSS:

header {
	background-image: url(https://images.pexels.com/photos/509922/pexels-photo-509922.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	height: 100vh;
	font-family: poppins;
}
.navbar-inverse .navbar-brand {
	color: #fff;
	text-transform: uppercase;
	font-weight: 900;
}
.navbar-nav>li:hover {
	background: darkorange;
}
.navbar-inverse .navbar-nav>li>a {
	color: #fff;
	text-transform: uppercase;
}
#search {
	width: 100%;
	height: 100%;
	background-color: black;
	transition: all 0.5s ease-in-out;
	transform: translate(0px, 100%) scale(0, 0);
	position: fixed;
	top: 0px;
	left: 0px;
	opacity: 0;
	z-index: 1000
}
#search.open {
	transform: translate(0px, 0px) scale(1, 1);
	opacity: 0.9;
}
#search input[type="search"] {
	position: absolute;
	font-weight: 300;
	text-align: center;
	border: 0px;
	margin: 0px auto;
	margin-top: -51px;
	padding-left: 30px;
	padding-right: 30px;
	outline: none;
	top: 50%;
	width: 100%;
	color: #fff;
	background: rgba(0, 0, 0, 0);
	font-size: 60px;
}
#search .btn {
	margin-left: -100px;
	border-radius: 50px;
	padding: 10px 50px;
	text-transform: uppercase;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: 61px;
}
#search .close {
	background-color: #fff;
	border-color: #fff;
	opacity: 1;
	padding: 10px 17px;
	font-size: 27px;
	position: fixed;
	top: 15px;
	right: 15px;
	color: #000;
}
.content {
	display: grid;
	place-items: center;
	height: 100vh;
	text-align: center;
}
.content h2 {
	text-transform: uppercase;
	font-weight: 900;
	font-size: 60px;
}
.content p {
	width: 60%;
	margin: auto;
}
.content a {
	background: #262626;
	color: #fff;
	display: inline-block;
	margin-top: 15px;
	padding: 10px 50px;
	border-radius: 50px;
}
.content a:hover {
	background: darkorange;
}

I hope you have been able to use the code successfully. There are different topics of frontend development that we share the source code on. If you want to get those codes, you need to visit our website every now and then. Please let like-minded people know about the articles of this blog so that they can be benefited from them. Help others to learn as well and learn yourself as well. We would like to thank you very much for visiting our website.

DOWNLOAD CODE

Full-screen Search Box Bootstrap [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Full-screen Search Box Bootstrap

Full-screen Search Box Bootstrap [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form