Bootstrap not working with React

Question

I'm trying to apply Bootstrap attributes to my <span> and <button>. I'm not sure what I'm doing wrong. I've searched this question here in stackoverflow, but all of the suggestions say to change class to className. I've done this but I'm still unable to see my styles change.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import Counter from './components/counter';

ReactDOM.render(<Counter/>, document.getElementById('root'));
registerServiceWorker();

counter.jsx

import React, { Component } from 'react';

class Counter extends Component {
    state = {
        count: 0
    };
    render() {
        return (
            <div>
                <span className="badge badge-primary m-2">
                    {this.formatCount()}
                </span>
                <button className="btn btn-secondaty btn- 
sm">Increment</button>
            </div>
        );
    }
    formatCount() {
        const { count } = this.state;
        return count === 0 ? 'Zero' : count;
    }
} 

export default Counter;

Any insight into this problem will be much appreciated.

Have you imported the CSS? https://stackoverflow.com/a/44985246/885626 — Ric, Aug 28 '18 at 16:56

AP GANES VENUSHREE · Answer 1 · 2021-12-23T10:48:09.927

11

In bootstrap v5 it's changed to "bg-primary" and "bg-secondary" etc instead, so try className="badge bg-primary m-2".

edited Dec 23 '21 at 10:48

answered Dec 16 '21 at 04:44

AP GANES VENUSHREE

111
1
3

score 5 · Answer 2 · edited Nov 08 '20 at 20:59

5

Assuming you have already installed Bootstrap, then add this import statement to your code:

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

edited Nov 08 '20 at 20:59

Jeremy Caney

7,102
69
48
77

answered Nov 08 '20 at 20:37

Zeeshan Iqbal

51
1
2

score 1 · Answer 3 · answered Jun 07 '22 at 14:00

I faced similar problem. Somehow I find that bootstrap version causing trouble to me!

So I uninstalled current version then installed an specific version.

npm remove bootstrap

npm install bootstrap@4.6.0

Then import necessary bootstrap script in App.js file.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

or

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

score 0 · Answer 4 · answered Sep 27 '21 at 17:12

0

Please check the version of bootstrap, there are few changes in the badge class.

According to Bootstrap v5.0 and above, use the following code for the Badge class.

render() { return ( {this.formatCount()} Increment );

answered Sep 27 '21 at 17:12

Mohamad Saif

1
2

score -1 · Answer 5 · answered Dec 26 '22 at 17:26

-1

Replace class name with className="badge bg-primary m-2",

https://getbootstrap.com/docs/5.0/components/badge/

answered Dec 26 '22 at 17:26

Ravi Kumar

1

Please do not repeat the solution of existing answers to say thanks for them. Instead wait until you have the voting privilege, that is the proper way. Please delete this post now. – Yunnosch Dec 26 '22 at 19:03
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 27 '22 at 04:46

Bootstrap not working with React

5 Answers5