https://github.com/mdbootstrap/react-search-expanding

Responsive React Expanding Search Bar built with Bootstrap 5. Examples with the trigger on click and on hover. https://mdbootstrap.com/docs/react/extended/search-expanding/
https://github.com/mdbootstrap/react-search-expanding

bar bootstrap bootstrap-template bootstrap-theme bootstrap5 css expanding html js react search

Last synced: about 1 month ago
JSON representation

Responsive React Expanding Search Bar built with Bootstrap 5. Examples with the trigger on click and on hover. https://mdbootstrap.com/docs/react/extended/search-expanding/

Host: GitHub
URL: https://github.com/mdbootstrap/react-search-expanding
Owner: mdbootstrap
License: other
Created: 2022-08-22T10:30:09.000Z (over 2 years ago)
Default Branch: master
Last Pushed: 2022-08-23T07:11:14.000Z (over 2 years ago)
Last Synced: 2025-02-14T03:54:09.607Z (3 months ago)
Topics: bar, bootstrap, bootstrap-template, bootstrap-theme, bootstrap5, css, expanding, html, js, react, search
Language: JavaScript
Homepage:
Size: 267 KB
Stars: 0
Watchers: 5
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: License.pdf

Awesome Lists containing this project

README

![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-react.png)

# MDB React 5

Responsive React Expanding Search Bar built with Bootstrap 5. Examples with the trigger on click and on hover.

Check out [React Expanding Search Bar Documentation](https://mdbootstrap.com/docs/react/extended/search-expanding/) for detailed instructions & even more examples.

## Examples

[On click:
![Expanding Search Bar #1](https://user-images.githubusercontent.com/108793661/186087072-82b09629-aac3-40cc-b3e6-6c24004baa1c.png)](https://mdbootstrap.com/docs/react/extended/search-expanding#section-on-click)

[On Hover:
![Expanding Search Bar #2](https://user-images.githubusercontent.com/108793661/186087086-79429272-a654-4159-8c4e-b92a8de72396.png)](https://mdbootstrap.com/docs/react/extended/search-expanding#section-on-hover)

## How to use?

1. Download MDB 5 - FREE REACT UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)

## More extended React documentation