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 Bootstrap 5 Expandable Search box by Ainsof So'o (@ainsofs) on CodePen.

pen: https://codepen.io/ainsofs/pen/abqZgeM