Expanding Search Bar
React Bootstrap 5 Expanding Search Bar
Responsive React Expanding Search Bar built with Bootstrap 5. Examples with the trigger on click and on hover.
To learn more read Search Docs.
On click
Click the square to expand the search.
import React from "react";
import { MDBContainer } from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5">
<input
type="text"
className="search-click"
placeholder="search here..."
/>
</MDBContainer>
);
}
.search-click {
border: 1px solid #ccc;
outline: none;
background-size: 22px;
background-position: 13px;
border-radius: 10px;
width: 50px;
height: 50px;
padding: 25px;
transition: all 0.5s;
}
.search-click:focus {
width: 300px;
padding-left: 50px;
}
.search-click {
position: relative;
overflow: hidden;
height: 50px;
}
.search-click input {
background: transparent;
border: 1px solid #ccc;
outline: none;
position: absolute;
width: 300px;
height: 50px;
left: 0%;
padding: 10px;
}
On hover
Hover the square to expand the search.
import React from "react";
import { MDBContainer } from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5">
<input
type="text"
className="search-hover"
placeholder="search here..."
/>
</MDBContainer>
);
}
.search-hover {
border: 1px solid #ccc;
outline: none;
background-size: 22px;
background-position: 13px;
border-radius: 10px;
width: 50px;
height: 50px;
padding: 25px;
transition: all 0.5s;
}
.search-hover:hover {
width: 300px;
padding-left: 50px;
}