In my project, I have a Custom Mega Menu that dynamically creates code to display all Nav bar entries. Since changing the logic of Mega menu creation is difficult, I am looking for a CSS solution to avoid fixed height in bootstrap columns.
My code structure looks something like this:
<div class="row">
<div class="col-xl-3">... contents </div>
<div class="col-xl-3">... contents </div>
<div class="col-xl-3">... contents </div>
<div class="col-xl-3">... contents </div>
<div class="col-xl-3">... contents </div>
<div class="col-xl-3">... contents </div>
</div>Since there can be varying numbers of col-xl-3 elements, I encounter extra space between columns (highlighted in yellow in the image).
I tried using d-block and float-left on child elements but still faced issues with spacing as shown in the attached image.
To resolve this, I want to rearrange sections so that items in section 5 move below those in section 1, and so on, eliminating the extra space.
Here's a snippet from my sample code:
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<div class="container-outer">
<div class="container-fluid">
...
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>