Update Bootstrap docs (#213)

* update bootstrap docs

* Update documentation/docs/bootstrap.md

Co-authored-by: Necati Özmen <[email protected]>

Co-authored-by: Necati Özmen <[email protected]>

Author: mhrrmk

documentation/docs/bootstrap.md

@@ -7,17 +7,59 @@ description: How to use Bootstrap with Next.js?
 
 Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
 
-:::tip
+### React Bootstrap
 
-If you also add `sass/scss` under CSS Preprocessors during creation phase, you can easily [customize Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/theming/#sass). Bootstrap’s source ***sass*** files are added under `src/styles` directory.
+**superplate** uses `react-bootstrap` component library for bootstrap plugin. React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery.  
+[Refer to official documentation for detailed usage. &#8594](https://react-bootstrap.github.io/getting-started/introduction)
 
-:::
+- Some stylesheet is required to use React Bootstrap components.
+
+```tsx title="pages/_app.tsx"
+import "bootstrap/dist/css/bootstrap.min.css";
+```
+
+### Using Components
+
+- Import from `react-bootstrap`
+
+```js
+import { Button } from 'react-bootstrap';
+```
+
+- Or import individual components
+
+```js
+import Button from 'react-bootstrap/Button';
+```
+
+- Customize components with props
+
+```tsx title="src/components/main/index.tsx"
+<Button
+    href="https://pankod.github.io/superplate/"
+    target="_blank"
+    variant="primary"
+    size="lg">
+    Docs
+</Button>
+```
+
+- Bootstrap utility classes can also be used with components
+```tsx title="src/components/cards/index.tsx"
+<Container className="my-5 flex-grow-1">
+    ...
+</Container>
+```
 
 ### Using Sass with Bootstrap
-If `sass/scss` is selected you can start [customizing](https://getbootstrap.com/docs/4.6/getting-started/theming/#sass) in `src/styles/app.scss`  
+:::tip
+
+If you also add `sass/scss` under CSS Preprocessors during creation phase, you can easily [customize Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/theming/#sass). Bootstrap’s source ***sass*** files are added under `src/styles` directory.  
 [See Sass/SCSS doc &#8594](scss.md)
 
-If it's not selected, Sass can be added later to customize Bootstrap,
+:::
+
+If `sass/scss` plugin is not selected, Sass can be added later to customize Bootstrap,
 
 - Add a custom scss file `app.scss` under `src/styles`
 
@@ -73,4 +115,33 @@ npm install sass
 ```
 
 ### Adding Bootstrap to your project later
-If you didn't add bootstrap during project creation phase, you can add it later following [official docs](https://getbootstrap.com/docs/4.6/getting-started/introduction/)
+If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.
+
+- Install `react-bootstrap` and `bootstrap` packages
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  defaultValue="npm"
+  values={[
+    {label: 'npm', value: 'npm'},
+    {label: 'yarn', value: 'yarn'},
+  ]}>
+  <TabItem value="npm">
+
+```bash
+npm install react-bootstrap bootstrap
+```
+  </TabItem>
+  <TabItem value="yarn">
+
+```bash
+yarn add react-bootstrap bootstrap
+```          
+  </TabItem>
+</Tabs>
+
+- [Follow instructions in React Bootstrap](#react-bootstrap)
+
+[Refer to official documentation on installation for detailed usage. &#8594](https://react-bootstrap.github.io/getting-started/introduction#installation)