I am trying to get through the Components video in React. My file `counter.jsx` is:
```auto
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
class Counter extends Component {
state = {
count: 0
};
styles = {
fontSize: 30,
fontWeight: 'bold',
};
render() {
return (
{this.formatCount()}
);
}
formatCount() {
const { count } = this.state;
return count === 0 ? 'Zero' : count;
}
}
export default Counter;
```
The code is like in the video, but my “Zero” button does not appear. It is still visible in the Element tab.
How do I get my text to show like in the course? It should really cover how to debug issues, because they happen!
---
No, but I figured it out. The bootstrap I loaded is not the same as the bootstrap that is used in the book (4 years old). In the newer bootstrap, the CSS for the button is not colored like it is in the example course.
---
```auto
className='badge badge-primary m-2'
```
in the latest bootstrap, I don’t find a badge-primary class but bg-primary
> **[example - CodeSandbox](https://codesandbox.io/s/example-31teeu?file=%2Fsrc%2FApp.js)**
>
> example by onlyhasbi using bootstrap, react, react-dom, react-scripts
see bootstrap doc [Badges · Bootstrap v5.0](https://getbootstrap.com/docs/5.0/components/badge/)
---