{"version":3,"sources":["webpack:///./src/components/Callout.js","webpack:///./src/components/BrowserGlobalsCodeBlock.js","webpack:///./src/components/CssCodeBlock.js","webpack:///./src/components/DocLink.js","webpack:///./src/pages/getting-started/introduction.mdx"],"names":["styles","require","Callout","title","children","theme","role","className","BrowserGlobalsCodeBlock","CodeBlock","mode","codeText","config","bootstrapVersion","cssHash","CssCodeBlock","DocLink","path","href","_frontmatter","layoutProps","MDXLayout","DefaultLayout","MDXContent","components","props","mdxType","parentName","isMDXComponent"],"mappings":"4FACA,yBAIMA,EAASC,EAAQ,QAmBRC,IAXf,YAA8C,IAA3BC,EAA0B,EAA1BA,MAAOC,EAAmB,EAAnBA,SAAUC,EAAS,EAATA,MAClC,OACE,2BAAOC,KAAK,OAAOC,UAAWP,EAAOK,GAAS,YAC3CF,GAAS,4BAAQI,UAAU,MAAMJ,GAClC,6BAAMC,M,oKCcGI,MA1Bf,WACE,OACE,kBAACC,EAAA,QAAD,CACEC,KAAK,OACLC,SAAQ,gW,ECJwBC,yLAA9BC,E,EAAAA,iBAAkBC,E,EAAAA,QAmBXC,MAlBf,WACE,OACE,kBAACN,EAAA,QAAD,CACEC,KAAK,OACLC,SAAQ,kFAGsCE,EAHtC,yCAICC,EAJD,wCCJCE,MAJf,YAAsC,IAAnBC,EAAkB,EAAlBA,KAAMb,EAAY,EAAZA,SACvB,OAAO,uBAAGc,KAASN,oCAAiBK,GAASb,I,iFCOxC,IAAMe,EAAe,GAOtBC,EAAc,CAClBD,gBAEIE,EAAYC,IACH,SAASC,EAAT,GAGZ,IAFDC,EAEC,EAFDA,WACGC,E,oIACF,mBACD,OAAO,cAACJ,EAAD,iBAAeD,EAAiBK,EAAhC,CAAuCD,WAAYA,EAAYE,QAAQ,cAI5E,mBAAQ,CACN,GAAM,gBADR,gBAGA,mBAAGnB,UAAU,QAAb,wDACA,mBAAQ,CACN,GAAM,gBADR,gBAGA,qHACmB,4BAAYoB,WAAW,KAAvB,OADnB,QAC2E,4BAAYA,WAAW,KAAvB,QAD3E,oBAEA,6JAEM,cAAC,EAAD,CAASV,KAAK,iCAAiCS,QAAQ,WAAvD,qBAFN,aAGA,yBAAK,oCAAMC,WAAW,OAAU,IAA3B,4CAEL,mBAAQ,CACN,GAAM,eADR,eAGA,yKAES,wBAAQA,WAAW,KAAnB,eAFT,8BAGA,yBAAK,oCAAMA,WAAW,OAAU,IAA3B,sIAIL,kOAGF,iCAAGA,WAAW,KAAQ,CAChB,KAAQ,kEADd,QAHE,KAMA,cAAC,EAAD,CAAcD,QAAQ,iBACtB,mOAGF,iCAAGC,WAAW,KAAQ,CAChB,KAAQ,+DADd,sBAHE,6EAQA,mBAAQ,CACN,GAAM,aADR,aAGA,yEACF,4BAAYA,WAAW,KAAvB,0BADE,wLAKA,yBAAK,oCAAMA,WAAW,OAAU,CAC5B,UAAa,iBADZ,oHAOL,mBAAQ,CACN,GAAM,mBADR,mBAGA,qCAAkB,4BAAYA,WAAW,KAAvB,sBAAlB,SACF,4BAAYA,WAAW,KAAvB,0BADE,iDAEc,4BAAYA,WAAW,KAAvB,yBAFd,4CAGuB,iCAAGA,WAAW,KAAQ,CACzC,KAAQ,uCADW,SAHvB,qCAOA,cAAC,EAAD,CAAyBD,QAAQ,4BACjC,mBAAQ,CACN,GAAM,YADR,YAGA,qGACF,iCAAGC,WAAW,KAAQ,CAChB,KAAQ,4EADd,cADE,wBAKA,mBAAQ,CACN,GAAM,UADR,UAGA,6JAEA,cAACzB,EAAA,EAAD,CAASG,MAAM,SAASF,MAAM,aAAauB,QAAQ,WAAnD,uKAKA,cAACxB,EAAA,EAAD,CAASG,MAAM,UAAUF,MAAM,mBAAmBuB,QAAQ,WACxD,+KAGJ,iCAAGC,WAAW,KAAQ,CACd,KAAQ,2FADhB,UAIE,mBAAQ,CACN,GAAM,mBADR,mBAGA,4EACF,iCAAGA,WAAW,KAAQ,CAChB,KAAQ,qGADd,SADE,SAIE,cAAC,EAAD,CAASV,KAAK,wDAAwDS,QAAQ,WAA9E,aAJF,MASJH,EAAWK,gBAAiB","file":"component---src-pages-getting-started-introduction-mdx-8ff4b5dc3dc2f7e07feb.js","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\n\n\nconst styles = require('./Callout-styles.module.scss');\n\nconst propTypes = {\n  title: PropTypes.node,\n  children: PropTypes.node,\n  theme: PropTypes.oneOf(['danger', 'warning']),\n};\n\nfunction Callout({ title, children, theme }) {\n  return (\n    <aside role=\"note\" className={styles[theme || 'warning']}>\n      {title && <header className=\"h5\">{title}</header>}\n      <div>{children}</div>\n    </aside>\n  );\n}\n\nCallout.propTypes = propTypes;\n\nexport default Callout;\n","import React from 'react';\nimport CodeBlock from './CodeBlock';\n\nconst propTypes = {};\n\nfunction BrowserGlobalsCodeBlock() {\n  return (\n    <CodeBlock\n      mode=\"html\"\n      codeText={`\n<script src=\"https://unpkg.com/react/umd/react.production.min.js\" crossorigin />\n\n<script\n  src=\"https://unpkg.com/react-dom/umd/react-dom.production.min.js\"\n  crossorigin\n/>\n\n<script\n  src=\"https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js\"\n  crossorigin\n/>\n\n<script>var Alert = ReactBootstrap.Alert;</script>\n\n`}\n    />\n  );\n}\n\nBrowserGlobalsCodeBlock.propTypes = propTypes;\n\nexport default BrowserGlobalsCodeBlock;\n","import React from 'react';\nimport CodeBlock from './CodeBlock';\n\nconst propTypes = {};\n\nconst { bootstrapVersion, cssHash } = config;\nfunction CssCodeBlock() {\n  return (\n    <CodeBlock\n      mode=\"html\"\n      codeText={`\n<link\n  rel=\"stylesheet\"\n  href=\"https://maxcdn.bootstrapcdn.com/bootstrap/${bootstrapVersion}/css/bootstrap.min.css\"\n  integrity=\"${cssHash}\"\n  crossorigin=\"anonymous\"\n/>\n`}\n    />\n  );\n}\n\nCssCodeBlock.propTypes = propTypes;\n\nexport default CssCodeBlock;\n","import React from 'react';\n\nfunction DocLink({ path, children }) {\n  return <a href={`${config.docsUrl}${path}`}>{children}</a>;\n}\n\nexport default DocLink;\n","import React from 'react'\n  /* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsx mdx */\n\nimport DefaultLayout from \"/opt/build/repo/www/src/layouts/ApiLayout.js\";\nimport Callout from '../../components/Callout';\nimport BrowserGlobalsCodeBlock from '../../components/BrowserGlobalsCodeBlock';\nimport CssCodeBlock from '../../components/CssCodeBlock';\nimport DocLink from '../../components/DocLink';\nexport const _frontmatter = {};\n\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return <div {...props} />;\n};\n\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = DefaultLayout;\nexport default function MDXContent({\n  components,\n  ...props\n}) {\n  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n\n\n\n    <h1 {...{\n      \"id\": \"introduction\"\n    }}>{`Introduction`}</h1>\n    <p className=\"lead\">Learn how to include React Bootstrap in your project</p>\n    <h3 {...{\n      \"id\": \"installation\"\n    }}>{`Installation`}</h3>\n    <p>{`The best way to consume React-Bootstrap is via the npm package which\nyou can install with `}<inlineCode parentName=\"p\">{`npm`}</inlineCode>{` (or `}<inlineCode parentName=\"p\">{`yarn`}</inlineCode>{` if you prefer).`}</p>\n    <p>{`If you plan on customizing the Bootstrap Sass files, or don't want\nto use a CDN for the stylesheet, it may be helpful to\ninstall `}<DocLink path=\"/getting-started/download/#npm\" mdxType=\"DocLink\">{`vanilla Bootstrap`}</DocLink>{` as well.`}</p>\n    <pre><code parentName=\"pre\" {...{}}>{`npm install react-bootstrap bootstrap\n`}</code></pre>\n    <h2 {...{\n      \"id\": \"stylesheets\"\n    }}>{`Stylesheets`}</h2>\n    <p>{`Because React-Bootstrap doesn't depend on a very precise version of\nBootstrap, we don't ship with any included css. However, some\nstylesheet `}<strong parentName=\"p\">{`is required`}</strong>{` to use these components. `}</p>\n    <pre><code parentName=\"pre\" {...{}}>{`{/* The following line can be included in your src/index.js or App.js file*/}\n\nimport 'bootstrap/dist/css/bootstrap.min.css';\n`}</code></pre>\n    <p>{`How and which Bootstrap styles you include is up to you, but the\nsimplest way is to include the latest styles from the CDN. A little\nmore information about the benefits of using a CDN can be found\n`}<a parentName=\"p\" {...{\n        \"href\": \"https://www.w3schools.com/bootstrap/bootstrap_get_started.asp\"\n      }}>{`here`}</a>{`.`}</p>\n    <CssCodeBlock mdxType=\"CssCodeBlock\" />\n    <p>{`For more advanced use cases you can also use a bundler like Webpack\nor Browserify to include the CSS files for you as part of your build\nprocess but that is beyond the scope of this guide. Also see\n`}<a parentName=\"p\" {...{\n        \"href\": \"https://getbootstrap.com/docs/4.3/getting-started/theming/\"\n      }}>{`the Bootstrap docs`}</a>{`\nfor details about customizing stylesheets to match your component\nuse.`}</p>\n    <h3 {...{\n      \"id\": \"importing\"\n    }}>{`Importing`}</h3>\n    <p>{`You should import individual components like:\n`}<inlineCode parentName=\"p\">{`react-bootstrap/Button`}</inlineCode>{` rather than the entire library.\nDoing so pulls in only the specific components that you use, which\ncan significantly reduce the amount of code you end up sending to\nthe client.`}</p>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-jsx\"\n      }}>{`import Button from 'react-bootstrap/Button';\n\n// or less ideally\nimport { Button } from 'react-bootstrap';\n`}</code></pre>\n    <h3 {...{\n      \"id\": \"browser-globals\"\n    }}>{`Browser globals`}</h3>\n    <p>{`We provide `}<inlineCode parentName=\"p\">{`react-bootstrap.js`}</inlineCode>{` and\n`}<inlineCode parentName=\"p\">{`react-bootstrap.min.js`}</inlineCode>{` bundles with all components\nexported on the `}<inlineCode parentName=\"p\">{`window.ReactBootstrap`}</inlineCode>{` object. These\nbundles are available on `}<a parentName=\"p\" {...{\n        \"href\": \"https://unpkg.com/react-bootstrap/\"\n      }}>{`unpkg`}</a>{`, as\nwell as in the npm package.`}</p>\n    <BrowserGlobalsCodeBlock mdxType=\"BrowserGlobalsCodeBlock\" />\n    <h3 {...{\n      \"id\": \"examples\"\n    }}>{`Examples`}</h3>\n    <p>{`React-Bootstrap has started a repo with a few basic CodeSandbox examples.\n`}<a parentName=\"p\" {...{\n        \"href\": \"https://github.com/react-bootstrap/react-bootstrap#codesandbox-examples\"\n      }}>{`Click here`}</a>{`\nto check them out.`}</p>\n    <h3 {...{\n      \"id\": \"themes\"\n    }}>{`Themes`}</h3>\n    <p>{`React-Bootstrap is compatible with existing Bootstrap themes. Just\nfollow the installation instructions for your theme of choice.`}</p>\n    <Callout theme=\"danger\" title=\"Watch out!\" mdxType=\"Callout\">\n  Because React-Bootstrap completely reimplements Bootstrap's JavaScript, it's\n  not automatically compatible with themes that extend the default JavaScript\n  behaviors.\n    </Callout>\n    <Callout theme=\"warning\" title=\"Create React App\" mdxType=\"Callout\">\n      <p>{`If you would like to add a custom theme on your app using Create React\nApp, they have additional documentation for Create React App and\nBootstrap\n`}<a parentName=\"p\" {...{\n          \"href\": \"https://facebook.github.io/create-react-app/docs/adding-bootstrap#using-a-custom-theme\"\n        }}>{`here`}</a></p>\n    </Callout>\n    <h2 {...{\n      \"id\": \"browser-support\"\n    }}>{`Browser support`}</h2>\n    <p>{`We aim to support all browsers supported by both\n`}<a parentName=\"p\" {...{\n        \"href\": \"http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills\"\n      }}>{`React`}</a>{`\nand `}<DocLink path=\"/getting-started/browsers-devices/#supported-browsers\" mdxType=\"DocLink\">{`Bootstrap`}</DocLink>{`.`}</p>\n\n    </MDXLayout>;\n}\n;\nMDXContent.isMDXComponent = true;\n      "],"sourceRoot":""}