My jumbotron contains the bx-message-error icon that I want to center both horizontally and vertically in a row. Despite searching online and going through the documentation, I haven't been able to align it. I'm sure it's a simple fix, so any help would be greatly appreciated, along with a link to the documentation for future reference.
I'm working on a Windows 10 machine using Bootstrap 5.0.1.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31535e5e45424543504171041f011f00">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href='https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3919c8b9a909c9d80b3c1ddc3ddc4">[email protected]</a>/css/boxicons.min.css' rel='stylesheet'>
<style>
#no_data_jumbo {
padding: 0px;
}
.jumbo_button {
background: #567178;
}
</style>
<title>Integrated Test Management Suite | Home</title>
</head>
<body id="body-pd">
<div class="wrapper mx-2 height-100">
<div id="content">
<div class="row m-2">
<div class="jumbotron text-black border border-dark w-100">
<div class="container mt-1" id="no_data_jumbo">
<div class="row w-100">
<div class="col-1 text-center">
<i class='bx bx-message-error'></i>
</div>
<div class="col">
<p>Messsage goes here..</p>
<p><a class="btn btn-primary btn-sm jumbo_button" role="button">Button 1</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d4d9d9c2c5c2c4d7c6f68398869887">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>