h-100 represents the 100% size of the object it is placed in, making it unable to be centered vertically as it already takes up the full height.
To resolve this, remove the h-100 classes and apply the following CSS or classes to the container:
Preferred solution:
<div class="row h-100 align-items-center" > //ensure greater height than router; set min-height:200px;
<router-link to="/" class="col ">Home</router-link>
<router-link to="/scan" class="col ">Scan</router-link>
<router-link to="/account" class="col">Account</router-link>
</div>
Alternative approach:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63010c0c17101711021323564d504d534e020f130b0252">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<div class="row d-flex align-items-center border" style="height:500px;">
<div class="col border">1</div>
<div class="col border">2</div>
<div class="col border">3</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbd9d4d4cfc8cfc9dacbfb8e9588958b96dad7cbd3da8a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>