How to use Bootstrap npm package with React

help
1

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?

1 Like
2

This is a known problem and you should follow https://github.com/meteor/meteor/issues/6037 for temporary workarounds.

1 Like
3

I’ve been using https://react-bootstrap.github.io/ with no issues if you’re willing to give that a try

1 Like