Bootstrap not working with React

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.