Simple Bootstrap buttons not showing variant colors in React

Question

This is an out-of-the-box Create React App install, and I have only done two things:

npm install react-bootstrap bootstrap

Changed App.js as follows:

import logo from './logo.svg';
import './App.css';
import Button from 'react-bootstrap/Button';

function App() {

  function buy() {
    alert('Clicked Buy');
  }
  function sell() {
    alert('Clicked Sell');
  }

  return (
    <div>
      <Button variant='success' onClick={buy}>
        Button1
      </Button>
      <Button variant='danger' onClick={sell}>
        Button2
      </Button>
    </div>

  );
}

export default App;

The buttons look the same as before I changed them from <button> to <Button variant=...:

"an out-of-the-box React install" - Create React App? Did you read react-bootstrap.github.io/getting-started/…? — jonrsharpe
– jonrsharpe, Commented Nov 15, 2020 at 18:43
I read enough of it to install bootstrap I thought, guess I need to read the rest of it. — NealWalters
– NealWalters, Commented Nov 15, 2020 at 18:47

Junius L · Accepted Answer · 2020-11-15 18:48:37Z

4

You have to import the css for the buttons to work

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

answered Nov 15, 2020 at 18:48

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

NealWalters · Accepted Answer · 2020-11-15 18:48:24Z

0

Add these lines to App.js, as per https://react-bootstrap.github.io/getting-started/introduction/#stylesheets

import 'bootstrap/dist/css/bootstrap.min.css';
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
  integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
  crossorigin="anonymous"
/>

The link statement is not required.

Results after adding css:

answered Nov 15, 2020 at 18:48

NealWalters

18.5k48 gold badges165 silver badges283 bronze badges

Comments

Nikhil · Accepted Answer · 2020-11-15 18:50:28Z

0

You need to convert it to a ES6 class definition:

import 'bootstrap/dist/css/bootstrap.min.css';
import logo from './logo.svg';

import './App.css';
class App extends React.Component {
  constructor(props) {
    super(props);


    // This binding is necessary to make `this` work in the callback
    this.buy = this.buy.bind(this);
    this.sell= this.sell.bind(this);
  }

    function buy() {
    alert('Clicked Buy');
  }
  function sell() {
    alert('Clicked Sell');
  }


  return (
    <div>
      <Button variant='success' onClick={buy}>
        Button1
      </Button>
      <Button variant='danger' onClick={sell}>
        Button2
      </Button>
    </div>

  );
}

App()

answered Nov 15, 2020 at 18:50

Nikhil

3,9785 gold badges20 silver badges34 bronze badges

1 Comment

jonrsharpe Over a year ago

That is absolutely not necessary, only the import of the CSS makes any difference.

Ioannis Kotsonis · Accepted Answer · 2020-11-15 19:01:49Z

0

Instead of npm install react-bootstrap , i did npm install react-bootstrap bootstrap as it says in the documentation.

Your code is right, but you should also add

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

in App.js

answered Nov 15, 2020 at 19:01

Ioannis Kotsonis

16 bronze badges

Comments

Mark Swardstrom · Accepted Answer · 2020-11-15 19:02:51Z

0

Follow these instructions

https://create-react-app.dev/docs/adding-bootstrap/

You need to add the dependencies in the package.json file (this is what yarn add react-bootstrap bootstrap will do).

Then yarn, to install the bootstrap-react node module.

Then you need to import of the bootstrap.css file. Add that import line to the top of the index.js file.

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

You can then see that it's imported when you inspect the html in devtools.

edited Nov 15, 2020 at 19:02

answered Nov 15, 2020 at 18:55

Mark Swardstrom

18.3k6 gold badges74 silver badges75 bronze badges

Collectives™ on Stack Overflow

Simple Bootstrap buttons not showing variant colors in React

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related