CODEWITHSUNDEEP
twitter-bootstrapreactjsreact-bootstrap
Umbrella
Umbrella

Reputation: 1145

React-bootstrap class styles don't apply

I'm using react-bootstrap by importing react-bootstrap components, but class styles are not applied to elements for some reason, even though I can see that bootstrap classes are given to corresponding elements in the DOM. I use my own class for positioning, it doesn't override anything. Does anyone have any ideas what could be wrong? For example:

import React, { Component } from 'react'
import {Alert} from 'react-bootstrap'

class Error extends Component {
render() {
const {errorText} = this.props
return (
  <Alert bsStyle="warning" className="error-container">
    <div className="error-msg">{errorText}</div>
  </Alert>
);
}
}

Upvotes: 1

Views: 2015

Answers (2)

Erkka Mutanen
Erkka Mutanen

Reputation: 727

Your code does not apply styles, because Bootstrap CSS resource is missing. As you noticed, the class names are being applied by the Alert component correctly. Finally, the class names do not apply the correct styles, because Bootstrap CSS resource is missing.

A minimum viable fix to the situation is to import the minified Bootstrap CSS:

1. install Bootstrap library yarn install bootstrap

2. add minified bootstrap CSS in your index.js from node_modules folder after step 1

Let's also change your Alert component import to import only Alert functionality, not the full react-bootstrap library in its entirety.

Here is an example with your implementation, importing only Alert component:

index.js

--

import 'bootstrap/dist/css/bootstrap.min.css';
import React, { Component } from 'react'
import Alert from 'react-bootstrap/Alert'

class Error extends Component {
  render() {
    const { errorText } = this.props;
    return (
        <Alert bsStyle="warning" className="error-container">
          <div className="error-msg">{errorText}</div>
        </Alert>
    );
  }
}

Upvotes: 2

Vikram Saini
Vikram Saini

Reputation: 2771

try it after adding this code to your webpack.config.js

      {
                 test: /(\.css|\.scss)$/,
                loader: 'style-loader!css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass-loader?sourceMap'
            }

Upvotes: 0

Related Questions