I positioned bootstrap nav-tabs at the bottom of a container using absolute positioning and it worked pretty good with one issue: as soon as I positioned absolute it's not full width of the container anymore.
Here's a picture:

[![enter image description here](https://i.stack.imgur.com/EB6i4.png)](https://i.stack.imgur.com/EB6i4.png)

HTML: 

```
<div class="container-fluid">
  <ul class="nav nav-tabs profile-nav">
    <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>
</div>

```

CSS:

```
.profile-nav{
  position: absolute;
  bottom: 0;
  transform: translateY(50%);
  background-color: #fff;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
}

.profile-nav .nav-item{
  padding-top: 15px;
  padding-bottom: 15px;
}

```

The image container has position: relative in order to position the nav like that. 
So, as I said, the problem is, I can't make it full width of the container fluid.