react-bootstrap not importing properly

Question

I'm trying to put together a trivial example of react-bootstrap to see it in action, but I'm not getting any components to render properly. For example,

Here is a trivial component:

import React from 'react';
import {ButtonToolbar, DropdownButton, MenuItem} from 'react-bootstrap';

export default React.createClass({
  render: function() {
    return <div>

      <ButtonToolbar>
        <DropdownButton bsSize="large" title="Large button" id="dropdown-size-large">
          <MenuItem eventKey="1">Action</MenuItem>
          <MenuItem eventKey="2">Another action</MenuItem>
          <MenuItem eventKey="3">Something else here</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey="4">Separated link</MenuItem>
        </DropdownButton>
      </ButtonToolbar>
    </div>
  }
});

here is the index.html where i'm loading in the scripts

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"></link>
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700"></link>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.1/react-bootstrap.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

I've confirmed ButtonToolbar, DropdownButton, and MenuItem are getting imported in, and the scripts are loading ok, but the component is just plain html, not bootstrap style. What am I missing?

Answer 1

You need to explicitly add the bootstrap CSS to your project. The CSS style is not included with the react bootstrap components.

Check Bootstrap for options on how to include it in your project.

One option is to install the bootstrap package

npm install --save bootstrap

and link to the stylesheet in your HTML file:

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">

react-bootstrap not importing properly

Question

1 answers

solution1
2 ACCPTED 2016-01-02 23:50:04

react-bootstrap not importing properly

Question

1 answers

solution1 2 ACCPTED 2016-01-02 23:50:04

solution1
2 ACCPTED 2016-01-02 23:50:04