How to integrate bootstrap from NPM in React application?

Question

I'm building a React application and would like to use Bootstrap in it. Therefore I'm using the package bootstrap-react. Bootstrap's CSS has to be integrated in the index.html. Currently I've got this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

I would like to use it directly from npm (https://www.npmjs.com/package/bootstrap) but don't know how to reference it. I could copy it via Gulp but is there a better way?

Sean Adkinson · Accepted Answer · 2015-09-01 05:13:25Z

4

webpack

If you are using webpack, you can use the style-loader to require() the CSS file directly.

SASS

If you are using SASS, you can install bootstrap-sass and import the file directly from node_modules into your scss file

@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

I've had the most success with these two options. You can probably do the same thing with Less, although Bootstrap just announced they were switching to SASS, so you might want to switch anyway.

answered Sep 1, 2015 at 5:13

Sean Adkinson

8,6453 gold badges51 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to integrate bootstrap from NPM in React application?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related