React-Bootstrap 选项卡

Question

I am using react-bootstrap to create 2 tabs which will display some data i pull from an api, but they seem to be displaying as buttons.

my tabs: documentation:

I am importing them correctly (i think) other react bootstrap components from here are working fine

import {
  FormGroup,
  FormLabel,
  FormControl,
  FormText,
  Button,
  Tooltip,
  OverlayTrigger,
  Tabs,
  Tab,
} from "react-bootstrap";

and this is how i use them

<Tabs defaultActiveKey={2}
                id="uncontrolled-tab-example"
                className="nav-item"
          >
            <Tab eventKey={1} title="Full">
              <br />
              <MaverickFullResult items={this.state.results} />
            </Tab>
            <Tab eventKey={2} title="Summary">
              <br />
              <MaverickSummaryResult items={this.state.results} />
            </Tab>
          </Tabs>

Answer 1

You need to import below css file in index.js

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