React bootstrap not styling my react components

I ran into the same issue and this worked for me -->

I ended up installing bootstrap with npm:

• 1) npm i --save bootstrap

Then, in index.js (where I render App.js) I imported bootstrap's minified css file from nodes_modules like so:

• 2) import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Now the responsive positioning is working (where as before I saw react-bootstrap rendering the correct class names, but without styling).

Note: https://react-bootstrap.github.io/getting-started/introduction says you should add the css to the head of index.html. I did not have success doing it this way.

First of what you need to is to Install Bootstrap using NPM

npm install --save bootstrap

then

go for writing this statement in which component you have to use bootstrap, This works in my case.

import 'bootstrap/dist/css/bootstrap.css';

CSS Styling will start working. :)

Happy Coding!

The webpack config you use is a little different from the medium article.

In the medium article, the author uses style-loader and css-loader to process css file.

module.exports = {  entry: './main.js',  output: { path: __dirname, filename: 'bundle.js' },  module: {    loaders: [      ...      {         test: /\.css$/,         loader: "style-loader!css-loader"       },      ...    ]  },};

style-loader will inject the css code to <style/> tag. So that is why the tutorial work

In your webpack config, you use typings-for-css-modules-loader to load css. With this loader, you need to pass the css class variable name to className.

It means you should write the code like (simplify some code):

import * as React from "react";import * as bs from 'bootstrap/dist/css/bootstrap.css';import * as bst from 'bootstrap/dist/css/bootstrap-theme.css';import { Button, Col, Row } from 'react-bootstrap';import { Spinner } from '../shared/Spinner';export class SigninForm extends React.Component {  ...  render() {    return (      <Row>        <Col md={8}>          <form className={bt["signin-form"]} onSubmit={this.handleSubmit}>            <div className={bt["form-group"]}>              <label htmlFor="email">Email</label>              <input id="email" name="email" type="email" value={this.state.email} onChange={this.handleChange} />            </div>            <Button>Submit</Button>          </form>        </Col>        <Col md={4}>          Right Side      </Col>      </Row>    );  }}

Pass bt[classname] to className.

I think it will work.

btw, I find another medium article using typings-for-css-modules-loader -> link.