Reactjs React bootstarp Badge类未呈现

我是react开发的新手，我正在测试一个简单的react web应用程序，其中我使用bootstarp

我用npm安装了bootstrap最新版本，并在index.js中添加了导入，如下所示

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

这是我的组件

class Counter extends Component {
  state = {
    count: 0,
  };
  render() {
    return (
      <React.Fragment>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button className="btn btn-secondary">Increment</button>
      </React.Fragment>
    );
  }

  getBadgeClasses() {
    let classes = "badge m2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }
}

export default Counter;

类计数器扩展组件{
状态={
计数：0，
};
render（）{
返回(
{this.formatCount（）}
增量
);
}
getBadgeClasses（）{
让class=“badge m2 badge-”；
classes+=this.state.count==0？“警告”：“主要”；
返回类；
}
formatCount（）{
const{count}=this.state；
返回计数===0？“零”：计数；
}
}
导出默认计数器；

现在button类正确呈现，但badge类不正确

---

我在这里遗漏了一些东西？

它是否渲染了任何类？输出是什么？