Expanding Search Bar Bootstrap 5

Here’s a tutorial on how to create an expanding search bar using Bootstrap 5. This tutorial will guide you through the HTML structure, CSS styling, and basic JavaScript functionality to achieve a sleek and functional expanding search bar.

Adding Header Assets

Creating the HTML Structure

First, let’s create the basic HTML structure for our expanding search bar. This structure includes buttons alongside the search bar to demonstrate its integration within a layout.

<a href="#" class="button">Button1</a>
<a href="#" class="button">Button2</a>
<a href="#" class="button">Button3</a>
<div class="search-container">
  <form action="/search" method="get">
    <input class="search expandright" id="searchright" type="search" name="q" placeholder="Search">
    <label class="button searchbutton" for="searchright"><span class="mglass">&#9906;</span></label>
  </form>
</div>
<a href="#" class="button">Button5</a>
<br>
<a href="#" class="button">Button1</a>
<div class="search-container">
  <form action="/search" method="get">
    <input class="search" id="searchleft" type="search" name="q" placeholder="Search">
    <label class="button searchbutton" for="searchleft"><span class="mglass">&#9906;</span></label>
  </form>
</div>

Styling with CSS

Now, let’s style the search bar and related elements using CSS. The CSS will control the appearance of the buttons, the search container, and the expanding/collapsing behavior of the search input field.

body {
	font-family: sans-serif;
	background-color: #111;
}

.button {
	display: inline-block;
	margin: 4px 2px;
	background-color: #444;
	font-size: 14px;
	padding-left: 32px;
	padding-right: 32px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: white;
	text-decoration: none;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.button:hover {
	transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-webkit-transition-duration: 0.4s;
	-o-transition-duration: 0.4s;
	background-color: white;
	color: black;
}

.search-container {
	position: relative;
	display: inline-block;
	margin: 4px 2px;
	height: 50px;
	width: 50px;
	vertical-align: bottom;
}

.mglass {
	display: inline-block;
	pointer-events: none;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
}

.searchbutton {
	position: absolute;
	font-size: 22px;
	width: 100%;
	margin: 0;
	padding: 0;
}

.search:focus + .searchbutton {
	transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-webkit-transition-duration: 0.4s;
	-o-transition-duration: 0.4s;
	background-color: white;
	color: black;
}

.search {
	position: absolute;
	left: 49px; /* Button width-1px (Not 50px/100% because that will sometimes show a 1px line between the search box and button) */
	background-color: white;
	outline: none;
	border: none;
	padding: 0;
	width: 0;
	height: 100%;
	z-index: 10;
	transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-webkit-transition-duration: 0.4s;
	-o-transition-duration: 0.4s;
}

.search:focus {
	width: 363px; /* Bar width+1px */
	padding: 0 16px 0 0;
}

.expandright {
	left: auto;
	right: 49px; /* Button width-1px */
}

.expandright:focus {
	padding: 0 0 0 16px;
}

Adding JavaScript Functionality

Finally, we’ll add the JavaScript function needed, if any. In some cases, the CSS may provide all the functionality needed.

/* Source: https://gist.github.com/elwint/1f5510c97707ba4de163768cdb177436 */

Adding Footer Assets

That concludes this tutorial on creating an Expanding Search Bar using Bootstrap 5. You should now have a functional and visually appealing search bar that expands on focus.