title: React bootstrap not styling my react components
body: <p>Just started out using React yesterday so setting up a demo app. Environment is:</p>
  
  <ol>
  <li>Typescript</li>
  <li>Webpack</li>
  <li>React &amp; React DOM</li>
  </ol>
  
  <p>I'm trying to setup Bootstrap styles.</p>
  
  <p>I followed this tutorial along but modified it to suit Typescript: </p>
  
  <p><a href="https://medium.com/@victorleungtw/how-to-use-webpack-with-react-and-bootstrap-b94d33765970" rel="noreferrer">https://medium.com/@victorleungtw/how-to-use-webpack-with-react-and-bootstrap-b94d33765970</a></p>
  
  <p>Everything works, the page displays the signin form and the Bootstrap HTMl is output by React-Bootstrap. But the styles are not applied to the elements, it's just a plain HTML page with none of the Bootstrap styles applied. I'm not sure what I'm missing from the config:</p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <p>I've added the loaders through npm as mentioned in the tutorial, but also adjusted to setup Typescript modules from the css.</p>
  
  <pre><code>module.exports = {
      entry: {
          catalog: "./src/apps/CatalogApp.tsx",
          auth: "./src/apps/AuthApp.tsx"
      },
      output: {
          filename: "[name].bundle.js",
          publicPath: "/build/",
          path: __dirname + "/dist"
      },
  
      // Enable sourcemaps for debugging webpack's output.
      devtool: "source-map",
  
      resolve: {
          // Add '.ts' and '.tsx' as resolvable extensions.
          extensions: [".ts", ".tsx", ".js", ".json"]
      },
  
      module: {
          rules: [
              // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
              {
                  test: /\.tsx?$/,
                  loader: "awesome-typescript-loader"
              },
  
              // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
              {
                  enforce: "pre",
                  test: /\.js$/,
                  loader: "source-map-loader"
              },
  
              // css loader
              {
                  test: /\.css$/,
                  loader: "typings-for-css-modules-loader?modules"
              },
  
              {
                  test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
                  loader: 'url-loader?limit=10000&amp;mimetype=application/font-woff'
                },
                {
                  test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
                  loader: 'url-loader?limit=10000&amp;mimetype=application/octet-stream'
                },
                {
                  test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
                  loader: 'file-loader'
                },
                {
                  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
                  loader: 'url-loader?limit=10000&amp;mimetype=image/svg+xml'
                }
          ]
      },
  
      // When importing a module whose path matches one of the following, just
      // assume a corresponding global variable exists and use that instead.
      // This is important because it allows us to avoid bundling all of our
      // dependencies, which allows browsers to cache those libraries between builds.
      externals: {
          "react": "React",
          "react-dom": "ReactDOM"
      }
  };
  </code></pre>
  
  <p><strong>AuthApp.tsx</strong></p>
  
  <p>This is my entry point for the application.</p>
  
  <pre><code>import * as React from "react";
  import * as ReactDOM from "react-dom";
  
  import { SigninForm } from "../components/users/SigninForm";
  import { MiniCart } from '../components/cart/MiniCart';
  import { UserMenu } from '../components/users/UserMenu';
  import * as bs from 'bootstrap/dist/css/bootstrap.css';
  import * as bst from 'bootstrap/dist/css/bootstrap-theme.css';
  
  if (document.getElementById("signin-form")) {
      ReactDOM.render(
          &lt;SigninForm /&gt;,
          document.getElementById("signin-form")
      );
  }
  
  if (document.getElementById('cart')) {
      ReactDOM.render(
          &lt;MiniCart /&gt;,
          document.getElementById('cart')
      );
  }
  
  if (document.getElementById('user-menu')) {
      ReactDOM.render(
          &lt;UserMenu /&gt;,
          document.getElementById('user-menu')
      );
  }
  </code></pre>
  
  <p><strong>SigninForm.tsx</strong></p>
  
  <p>And the relevant UI for the signin form. </p>
  
  <pre><code>import * as React from 'react';
  import * as ReactDOM from "react-dom";
  import { Button, Col, Row } from 'react-bootstrap';
  
  import { Spinner } from '../shared/Spinner';
  
  interface SigninFormProps {
  }
  
  interface SigninFormState {
    email: string;
    password: string;
  }
  
  export class SigninForm extends React.Component&lt;SigninFormProps, SigninFormState&gt; {
  
    constructor(props: SigninFormProps) {
      super(props);
      this.state = {
        email: '',
        password: ''
      };
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event: any) {
      this.setState({ [event.target.name]: event.target.value });
    }
  
    handleSubmit(event: any) {
      event.preventDefault();
      console.log('Submitting form', this.state);
    }
  
    render() {
      return (
        &lt;Row&gt;
          &lt;Col md={8}&gt;
            &lt;form className="signin-form" onSubmit={this.handleSubmit}&gt;
              &lt;div className="form-group"&gt;
                &lt;label htmlFor="email"&gt;Email&lt;/label&gt;
                &lt;input id="email" name="email" type="email" value={this.state.email} onChange={this.handleChange} /&gt;
              &lt;/div&gt;
              &lt;div className="form-group"&gt;
                &lt;label htmlFor="password"&gt;Password&lt;/label&gt;
                &lt;input id="password" name="password" type="password" value={this.state.password} onChange={this.handleChange} /&gt;
              &lt;/div&gt;
              &lt;Button&gt;Submit&lt;/Button&gt;
            &lt;/form&gt;
          &lt;/Col&gt;
          &lt;Col md={4}&gt;
            Right Side
        &lt;/Col&gt;
        &lt;/Row&gt;
      );
    }
  }
  </code></pre>