Nav tabs' bottom border can't removed like given in official site

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 ???

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.