I'm looking to incorporate animations similar to this example into the background of the page below. However, I'm unsure how to achieve this using Bootstrap 5. The image provided above is what I envision as the background for my HTML page. Any guidance on how to accomplish this?
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ffdf0f0ebecebedfeefdfaab1afb1ad">[email protected]</a>/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
Template:
<div class="container-fluid bg-light bg-body shadow-lg">
<div class="row">
<nav class="navbar navbar-expand-lg navbar-light bg-light bg-body shadow-sm">
<div class="container">
<a class="navbar-brand" href="#" style="color: dodgerblue; font-size: 20px;">DB</a>
<div class="navbar-nav">
<a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">About</a>
<a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Contact</a>
<a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Pricing</a>
<a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Disabled</a>
</div>
</div>
</nav>
<div class="col">
<div class="container p-5">
<h1>Landing Page</h1>
<br>
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur recusandae
accusamus enim dolorum sequi saepe unde minima</h4>
<br>
<a class="btn btn-primary shadow-lg bg-body text-dark" href="">Get Started</a>
</div>
</div>
<div class="col-md-6">
<div class="p-5">
<h2 class="text-center">Sign In</h2>
<br>
<form method="POST" action="{% url 'login' %}">
{% csrf_token %}
<div class="form-group">
<label class="text-primary text-dark font-weight-bold">Enter School Name</label>
<input type="text" class="form-control" name="username" placeholder="School Name">
</div>
<br>
<div class="form-group">
<label class="text-primary text-dark font-weight-bold">Enter School Password</label>
<input type="password" class="form-control" name="password" placeholder="Enter Password">
</div>
<br>
<button type="submit" class="btn btn-primary btn-block">Login</button>
</form>
</div>
</div>
</div>
</div>