How to use Bootstrap npm package with React

Question

I have a meteor application which uses react at the front-end. I have installed bootstrap using npm (not atmospherejs), and I'm having trouble using the bootstrap styles in my react component. Here's the code for my main component.

import React from 'react';

import Bootstrap from 'bootstrap';

const Layout = ({content = () => null }) => (

  <div>
   <div className="row">
     <div className="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
     <div className="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>      
     <div className="clearfix visible-xs-block"></div>
     <div className="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
   </div>
  </div>  
);

export default Layout;

I'm new to react. Can someone tell me what's missing here and what I'm doing wrong?

The styles are defined in CSS. You're importing the JavaScript. — Chiru
– Chiru, Commented Apr 11, 2016 at 4:38
@DovBenyominSohacheski it's meteor so I don't have to use a bundling package right? — TA3
– TA3, Commented Apr 11, 2016 at 4:40
@ThaiTran I'm using a stateless component here. That's why I don't have the React.createClass. — TA3
– TA3, Commented Apr 11, 2016 at 5:00

Pavlo · Accepted Answer · 2016-04-11 08:54:25Z

1

I assume that you want to import Bootstrap's CSS to use the appropriate classes in your component. This can be done with Webpack:

installation

Install the loaders from npm.

npm install style-loader css-loader --save-dev

configuration

Here is a configuration example that enables require() css:

{
    // ...
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
}

using css

// in your modules just require the stylesheet
// This has the side effect that a <style>-tag is added to the DOM.
require("./stylesheet.css");

// or
// import "./stylesheet.css";

answered Apr 11, 2016 at 8:54

Pavlo

45.2k14 gold badges83 silver badges114 bronze badges

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

1 Comment

TA3 Over a year ago

Since I'm using meteor, I don't think there's a point using a bundling tool like Webpack, am I correct @Pavlo?

TA3 · Accepted Answer · 2021-06-18 02:54:18Z

0

This seems to be a known problem with Meteor. So I guess I'll have to depend on alternatives until MDG find a solution.

Style files imports from node_modules

edited Jun 18, 2021 at 2:54

answered Apr 11, 2016 at 10:48

TA3

4103 gold badges6 silver badges21 bronze badges

1 Comment

Pavlo Over a year ago

Please include relevant parts in the answer itself, this will prevent the answer from link rot.

Collectives™ on Stack Overflow

How to use Bootstrap npm package with React

2 Answers 2

installation

configuration

using css

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

installation

configuration

using css

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related