2

On the official page of agular for the nav tabs we have no bottom border for the selected tab

official page

But when I am using the same code , I get a border even on the selected nav-item

myTab example

Here is my HTML Code 

<ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">tab 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">tab 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">tab 3</a>
    </li>
</ul>`

And My CSS :

.nav-item .active
{
background-color: rgb(119, 218, 218) !important;
border-bottom: 0px;
color:rgb(168, 19, 168);
}

Could someone tell me to remove the border bottom from active nav-item ???

Punit
  • 301
  • 2
  • 5
  • 14

2 Answers2

0

Edit: I previously made a mistake. Here's the correct code (notice the corresponding css file): 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
    </li>
</ul>

So, it's important that you link the correct css file in your header. Once you do that, no additional custom css is required to make it work. Also, make sure that none of the other custom css you potentially have interferes with this code.

WebDevBooster
  • 14,674
  • 9
  • 66
  • 70
  • Kindly see in my answer I have done that but it's not working – Punit Jan 13 '18 at 20:25
  • Still doesn't work and it's just the part of my whole code where I am using nav tab. it is working code only this part is not working – Punit Jan 13 '18 at 20:32
  • Sorry, I made a mistake previously. Check the code and the css file now. This version works. – WebDevBooster Jan 13 '18 at 20:35
  • if I click other tab and that becomes active then also it doesn't work – Punit Jan 13 '18 at 20:42
  • Well, that code snippet is just a **static** example. In production, you need some sort of a script or jQuery in place that toggles the active class based on which item is clicked. – WebDevBooster Jan 13 '18 at 20:45
  • But that should be a separate question. I think this question here has been answered, right? – WebDevBooster Jan 13 '18 at 20:46
0

Remove the nav-tabs class and will work

Mihai
  • 1