Expanding Search Bar

Bootstrap Expanding Search Bar - examples & tutorial

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


          <input type="text" class="search-click" name="" placeholder="search here..." />
        

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


          <input type="text" class="search-hover" name="" placeholder="search here..." />
        

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