This empty space is a result of having nothing to display there. To fill it up, consider arranging the cards in a vertical stack instead of placing them side by side (use Bootstrap class .vstack, explore more about Bootstrap stacks here).
An issue arises when using Bootstrap classes like .gap-* which determine the gap between stacked blocks based on rem units. This can be problematic as it doesn't adapt according to screen height. A possible solution is creating a custom class such as .gap-big that utilizes vh for calculating the gap. Using vh allows for setting gaps relative to the screen height, ensuring a better fit regardless of the screen size.
If the white space remains too large, try adjusting the value in the code below from gap: 10vh !important; to a higher value like gap: 15vh !important;.
Below is the proposed solution - execute the snippet and click "Full page" to view.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="John Doe">
<title>Customized Pricing Example</title>
<link href="https://cdn.bootstrap.com/bootstrap.min.css" rel="stylesheet" integrity="sha384-12345678" crossorigin="anonymous">
<script src="https://cdn.bootstrap.com/bootstrap.bundle.min.js" integrity="sha384-87654321" crossorigin="anonymous"></script>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.gap-big {
gap: 10vh !important;
}
</style>
<!-- Custom styles for this template -->
<link href="custom-pricing.css" rel="stylesheet">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check" viewBox="0 0 16 16">
<title>Check</title>
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
</symbol>
</svg>
<div class="container py-3">
...
</body>
</html>