Bootstrap не работает с React

Question

Я пытаюсь применить атрибуты Bootstrap к моим <span> и <button>. Я не уверен, что я делаю неправильно. Я искал этот вопрос здесь в stackoverflow, но все предложения говорят об изменении класса на className. Я сделал это, но все еще не вижу, как меняются мои стили.

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;

Любое понимание этой проблемы будет высоко оценено.