0

I want to create a search bar button like airbnb using bootstrap 5 something like this :

enter image description here

HTML Code :

<button type="button" class="btn btn-light">
        <span class="search-label">start your search</span>
        <span class="search-icon"><i class="fas fa-search"></i></span>
</button>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
jhon-jhones
  • 455
  • 1
  • 13
  • 27
  • 2
    You should add some examples of code you've written to try and achieve this. On StackOverflow you won't just get the code served to solve your issue without having put some effort into it yourself first. – Mikkel Jan 31 '21 at 13:48

1 Answers1

0

You could use an input group and the border utilities. This was also available in Bootstrap 4, but now left and right have change to start and end...

           <div class="input-group">
                <input class="form-control form-control-lg border-end-0 border border-dark rounded-pill rounded-end" type="text" value="Start your search" id="example-search-input" />
                <span class="input-group-append">
                    <button class="btn btn-outline-dark btn-lg border-start-0 rounded-pill rounded-start" type="button">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
           </div>

https://codeply.com/p/Dv7ynKFM6J

Also see: Search input with an icon Bootstrap 4

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624