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    ...