javascript - Cannot apply any Bootstrap style in using React-bootstrap library

Question

I want to use default Bootstrap components in my React application, so I'm using React-bootstrap NPM-package. But I stuck at the very beginning: I cannot use any default component although I'm just copying very simple exmaples from official docs. Every time I use Bootstrap-styled component, I get basic component withouts styles. For example the code below renders a <button> without styles, not <Button bsStyle="danger"> from Bootstrap.

import React from "react";
import ReactDOM from "react-dom";
import {Provider} from 'react-redux';
import store from "./store";
import {Button} from 'react-bootstrap';

class App extends React.Component {
    render() {
        return (
            <Provider store={store}>
                <Button bsStyle="danger">Danger</Button>
            </Provider>
        );
    }
}

ReactDOM.render(<App/>, document.getElementById('app-container'));

Why do I have such a problem? Maybe it's about Babel or Webpack: some styles are being ignored during the packaging?

Answer 1

When you want to use react-bootstrap component you need use the bootstrap-css in your code in order to encorporate the styles.

You can do this by adding the follwowing in your index.html

<link rel="stylesheet" type="text/css" href=""https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

From the react-bootstrap docs

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.

DOCS