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 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.
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:
npm install --save bootstrap
Alternatively you may use
yarn add bootstrap
Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your
import 'bootstrap/dist/css/bootstrap.css'; // Put any other imports below so that CSS from your // components takes precedence over default styles.
Using a Custom Theme
Note: this feature is available with
Sometimes you might need to tweak the visual styles of Bootstrap (or equivalent package).
email@example.com you can import
.scss files. This makes it possible to use a package's built-in Sass variables for global style preferences.
To customize Bootstrap, create a file called
src/custom.scss (or similar) and import the Bootstrap source stylesheet. Add any overrides before the imported file(s). You can reference Bootstrap's documentation for the names of the available variables.
// Override default variables before the import $body-bg: #000; // Import Bootstrap and its default variables @import '~bootstrap/scss/bootstrap.scss';
Note: You must prefix imports from
~as displayed above.
Finally, import the newly created
.scss file instead of the default Bootstrap
.css in the beginning of your
src/index.js file, for example: