Клон Bootstrap 5 airbnb: панель поиска как кнопка

Я хочу создать кнопку панели поиска, например airbnb, используя bootstrap 5, например:

введите здесь описание изображения

HTML-код:

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

html css twitter-bootstrap bootstrap-5
person jhon-jhones    schedule 31.01.2021    source источник
comment
Вы должны добавить несколько примеров написанного вами кода, чтобы попытаться добиться этого. В StackOverflow вы не просто получите код, предназначенный для решения вашей проблемы, не приложив к этому усилий самостоятельно.   -  person Mikkel    schedule 31.01.2021

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать группу ввода и утилиты границы. Это также было доступно в Bootstrap 4, но теперь left и right имеют изменить на start и 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

Также см.: Поиск ввода со значком Bootstrap 4

person Zim    schedule 31.01.2021
comment
спасибо большое бро - person jhon-jhones; 31.01.2021