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?

Yes, that was the problem. I didn't include Bootstrap CSS <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> — JustLogin
– JustLogin, Commented Nov 24, 2016 at 11:08

Shubham Khatri · Accepted Answer · 2016-11-24 11:10:42Z

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

answered Nov 24, 2016 at 11:10

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

3 Comments

JustLogin Over a year ago

But this is somehow strange. Because I'm using packager, in my index.html I include just one style: <link rel="stylesheet" type="text/css" href="style.css"/>, although I wrote a lot of .css files. Why are Bootstrap styles not included in package?

Shubham Khatri Over a year ago

Which packager do you use. As of I know, I include all the css files that I write and the other way would be specify a css-loader in webpack and with that we can require the relevant file in the required component

JustLogin Over a year ago

I'm using Webpack and Babel.

Collectives™ on Stack Overflow

Cannot apply any Bootstrap style in using React-bootstrap library

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related