CODEWITHSUNDEEP
cssreactjs
Malsha Madushani Kalahewaththa
Malsha Madushani Kalahewaththa

Reputation: 196

How to add styles in tabs in react-bootstrap?

In my project I'm using tabs from react-bootstrap. What I want do is get a bottom border in the selected tab. enter image description here

But what I get is

enter image description here

Given below is my viewTicket.scss file

ViewTicket.scss

@import './../../styles/variables';
@import './../../styles/typography';

.icon-list {
    width: 120px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }


  .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    // border: none;
  }

When I add border:none; then it looks like below

enter image description here

How can I add a line as in my design?Is it possible?

This is hw I use tabs in my project

<Tabs>
  <Tab eventKey={1} title="Comments"></Tab>
  <Tab eventKey={2} title="History" className="nav-item nav-link active"></Tab>
</Tabs>;

Upvotes: 2

Views: 2401

Answers (1)

Anjs
Anjs

Reputation: 616

Try this

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border-bottom: 3px solid blue;
  }

If you see your tab bottom-border is more than text length, you can remove the padding left/right and add margin instead.

Upvotes: 2

Related Questions