override bootstrap class

hi, i am working on feature/bootstrap3 branch. i want to customise bootstrap class like changing the default shape of button or changing the header color of panel header or changing the primary color of a variable etc. can you suggest some method so that i can customise the bootstrap classes according to my need and these customise classes are loaded instead of the default bootstrap.css

also can you show some example how to use ReactCSSTransitionGroup because i am unable to show the transition when page change.

right now i have to override bootstrap classes in every component

:global(ul.navbar-right) {
    padding-right: 0;
  }
:global(.btn) {
    border-radius: 30px;
}

[frenzzy]

Step 2 and Step 3 are mutually exclusive:

npm install bootstrap --save

/* tools/copy.js */
copyDir('node_modules/bootstrap/dist/css', 'build/public/css'),
copyDir('node_modules/bootstrap/dist/fonts', 'build/public/fonts'),

/* src/components/Html.js */
  <script src="/css/bootstrap.min.css" /> /* external css file */
  /* application css here */
</head>

OR

npm install bootstrap --save

/* src/components/Layout.css */
:global {
  @import 'bootstrap/css/bootstrap.css'; /* critical path css (inline into html) */
}
/* your css here */

[frenzzy]

If you want to use bootstrap everywhere maybe it is a good idea to require it once inside your root component, for example:

/* Layout.js */
import 'bootstrap/js/bootstrap';
import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Layout.css';

function Layout({ children }) {
  return React.Children.only(children);
}

export default withStyles(s)(Layout);

/* Layout.css */
:global {
  @import 'bootstrap/css/bootstrap.css';

  /* override bootstrap style globally */
  ul.navbar-right {
    padding-right: 0;
  }

  .btn {
    border-radius: 30px;
  }
} 

/* Button.js */
import React from 'react';
function Button(props) {
  return <button className="btn" type="button" {...props} />
}
export default Button;

/* HomePage.js */
import React from 'react';
import Layout from './Layout';
import Button from './Button';
function HomePage() {
  return (
    <Layout>
      <Button>Press Me!</Button>
    </Layout>
  );
}
export default HomePage;

Page transitions example here: https://github.com/kriasoft/universal-router/issues/15#issuecomment-222808233