https://github.com/Hermanya/awesome-react-bootstrap-components

⚛️ React.js components made using 🅱️ Bootstrap
https://github.com/Hermanya/awesome-react-bootstrap-components

List: awesome-react-bootstrap-components

awesome awesome-list bootstrap reactjs

Last synced: 5 months ago
JSON representation

⚛️ React.js components made using 🅱️ Bootstrap

• Host: GitHub
• URL: https://github.com/Hermanya/awesome-react-bootstrap-components
• Owner: Hermanya
• Created: 2017-12-13T05:12:04.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-10-30T15:07:32.000Z (over 5 years ago)
• Last Synced: 2024-05-20T11:03:52.498Z (11 months ago)
• Topics: awesome, awesome-list, bootstrap, reactjs
• Homepage:
• Size: 266 KB
• Stars: 623
• Watchers: 16
• Forks: 42
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md
  • Code of conduct: code-of-conduct.md

Awesome Lists containing this project

• jimsghstars - Hermanya/awesome-react-bootstrap-components - ⚛️ React.js components made using 🅱️ Bootstrap (Others)

README

        
[![New! UI1.io – Build a custom UI Kit and export to Sketch and Bootstrap theme](/ui1.png)](https://ui1.io?ref=awesome_rbc)

# Awesome React Bootstrap Components [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)

> React.js components made using Bootstrap

Most of the following components rely on [react-bootstrap](https://react-bootstrap.github.io/), you can check out their [default components over here](https://react-bootstrap.github.io/components.html).

Also take a look at [classNamed](https://github.com/Hermanya/classnamed-components), it's the easiest way to create your own react component using bootstrap classes and utilities.

---

## [Image Cropper](https://github.com/zhaoyao91/react-bootstrap-image-cropper)

![demo](https://user-images.githubusercontent.com/3808838/65366436-64537500-dc56-11e9-8754-f4566e90ebdc.gif)

## [Easy Dialog](https://github.com/zhaoyao91/react-bootstrap-easy-dialog)

![react-bootstrap-easy-dialog demo](https://user-images.githubusercontent.com/3808838/65293160-dd869580-db8c-11e9-8a2c-271a4c3504f2.gif)

## [Dialog](https://github.com/akiroom/react-bootstrap-dialog)

![React bootstrap dialog demo](https://camo.githubusercontent.com/4ee77d759e9180b3e410db733e610d9df004897b/68747470733a2f2f692e6779617a6f2e636f6d2f64396330373363366337643636633035653533393866333836333435663435322e676966)

## [Confirmation](https://github.com/nicolas-van/react-bootstrap-confirmation)

![react-bootstrap-confirmation demo](./images/react-bootstrap-confirmation.gif)

---

## [Date picker](https://github.com/pushtell/react-bootstrap-date-picker)

![React bootstrap Date picker demo](https://cdn.rawgit.com/pushtell/react-bootstrap-date-picker/master/documentation-images/date-picker-screencast.gif)

---

## [Off-canvas Navbar](https://github.com/Hermanya/react-bootstrap-navbar-offcanvas) 3⃣ 4️⃣

![Off-canvas Navbar demo](https://media.giphy.com/media/3ohk6wh0bYPXJgbNks/giphy.gif)

---

## [International telephone input](https://github.com/theslip/react-bootstrap-intl-tel-input) 4️⃣

![International telephone input demo](https://github.com/theslip/react-bootstrap-intl-tel-input/raw/master/src/demo.gif)

---

## [Typeahead autocomplete](https://github.com/ericgio/react-bootstrap-typeahead) 4️⃣

![React bootstrap Typeahead autocomplete](https://media.giphy.com/media/3oxHQrGSbABpbrJK6I/giphy.gif)

---

## [Sweet alert](https://github.com/djorg83/react-bootstrap-sweetalert) 3⃣

![React bootstrap sweet alert demo](https://media.giphy.com/media/l0CLTXKYGSLN5nPkA/giphy.gif)

---

## [Tabs](https://github.com/freeranger/react-bootstrap-tabs)

![React bootstrap tabs demo example](https://media.giphy.com/media/xUOxfiIzbp13vMxvWw/giphy.gif)

---

## [Date range picker](https://github.com/skratchdot/react-bootstrap-daterangepicker) 3⃣

![React bootstrap date range picker demo](https://media.giphy.com/media/3ohs81CDOQkeGT7FN6/giphy.gif)

---

## [Select](https://github.com/tjwebb/react-bootstrap-select) 3⃣



---

## [Switch](https://github.com/Julusian/react-bootstrap-switch) ️3⃣

![React bootstrap switch](https://media.giphy.com/media/xUOxfhPmGgy03XchIA/giphy.gif)

---

## [Slider](https://github.com/brownieboy/react-bootstrap-slider) ️3⃣

![React bootstrap slider](https://media.giphy.com/media/3o6fJ7mNFw1KHM0XuM/giphy.gif)

---

## [Table](https://github.com/AllenFang/react-bootstrap-table) 3⃣ 4️⃣

 

---

## [Button loader](https://github.com/yury-dymov/react-bootstrap-button-loader)



---

## [React router integration](https://github.com/react-bootstrap/react-router-bootstrap)

```html

  Foo

```

## Contribute

Contributions welcome!

## License

[![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](http://creativecommons.org/publicdomain/zero/1.0)

To the extent possible under law, Herman Starikov has waived all copyright and

related or neighboring rights to this work.