How to integrate React Bootstrap in React-starter-kit

Integrating React Bootstrap in the React Starter kit is quite easy. The first step is to install React-Bootstrap:

npm install --save react-bootstrap

After that, the module can be used in your components. Example: ./src/components/Header/Header.js:

import Grid from 'react-bootstrap/lib/Grid';
import Col from 'react-bootstrap/lib/Col';

function Header() {
  return (
    <Grid className={s.root}>
      <Col md={4}>
        <Navigation className={s.nav} />
       </Col>
       <Col md={4}>
        <Link className={s.brand} to="/">
          <img src={logoUrl} width="38" height="38" alt="React" />
          <span className={s.brandTxt}>Your Company</span>
        </Link>
       </Col>
       <Col md={4}>
        <div className={s.banner}>
          <h1 className={s.bannerTitle}>React</h1>
          <p className={s.bannerDesc}>Complex web apps made easy</p>
        </div>
       </Col>
    </Grid>
  );
}

Now, the component renders the component classes but no CSS style is integrated. Therefore, we integrate the bootstrap-loader:

npm install --save-dev bootstrap-sass css-loader node-sass resolve-url-loader sass-loader style-loader url-loader bootstrap-loader@^1.1.6 extract-text-webpack-plugin@^1.0.1

Next, add the ./bootstraprc file to your root project folder (./bootstraprc):

---
# Output debugging info
# loglevel: debug

# Major version of Bootstrap: 3 or 4
bootstrapVersion: 3

# If Bootstrap version 3 is used - turn on/off custom icon font path
useCustomIconFontPath: false

# Webpack loaders, order matters
styleLoaders:
  - style
  - css
  - sass

# Extract styles to stand-alone css file
# Different settings for different environments can be used,
# It depends on value of NODE_ENV environment variable
# This param can also be set in webpack config:
#   entry: 'bootstrap-loader/extractStyles'
extractStyles: false
# env:
#   development:
#     extractStyles: false
#   production:
#     extractStyles: true

# Customize Bootstrap variables that get imported before the original Bootstrap variables.
# Thus original Bootstrap variables can depend on values from here.
# preBootstrapCustomizations: ./src/components/bootstrap.scss

# This gets loaded after bootstrap/variables is loaded
# So you can refer to bootstrap variables
# bootstrapCustomizations: ./src/components/bootstrap.scss

# With CSS Modules we load all application styles directly in React components
# appStyles: ./app/styles/app.scss

### Bootstrap styles
styles:

  # Mixins
  mixins: true

  # Reset and dependencies
  normalize: true
  print: true
  glyphicons: true

  # Core CSS
  scaffolding: true
  type: true
  code: false
  grid: true
  tables: true
  forms: true
  buttons: true

  # Components
  component-animations: true
  dropdowns: false
  button-groups: false
  input-groups: true
  navs: false
  navbar: false
  breadcrumbs: false
  pagination: false
  pager: false
  labels: false
  badges: false
  jumbotron: true
  thumbnails: false
  alerts: true
  progress-bars: true
  media: false
  list-group: true
  panels: false
  wells: false
  responsive-embed: true
  close: false

  # Components w/ JavaScript
  modals: true
  tooltip: false
  popovers: true
  carousel: false

  # Utility classes
  utilities: true
  responsive-utilities: true

### Bootstrap scripts
scripts: false

The last step is to modify the webpack configuration to integrate the bootstrap-loader. Therefore, set the bootstrap-loader as first entry point for the client bundle:

// ....
const clientConfig = extend(true, {}, config, {
  entry: [
    'bootstrap-loader',
    './client.js',
  ],
  // ...
// ...

After that run your project and everything works perfect!

npm start