0

I'm trying to use bootstrap (react-bootstrap) in my app.

I want to use the tab nav bar as follows:

  <Tab.Container id="left-tabs-example" defaultActiveKey="first">
    <Row>
        <Col sm={3}>
            <Nav variant="pills" id="bootstrap-overrides .nav-pills .nav-link.active" className="flex-column">
            <Nav.Item>
                <Nav.Link eventKey="first">Tab 1</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="second">Tab 2</Nav.Link>
            </Nav.Item>
            </Nav>
        </Col>
        <Col sm={9}>
            <Tab.Content>
            <Tab.Pane eventKey="first">
            </Tab.Pane>
            <Tab.Pane eventKey="second">
            </Tab.Pane>
            </Tab.Content>
        </Col>
    </Row>
  </Tab.Container>
</div>

)

This post seems to recommend making a css id as follows:

#bootstrap-overrides .nav-pills .nav-link.active {
    background-color: none;
    color: $Hand3;
}

My objective is to remove the blue background that bootstrap puts on tab active links and replace it with a color i defined with no background color. I can't get this styling to override bootstrap.

How do you do that?

Mel
  • 2,481
  • 26
  • 113
  • 273

1 Answers1

0

If you know that you won't need to override the custom colors in the future, you could simply do this:

.nav-link.active {
  background-color: none !important;
  color: 'your-color' !important;
}

You could then get rid of the id="bootstrap-overrides .nav-pills .nav-link.active" since it is no longer necessary.

Also, make sure your custom.css file is required/imported in your component file.

require('./custom.css'); or import './custom.css';

Hope that helps!

mepley
  • 470
  • 4
  • 18
  • It doesn't work. I can change the text color. I cannot remove the background color. Also, I specifically want to override it once in my app. I want the default in other parts of my app so this blanket suggestion doesn't meet that requirement. Thanks though. – Mel May 11 '19 at 04:19
  • Have you gone into dev tools to see how the background-color is being applied to ".nav-link.active"? It could be that it's not actually a background-color, but a background-img that is a solid color. You could try `background-image:none !important;` – mepley May 11 '19 at 04:28
  • Also as for the blanket issue, you can add back the `id="bootstrap-override"` and with your custom.css file you can change the selector to `#bootstrap-override.nav-link.active` so that it only overrides the nav-link with the id of "bootsrap-override". You should be able to remove the !important from the css properties as well. – mepley May 11 '19 at 04:40
  • Yes - I've checked (as i noted above). It's background color. Thank you for trying to be helpful. – Mel May 11 '19 at 04:41
  • Hmm... If you know the element that the background-color is being applied to then this should have worked, especially if it worked for the font color already. There must be a different element that has the background-color applied (i.e. not `.nav-link`). I'd poke around the elements view in the chrome dev-tools to find which element contains the background color and copy the selector from that and try it in the custom.css file. Best of luck! – mepley May 11 '19 at 05:05
  • it's the .active extension that is either targeted wholesale or not at all. Thanks anyway for trying to help. Hoepfully someone has found a solution to this problem – Mel May 11 '19 at 05:12