https://create-react-app.dev/assets/js/90313351.e6bfe5c2.js

1"use strict";(self.webpackChunkcra_docs=self.webpackChunkcra_docs||[]).push([[1452],{876:function(e,t,a){a.d(t,{Zo:function(){return c},kt:function(){return m}});var r=a(2784);function n(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function s(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?o(Object(a),!0).forEach((function(t){n(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function i(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a,r,n={},o=Object.keys(e);for(r=0;r<o.length;r++)a=o[r],t.indexOf(a)>=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)a=o[r],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var p=r.createContext({}),l=function(e){var t=r.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):s(s({},t),e)),a},c=function(e){var t=l(e.components);return r.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,p=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),d=l(a),m=n,f=d["".concat(p,".").concat(m)]||d[m]||u[m]||o;return a?r.createElement(f,s(s({ref:t},c),{},{components:a})):r.createElement(f,s({ref:t},c))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,s=new Array(o);s[0]=d;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,s[1]=i;for(var l=2;l<o;l++)s[l]=a[l];return r.createElement.apply(null,s)}return r.createElement.apply(null,a)}d.displayName="MDXCreateElement"},4264:function(e,t,a){a.r(t),a.d(t,{frontMatter:function(){return i},contentTitle:function(){return p},metadata:function(){return l},toc:function(){return c},default:function(){return d}});var r=a(7896),n=a(1461),o=(a(2784),a(876)),s=["components"],i={id:"adding-bootstrap",title:"Adding Bootstrap"},p=void 0,l={unversionedId:"adding-bootstrap",id:"adding-bootstrap",title:"Adding Bootstrap",description:"While you don\u2019t 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 is the most popular option that strives for complete parity with Bootstrap. reactstrap is also a good choice for projects looking for smaller builds at the expense of some features.",source:"@site/../docs/adding-bootstrap.md",sourceDirName:".",slug:"/adding-bootstrap",permalink:"/docs/adding-bootstrap",editUrl:"https://github.com/facebook/create-react-app/edit/main/docusaurus/website/../docs/adding-bootstrap.md",tags:[],version:"current",lastUpdatedBy:"Andrew Wong",lastUpdatedAt:1618195058,formattedLastUpdatedAt:"4/11/2021",frontMatter:{id:"adding-bootstrap",title:"Adding Bootstrap"},sidebar:"docs",previous:{title:"Using Global Variables",permalink:"/docs/using-global-variables"},next:{title:"Adding Flow",permalink:"/docs/adding-flow"}},c=[{value:"Using a Custom Theme",id:"using-a-custom-theme",children:[],level:2}],u={toc:c};function d(e){var t=e.components,a=(0,n.Z)(e,s);return(0,o.kt)("wrapper",(0,r.Z)({},u,a,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"While you don\u2019t have to use any specific library to integrate Bootstrap with React apps, it's often easier than trying to wrap the Bootstrap jQuery plugins. ",(0,o.kt)("a",{parentName:"p",href:"https://react-bootstrap.netlify.com/"},"React Bootstrap")," is the most popular option that strives for complete parity with Bootstrap. ",(0,o.kt)("a",{parentName:"p",href:"https://reactstrap.github.io/"},"reactstrap")," is also a good choice for projects looking for smaller builds at the expense of some features."),(0,o.kt)("p",null,"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:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-sh"},"npm install bootstrap\n")),(0,o.kt)("p",null,"Alternatively you may use ",(0,o.kt)("inlineCode",{parentName:"p"},"yarn"),":"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-sh"},"yarn add bootstrap\n")),(0,o.kt)("p",null,"Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your ",(0,o.kt)("inlineCode",{parentName:"p"},"src/index.js")," file:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"import 'bootstrap/dist/css/bootstrap.css';\n// Put any other imports below so that CSS from your\n// components takes precedence over default styles.\n")),(0,o.kt)("h2",{id:"using-a-custom-theme"},"Using a Custom Theme"),(0,o.kt)("blockquote",null,(0,o.kt)("p",{parentName:"blockquote"},"Note: this feature is available with ",(0,o.kt)("inlineCode",{parentName:"p"},"[email protected]")," and higher.")),(0,o.kt)("p",null,"Sometimes you might need to tweak the visual styles of Bootstrap (or equivalent package)."),(0,o.kt)("p",null,"As of ",(0,o.kt)("inlineCode",{parentName:"p"},"[email protected]")," you can import ",(0,o.kt)("inlineCode",{parentName:"p"},".scss")," files. This makes it possible to use a package's built-in Sass variables for global style preferences."),(0,o.kt)("p",null,"To enable ",(0,o.kt)("inlineCode",{parentName:"p"},"scss")," in Create React App you will need to install ",(0,o.kt)("inlineCode",{parentName:"p"},"sass"),"."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-sh"},"npm install sass\n")),(0,o.kt)("p",null,"Alternatively you may use ",(0,o.kt)("inlineCode",{parentName:"p"},"yarn"),":"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-sh"}

1,"yarn add sass\n")),(0,o.kt)("p",null,"To customize Bootstrap, create a file called ",(0,o.kt)("inlineCode",{parentName:"p"},"src/custom.scss")," (or similar) and import the Bootstrap source stylesheet. Add any overrides ",(0,o.kt)("em",{parentName:"p"},"before")," the imported file(s). You can reference ",(0,o.kt)("a",{parentName:"p",href:"https://getbootstrap.com/docs/4.6/getting-started/theming/#variable-defaults"},"Bootstrap's documentation")," for the names of the available variables."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-scss"},"// Override default variables before the import\n$body-bg: #000;\n\n// Import Bootstrap and its default variables\n@import '~bootstrap/scss/bootstrap.scss';\n")),(0,o.kt)("blockquote",null,(0,o.kt)("p",{parentName:"blockquote"},(0,o.kt)("strong",{parentName:"p"},"Note:")," You can prefix paths with ",(0,o.kt)("inlineCode",{parentName:"p"},"~"),", as displayed above, to resolve modules from ",(0,o.kt)("inlineCode",{parentName:"p"},"node_modules"),".")),(0,o.kt)("p",null,"Finally, import the newly created ",(0,o.kt)("inlineCode",{parentName:"p"},".scss")," file instead of the default Bootstrap ",(0,o.kt)("inlineCode",{parentName:"p"},".css")," in the beginning of your ",(0,o.kt)("inlineCode",{parentName:"p"},"src/index.js")," file, for example:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-javascript"},"import './custom.scss';\n")))}d.isMDXComponent=!0}}]);