From 7027069e7c9de1804a4d8851118ff3cb2d9f3461 Mon Sep 17 00:00:00 2001 From: Jason Quense Date: Tue, 30 Oct 2018 15:24:47 -0400 Subject: [PATCH 1/4] Generalize the adding bootstrap documentation --- docusaurus/docs/adding-bootstrap.md | 20 ++++++-------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/docusaurus/docs/adding-bootstrap.md b/docusaurus/docs/adding-bootstrap.md index dc97b6cab94..f8d866ae527 100644 --- a/docusaurus/docs/adding-bootstrap.md +++ b/docusaurus/docs/adding-bootstrap.md @@ -3,36 +3,28 @@ id: adding-bootstrap title: Adding Bootstrap --- -You don’t have to use [reactstrap](https://reactstrap.github.io/) together with React but it is a popular library for integrating Bootstrap with React apps. If you need it, you can integrate it with Create React App by following these steps: +While you don’t have to use any specific library to integrate Bootstrap with React apps, it's often easier than trying to wrap the Bootstrap jQuery plugins. [React Bootstrap](https://react-bootstrap.netlify.com/) is the most popular option and feature rich option. [reactstrap](https://reactstrap.github.io/) is also a good choice for projects looking for smaller builds at the expense of less features. -Install reactstrap and Bootstrap from npm. reactstrap does not include Bootstrap CSS so this needs to be installed as well: +Each projects respective documentation site has detailed instructions for installing and using them. Both depend on the Bootstrap css file so install that as well: ```sh -npm install --save reactstrap bootstrap@4 +npm install --save bootstrap ``` Alternatively you may use `yarn`: ```sh -yarn add bootstrap@4 reactstrap +yarn add bootstrap ``` Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your `src/index.js` file: ```js -import 'bootstrap/dist/css/bootstrap.css'; +import 'bootstrap/dist/css/bootstrap.css' // Put any other imports below so that CSS from your // components takes precedence over default styles. ``` -Import required reactstrap components within `src/App.js` file or your custom component files: - -```js -import { Button } from 'reactstrap'; -``` - -Now you are ready to use the imported reactstrap components within your component hierarchy defined in the render method. Here is an example [`App.js`](https://gist.githubusercontent.com/zx6658/d9f128cd57ca69e583ea2b5fea074238/raw/a56701c142d0c622eb6c20a457fbc01d708cb485/App.js) redone using reactstrap. - ## Using a Custom Theme > Note: this feature is available with `react-scripts@2.0.0` and higher. @@ -55,5 +47,5 @@ $body-bg: #000; Finally, import the newly created `.scss` file instead of the default Bootstrap `.css` in the beginning of your `src/index.js` file, for example: ```javascript -import './custom.scss'; +import './custom.scss' ``` From 655db44227b6eb8cc90034db58e1805922d580f5 Mon Sep 17 00:00:00 2001 From: Jason Quense Date: Tue, 30 Oct 2018 15:28:18 -0400 Subject: [PATCH 2/4] Update adding-bootstrap.md --- docusaurus/docs/adding-bootstrap.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus/docs/adding-bootstrap.md b/docusaurus/docs/adding-bootstrap.md index f8d866ae527..4a8c3a1d649 100644 --- a/docusaurus/docs/adding-bootstrap.md +++ b/docusaurus/docs/adding-bootstrap.md @@ -3,7 +3,7 @@ id: adding-bootstrap title: Adding Bootstrap --- -While you don’t have to use any specific library to integrate Bootstrap with React apps, it's often easier than trying to wrap the Bootstrap jQuery plugins. [React Bootstrap](https://react-bootstrap.netlify.com/) is the most popular option and feature rich option. [reactstrap](https://reactstrap.github.io/) is also a good choice for projects looking for smaller builds at the expense of less features. +While you don’t have to use any specific library to integrate Bootstrap with React apps, it's often easier than trying to wrap the Bootstrap jQuery plugins. [React Bootstrap](https://react-bootstrap.netlify.com/) is the most popular option, that strives for complete parity with bootstrap. [reactstrap](https://reactstrap.github.io/) is also a good choice for projects looking for smaller builds at the expense of less features. Each projects respective documentation site has detailed instructions for installing and using them. Both depend on the Bootstrap css file so install that as well: From 3b25a26504d513c963016b02340852fa55645d73 Mon Sep 17 00:00:00 2001 From: Jason Quense Date: Mon, 24 Dec 2018 13:42:40 -0500 Subject: [PATCH 3/4] Update adding-bootstrap.md --- docusaurus/docs/adding-bootstrap.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docusaurus/docs/adding-bootstrap.md b/docusaurus/docs/adding-bootstrap.md index 4a8c3a1d649..e1af64d2a64 100644 --- a/docusaurus/docs/adding-bootstrap.md +++ b/docusaurus/docs/adding-bootstrap.md @@ -3,7 +3,7 @@ id: adding-bootstrap title: Adding Bootstrap --- -While you don’t have to use any specific library to integrate Bootstrap with React apps, it's often easier than trying to wrap the Bootstrap jQuery plugins. [React Bootstrap](https://react-bootstrap.netlify.com/) is the most popular option, that strives for complete parity with bootstrap. [reactstrap](https://reactstrap.github.io/) is also a good choice for projects looking for smaller builds at the expense of less features. +While you don’t have to use any specific library to integrate Bootstrap with React apps, it's often easier than trying to wrap the Bootstrap jQuery plugins. [React Bootstrap](https://react-bootstrap.netlify.com/) is the most popular option, that strives for complete parity with bootstrap. [reactstrap](https://reactstrap.github.io/) is also a good choice for projects looking for smaller builds at the expense of some features. Each projects respective documentation site has detailed instructions for installing and using them. Both depend on the Bootstrap css file so install that as well: @@ -20,7 +20,7 @@ yarn add bootstrap Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your `src/index.js` file: ```js -import 'bootstrap/dist/css/bootstrap.css' +import 'bootstrap/dist/css/bootstrap.css'; // Put any other imports below so that CSS from your // components takes precedence over default styles. ``` @@ -47,5 +47,5 @@ $body-bg: #000; Finally, import the newly created `.scss` file instead of the default Bootstrap `.css` in the beginning of your `src/index.js` file, for example: ```javascript -import './custom.scss' +import './custom.scss'; ``` From c0796da1661ee04bf9456eb0ad4dec007862cc5e Mon Sep 17 00:00:00 2001 From: Ian Sutherland Date: Mon, 24 Dec 2018 12:57:20 -0700 Subject: [PATCH 4/4] Update adding-bootstrap.md --- docusaurus/docs/adding-bootstrap.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus/docs/adding-bootstrap.md b/docusaurus/docs/adding-bootstrap.md index e1af64d2a64..19b3e752441 100644 --- a/docusaurus/docs/adding-bootstrap.md +++ b/docusaurus/docs/adding-bootstrap.md @@ -5,7 +5,7 @@ title: Adding Bootstrap While you don’t have to use any specific library to integrate Bootstrap with React apps, it's often easier than trying to wrap the Bootstrap jQuery plugins. [React Bootstrap](https://react-bootstrap.netlify.com/) is the most popular option, that strives for complete parity with bootstrap. [reactstrap](https://reactstrap.github.io/) is also a good choice for projects looking for smaller builds at the expense of some features. -Each projects respective documentation site has detailed instructions for installing and using them. Both depend on the Bootstrap css file so install that as well: +Each project's respective documentation site has detailed instructions for installing and using them. Both depend on the Bootstrap css file so install that as well: ```sh npm install --save bootstrap