| 1 | # React-Bootstrap
|
| 2 |
|
| 3 | > **[Bootstrap 5][bootstrap]** components built with [React][react].
|
| 4 |
|
| 5 | [![GitHub Actions CI status][gh-actions-badge]][gh-actions]
|
| 6 | [![Travis CI Build status][travis-badge]][travis]
|
| 7 | [![npm][npm-badge]][npm]
|
| 8 | [![Codecov][codecov-badge]][codecov]
|
| 9 | [![Discord][discord-badge]][discord]
|
| 10 | [![Netlify][netlify-badge]][netlify]
|
| 11 |
|
| 12 | ## Bootstrap compatibility
|
| 13 |
|
| 14 | React-Bootstrap is compatible with various versions of Bootstrap. As such, you need to ensure you are using the correct combination of versions.
|
| 15 |
|
| 16 | See the below table on which version of React-Bootstrap you should be using in your project.
|
| 17 |
|
| 18 | | Bootstrap Version | React-Bootstrap Version | Documentation |
|
| 19 | | ------------- |:-------------:| -----:|
|
| 20 | | v5.x | 2.x | [Link][v5-documentation] |
|
| 21 | | v4.x | 1.x | [Link][v4-documentation] |
|
| 22 | | v3.x | 0.33.x (not maintained) | [Link][v3-documentation] |
|
| 23 |
|
| 24 | ## Migrating from previous versions
|
| 25 |
|
| 26 | ### Bootstrap 4 to Bootstrap 5
|
| 27 |
|
| 28 | If you would like to update React-Bootstrap within an existing project to use Bootstrap 5, please read our docs for **[migrating to React-Bootstrap V2][v5-migration]**.
|
| 29 |
|
| 30 | ### Bootstrap 3 to Bootstrap 4
|
| 31 |
|
| 32 | If you would like to update React-Bootstrap within an existing project to use Bootstrap 4, please read our docs for **[migrating to React-Bootstrap V1][v4-migration]**.
|
| 33 |
|
| 34 | ## Related modules
|
| 35 |
|
| 36 | - [react-router-bootstrap][react-router-bootstrap] – Integration with [React Router][react-router]
|
| 37 | - [Awesome React Bootstrap Components][awesome-react-bootstrap-components] - Additional components like off-canvas navbar, switch and sliders.
|
| 38 |
|
| 39 | ## Local setup
|
| 40 |
|
| 41 | Yarn is our package manager of choice here. Check out setup
|
| 42 | instructions [here](https://yarnpkg.com/en/docs/install) if you don't have it installed already.
|
| 43 | After that you can run `yarn run bootstrap` to install all the needed dependencies.
|
| 44 |
|
| 45 | From there you can:
|
| 46 |
|
| 47 | - Run the tests once with `yarn test` (Or run them in watch mode with `yarn run tdd`).
|
| 48 | - Start a local copy of the docs site with `yarn start`
|
| 49 | - Or build a local copy of the library with `yarn run build`
|
| 50 |
|
| 51 | ## CodeSandbox Examples
|
| 52 |
|
| 53 | [Click here](https://github.com/react-bootstrap/code-sandbox-examples) to explore some React-Bootstrap [CodeSandbox](https://codesandbox.io/) examples.
|
| 54 |
|
| 55 | [Click here](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic) to automatically open [CodeSandbox](https://codesandbox.io/) with the React-Bootstrap [CodeSandbox Examples GitHub Repository](https://github.com/react-bootstrap/code-sandbox-examples) as a workspace.
|
| 56 |
|
| 57 | ## Contributions
|
| 58 |
|
| 59 | Yes please! See the [contributing guidelines][contributing] for details.
|
| 60 |
|
| 61 | [bootstrap]: https://getbootstrap.com/
|
| 62 | [react]: https://reactjs.org/
|
| 63 | [v5-documentation]: https://react-bootstrap.github.io
|
| 64 | [v5-migration]: https://react-bootstrap.github.io/migrating
|
| 65 | [v4-documentation]: https://react-bootstrap-v4.netlify.app
|
| 66 | [v4-migration]: https://react-bootstrap-v4.netlify.app/migrating
|
| 67 | [v3-documentation]: https://react-bootstrap-v3.netlify.app
|
| 68 | [contributing]: CONTRIBUTING.md
|
| 69 | [travis-badge]: https://travis-ci.org/react-bootstrap/react-bootstrap.svg?branch=master
|
| 70 | [travis]: https://travis-ci.org/react-bootstrap/react-bootstrap
|
| 71 | [npm-badge]: https://badge.fury.io/js/react-bootstrap.svg
|
| 72 | [npm]: http://badge.fury.io/js/react-bootstrap
|
| 73 | [react-router-bootstrap]: https://github.com/react-bootstrap/react-router-bootstrap
|
| 74 | [react-router]: https://github.com/reactjs/react-router
|
| 75 | [react-bootstrap-extended]: https://github.com/rbalicki2/react-bootstrap-extended
|
| 76 | [awesome-react-bootstrap-components]: https://github.com/Hermanya/awesome-react-bootstrap-components
|
| 77 | [codecov-badge]: https://img.shields.io/codecov/c/github/react-bootstrap/react-bootstrap/master.svg
|
| 78 | [codecov]: https://codecov.io/gh/react-bootstrap/react-bootstrap
|
| 79 | [discord-badge]: https://img.shields.io/badge/Discord-Join%20chat%20%E2%86%92-738bd7.svg
|
| 80 | [discord]: https://discord.gg/AKfs9vpvRW
|
| 81 | [netlify-badge]: https://api.netlify.com/api/v1/badges/f09d443f-11b2-4454-812b-0645aeaca824/deploy-status
|
| 82 | [netlify]: https://app.netlify.com/sites/react-bootstrap/deploys
|
| 83 | [gh-actions-badge]: https://github.com/react-bootstrap/react-bootstrap/workflows/CI/badge.svg
|
| 84 | [gh-actions]: https://github.com/react-bootstrap/react-bootstrap/actions
|