React-starter-kit: override bootstrap class

[gauravprwl14]

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]

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

[gauravprwl14]

yeah, that one way to do but what if i want to change the padding and margin of all the the col in the gird.css
right now i have to manual override each and every col class.

:global(.col-lg-1) {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }
  :global(.col-lg-2) {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }
  :global(.col-lg-3) {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }
  :global(.col-lg-4) {
      padding-right: 5px !important;
      padding-left: 5px !important;
    }

:global(.col-sm-1) {
  padding-right: 5px !important;
  padding-left: 5px !important;
}
:global(.col-sm-2) {
  padding-right: 5px !important;
  padding-left: 5px !important;
}
:global(.col-sm-3) {
  padding-right: 5px !important;
  padding-left: 5px !important;
}
:global(.col-sm-4) {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }

is their a way any other way to do this?
Also is their a way to change the value of the variable which are used in the bootstrap class?

[Jaikant]

@frenzzy

I am getting a
_Error: Bootstrap's JavaScript requires jQuery_
because of
_import 'bootstrap/js/bootstrap';_

Any suggestions?

Also,
Is it better to reference the bootstrap css in

src/components/App/App.css

OR in

src/components/Layout.css

Thx.

[frenzzy]

@gauravprwl14 the same idea as above:

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

  /* override bootstrap style globally */
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4 {
    padding-left: 5px;
    padding-right: 5px;
  }
} 

To override bootstrap variables, you probably need to extract the library at the project level and work with it as with your own code.

@Jaikant if you don't use any dynamic bootstrap components you may not include bootstrap.js to your bundle. Otherwise bootstrap requires jQuery library:

import 'jquery';
import 'bootstrap/js/bootstrap';

It is better to reference the bootstrap in Layout because this will allow you to easily use custom style/layout for specific page if necessary.

[Jaikant]

@frenzzy thanks!
I am not using the feature/bootstrap-3 branch. I am using the master branch. In which I did the following changes:

1) installed bootstrap-v4

2)
In tools/copy.js, in included:
copyDir('node_modules/bootstrap/dist/css', 'build/public/css'), copyDir('node_modules/bootstrap/dist/fonts', 'build/public/fonts'),

3)
src/components/Layout.css
:global { @import 'bootstrap/css/bootstrap.css'; }

Now, I am trying to get the bootstrap card work, using the sample code in the bootstrap webpage. But the below code doesn't display as it should, it looks more like plain text with a border. I assume I don't need jquery for this piece of code right? What could be going wrong, any suggestions please?

<div class="card"> <div class="card-header"> Featured </div> <div class="card-block"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>

[Jaikant]

@frenzzy Please ignore my previous comment. The silly mistake, forgot to change class to className... sorry about that!

[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 */

[FakhruddinAbdi]

You may want to consider Bootstrap-Loader which is created to fix that issue.