Change the :active background-colour of the React-Bootstrap tabs

Question

I am new to bootstrap but I am a bit fluent in React. I just want to ask how to change the :active background colour of the react-bootstrap tabs.

Here is the link:- https://react-bootstrap.github.io/components/tabs/ (It is the vertical tab menu)

I have used the code shown there.

                   <Tab.Container id="sidebar" defaultActiveKey="first">
                        <Row>
                            <Col sm={3}>
                            <Nav variant="pills" className="flex-column">
                                <Nav.Item>
                                    <Nav.Link eventKey="first" className="tab">Tab 1</Nav.Link>
                                </Nav.Item>
                                <Nav.Item>
                                    <Nav.Link eventKey="second" className="tab">Tab 2</Nav.Link>
                                </Nav.Item>
                                <Nav.Item>
                                    <Nav.Link eventKey="third" className="tab">Tab 3</Nav.Link>
                                </Nav.Item>
                            </Nav>
                            </Col>
                            <Col sm={9}>
                            <Tab.Content>
                                <Tab.Pane eventKey="first">
                                    <h1>One</h1>
                                </Tab.Pane>
                                <Tab.Pane eventKey="second">
                                    <h1>Two</h1>
                                </Tab.Pane>
                            </Tab.Content>
                            </Col>
                        </Row>
                    </Tab.Container>

How can I change the background of the active tabs using CSS or bootstrap?

Please help.

Thank you.

Answer 1

as @Tim suggested its also 100% correct when you choose variant="pills" but default is variant="tabs"

For Tabs

.nav.nav-pills .nav-link.active {
    background-color: <YOUR_COLOR>
}

For Pills

.nav.nav-tabs .nav-link.active {
    background-color: <YOUR_COLOR>
}