x
1
2
<html lang="en">3
<head>4
<title>Bootstrap Example</title>5
<meta charset="utf-8">6
<meta name="viewport" content="width=device-width, initial-scale=1">7
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">8
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>9
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>10
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>11
</head>12
<body>13
14
<div class="container">15
<h2>Vertical Nav</h2>16
<p>Use the .flex-column class to create a vertical nav:</p>17
<ul class="nav flex-column">18
<li class="nav-item">19
<a class="nav-link" href="#">Link</a>20
</li>21
<li class="nav-item">22
<a class="nav-link" href="#">Link</a>23
</li>24
<li class="nav-item">25
<a class="nav-link" href="#">Link</a>26
</li>27
<li class="nav-item">28
<a class="nav-link disabled" href="#">Disabled</a>29
</li>30
</ul>31
</div>32
33
</body>34
</html>Vertical Nav
Use the .flex-column class to create a vertical nav: