I have written a simple landing page in Twitter Bootstrap. It works fine, I just want to know if my code is written in a "good-practice" way.
<!DOCTYPE html>
<html lang="en-US">
<head>
<!-- Title and Logo -->
<title>SigmaCubes - Home</title>
<link href="favicon.ico" rel="shortcut icon" />
<!-- Metadata -->
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta name="author" content="Julian Lachniet" />
<meta name="description" content="Various HTML and JavaScript projects." />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- Libraries -->
<link rel="stylesheet" href="lib/bootstrap.min.css">
<script src="lib/jquery-3.3.1.min.js"></script>
<script src="lib/popper.min.js"></script>
<script src="lib/bootstrap.bundle.min.js"></script>
</head>
<body class="bg-light">
<nav class="bg-dark navbar navbar-dark navbar-expand-sm">
<a class="navbar-brand" href="#"><img src="img/logo.png" height="32px" /></a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CubeSolver</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<img class="d-block img-fluid mx-auto" src="img/biglogo.png" style="max-height: 384px; margin: 32px" />
</div>
</div>
<div class="row">
<div class="col-12 h3 text-center">Various HTML and Javascript projects.</div>
</div>
<hr />
<div class="row">
<div class="col-12 h5 text-center">SigmaCubes.com is the best website on the internet, and the owner of CubeSolver.</div>
</div>
</div>
</body>
</html>
Any suggestions?