Expandable Search Box with Bootstrap 5
I've always liked the expandable search box. Its minimal and provides a nice animation when hovered over. In the past I've come across javascript implementations but had not been able to use them. Recently, I came across a pure CSS implementation that I ported across to Bootstrap. Inspired by https://codepen.io/studiocaro/pen/ZbKodG this version works with Bootstrap 5. You start with the boiler plate code for nav from bootstrap. Next I wrapped the form in a div with an id="form". I've also changed to a dark background by switching navbar-light bg-light to navbar-dark bg-dark for better contrast. If you want the search icon then add "entypo-search" class to the search form. The CSS responsible for the animation are: #form { ... -webkit-transition: width .55s ease; -moz-transition: width .55s ease; -ms-transition: width .55s ease; -o-transition: width .55s ease; transition: width .55s ease; } Video Live See the Pen ...