How can I add Bootstrap 5 animation to a web page - css

Question

I want to add animations like This one to a background of this page down below, but i don't know how to do that using bootstrap 5, the image i provided up here, i want it to be the background of my html page, How can i do this please?
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
My Templates:
<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>

Answer 1

Just take the code from the fiddle (the compiled css) and use bubbles as the class for your required container. In this case, I used a fixed div as the background of page.
(Wait for it...)
body {
background: #1a1e23;
margin: 0;
}
.bubbles {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
border: 1px solid red;
margin: auto;
}
.bubble {
position: absolute;
left: var(--bubble-left-offset);
bottom: -75%;
display: block;
width: var(--bubble-radius);
height: var(--bubble-radius);
border-radius: 50%;
animation: float-up var(--bubble-float-duration) var(--bubble-float-delay) ease-in infinite;
}
.bubble::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(136, 246, 251, 0.3);
border-radius: inherit;
animation: var(--bubble-sway-type) var(--bubble-sway-duration) var(--bubble-sway-delay) ease-in-out alternate infinite;
}
.bubble:nth-child(0) {
--bubble-left-offset: 70vw;
--bubble-radius: 2vw;
--bubble-float-duration: 10s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 3s;
--bubble-sway-delay: 3s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(1) {
--bubble-left-offset: 92vw;
--bubble-radius: 8vw;
--bubble-float-duration: 8s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 3s;
--bubble-sway-delay: 0s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(2) {
--bubble-left-offset: 60vw;
--bubble-radius: 2vw;
--bubble-float-duration: 10s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 3s;
--bubble-sway-delay: 1s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(3) {
--bubble-left-offset: 93vw;
--bubble-radius: 8vw;
--bubble-float-duration: 9s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 3s;
--bubble-sway-delay: 1s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(4) {
--bubble-left-offset: 77vw;
--bubble-radius: 3vw;
--bubble-float-duration: 9s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 3s;
--bubble-sway-delay: 1s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(5) {
--bubble-left-offset: 36vw;
--bubble-radius: 8vw;
--bubble-float-duration: 12s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 3s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(6) {
--bubble-left-offset: 33vw;
--bubble-radius: 6vw;
--bubble-float-duration: 11s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 4s;
--bubble-sway-delay: 1s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(7) {
--bubble-left-offset: 84vw;
--bubble-radius: 3vw;
--bubble-float-duration: 7s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 3s;
--bubble-sway-delay: 1s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(8) {
--bubble-left-offset: 3vw;
--bubble-radius: 2vw;
--bubble-float-duration: 11s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 3s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(9) {
--bubble-left-offset: 89vw;
--bubble-radius: 1vw;
--bubble-float-duration: 11s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(10) {
--bubble-left-offset: 87vw;
--bubble-radius: 9vw;
--bubble-float-duration: 8s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 0s;
--bubble-sway-delay: 3s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(11) {
--bubble-left-offset: 98vw;
--bubble-radius: 7vw;
--bubble-float-duration: 12s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 4s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(12) {
--bubble-left-offset: 80vw;
--bubble-radius: 10vw;
--bubble-float-duration: 7s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 2s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(13) {
--bubble-left-offset: 97vw;
--bubble-radius: 3vw;
--bubble-float-duration: 9s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 2s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(14) {
--bubble-left-offset: 28vw;
--bubble-radius: 1vw;
--bubble-float-duration: 10s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 3s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(15) {
--bubble-left-offset: 64vw;
--bubble-radius: 10vw;
--bubble-float-duration: 8s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(16) {
--bubble-left-offset: 3vw;
--bubble-radius: 6vw;
--bubble-float-duration: 8s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 2s;
--bubble-sway-delay: 1s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(17) {
--bubble-left-offset: 14vw;
--bubble-radius: 6vw;
--bubble-float-duration: 6s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 4s;
--bubble-sway-delay: 0s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(18) {
--bubble-left-offset: 41vw;
--bubble-radius: 3vw;
--bubble-float-duration: 6s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(19) {
--bubble-left-offset: 31vw;
--bubble-radius: 3vw;
--bubble-float-duration: 11s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 3s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(20) {
--bubble-left-offset: 49vw;
--bubble-radius: 7vw;
--bubble-float-duration: 7s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 0s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(21) {
--bubble-left-offset: 89vw;
--bubble-radius: 3vw;
--bubble-float-duration: 9s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 3s;
--bubble-sway-delay: 0s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(22) {
--bubble-left-offset: 47vw;
--bubble-radius: 8vw;
--bubble-float-duration: 12s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 2s;
--bubble-sway-delay: 0s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(23) {
--bubble-left-offset: 93vw;
--bubble-radius: 7vw;
--bubble-float-duration: 12s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 4s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(24) {
--bubble-left-offset: 72vw;
--bubble-radius: 5vw;
--bubble-float-duration: 10s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 3s;
--bubble-sway-delay: 0s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(25) {
--bubble-left-offset: 68vw;
--bubble-radius: 4vw;
--bubble-float-duration: 9s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 2s;
--bubble-sway-delay: 1s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(26) {
--bubble-left-offset: 15vw;
--bubble-radius: 5vw;
--bubble-float-duration: 12s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 3s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(27) {
--bubble-left-offset: 20vw;
--bubble-radius: 4vw;
--bubble-float-duration: 11s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(28) {
--bubble-left-offset: 51vw;
--bubble-radius: 8vw;
--bubble-float-duration: 10s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 4s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(29) {
--bubble-left-offset: 31vw;
--bubble-radius: 3vw;
--bubble-float-duration: 9s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 4s;
--bubble-sway-delay: 0s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(30) {
--bubble-left-offset: 45vw;
--bubble-radius: 5vw;
--bubble-float-duration: 10s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(31) {
--bubble-left-offset: 9vw;
--bubble-radius: 7vw;
--bubble-float-duration: 10s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 2s;
--bubble-sway-delay: 1s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(32) {
--bubble-left-offset: 62vw;
--bubble-radius: 5vw;
--bubble-float-duration: 6s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(33) {
--bubble-left-offset: 8vw;
--bubble-radius: 4vw;
--bubble-float-duration: 6s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 4s;
--bubble-sway-delay: 1s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(34) {
--bubble-left-offset: 76vw;
--bubble-radius: 1vw;
--bubble-float-duration: 8s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 4s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(35) {
--bubble-left-offset: 22vw;
--bubble-radius: 10vw;
--bubble-float-duration: 10s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 4s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(36) {
--bubble-left-offset: 82vw;
--bubble-radius: 7vw;
--bubble-float-duration: 9s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 4s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(37) {
--bubble-left-offset: 30vw;
--bubble-radius: 10vw;
--bubble-float-duration: 8s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 0s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(38) {
--bubble-left-offset: 96vw;
--bubble-radius: 8vw;
--bubble-float-duration: 8s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(39) {
--bubble-left-offset: 13vw;
--bubble-radius: 5vw;
--bubble-float-duration: 8s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 2s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(40) {
--bubble-left-offset: 8vw;
--bubble-radius: 7vw;
--bubble-float-duration: 11s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 2s;
--bubble-sway-delay: 1s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(41) {
--bubble-left-offset: 66vw;
--bubble-radius: 1vw;
--bubble-float-duration: 9s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 2s;
--bubble-sway-delay: 1s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(42) {
--bubble-left-offset: 11vw;
--bubble-radius: 4vw;
--bubble-float-duration: 10s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 0s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(43) {
--bubble-left-offset: 57vw;
--bubble-radius: 3vw;
--bubble-float-duration: 11s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(44) {
--bubble-left-offset: 53vw;
--bubble-radius: 5vw;
--bubble-float-duration: 12s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 2s;
--bubble-sway-delay: 3s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(45) {
--bubble-left-offset: 18vw;
--bubble-radius: 1vw;
--bubble-float-duration: 7s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 4s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(46) {
--bubble-left-offset: 72vw;
--bubble-radius: 2vw;
--bubble-float-duration: 7s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 0s;
--bubble-sway-delay: 1s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(47) {
--bubble-left-offset: 80vw;
--bubble-radius: 3vw;
--bubble-float-duration: 12s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(48) {
--bubble-left-offset: 83vw;
--bubble-radius: 8vw;
--bubble-float-duration: 12s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(49) {
--bubble-left-offset: 16vw;
--bubble-radius: 10vw;
--bubble-float-duration: 11s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 4s;
--bubble-sway-delay: 0s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(50) {
--bubble-left-offset: 0vw;
--bubble-radius: 7vw;
--bubble-float-duration: 7s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 3s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-right-to-left;
}
#keyframes float-up {
to {
transform: translateY(-175vh);
}
}
#keyframes sway-left-to-right {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
#keyframes sway-right-to-left {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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="bubbles">
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
</div>
<div class="col position-relative">
<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>