nav-pills nav-stacked not working

Question

I am trying to use nav stacked to make a vertical menu with nav pills. The problem is that It does not seem to work. It keeps the "horizontal" value. I have found solutions not implementing nav stacked but I need to use it this way.

implementing this:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

I have tried using older versions but then the rest of my Webpage changes, and I do not want to.

<ul class="nav nav-pills nav-stacked">
<li class="nav-item">
<a class="nav-link active" href="#">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section 4</a>
</li>
</ul>

Answer 1

nav-stacked is deprecated in Bootstrap 4. Use flex-column to stack your menu. Use the snippet for reference.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Section 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Section 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Section 3</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Section 4</a> </li> </ul> 

Hope this helps