I am trying to avoid fixed height of bootstrap columns. I do have a Custom Mega Menu in my project where we show all our Nav bar entries. This one is a dynamically created code so it will be difficult to change the logic of the Mega menu creation so I am looking for some Css solution to fix this issue.
My code in high level look like.
<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 this one is a dynamic item we can expect n number of col-xl-3
The issue is I am getting some extra space in between columns. ( taking the max size item's size in each row)
As you can see in the image attached, The yellow color marked area I am trying to avoid.
I have tried to use d-block with float-left to the child elements.
Then I am getting display something like below.
Here also I am getting extra space in some places. Is there any way to get out of this issues?
What I am looking for is to move sections 5 to below 1 st section and 6 one to below 2 nd section etc .And remove the extra space between top and bottom columns (the yellow highlighted space in the image)
I am adding a testing sample below here.
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<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 class="row">
<div class="col-lg-12 col-md-12 col-12 navtop">
<nav class="navbar navbar-expand-lg navbar-light">
<div id="navbarContent" class="collapse navbar-collapse flex-md-column">
<ul class="navbar-nav mr-auto second-ul">
<ul class="navbar-nav treemenu">
<li class="nav-item dropdown position-static">
<a class="nav-link mnn-nav-link channelclass" href="#" id="navbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MENU
<i class="fa fa-down"></i>
</a>
<div class="dropdown-menu w-100 ddn" aria-labelledby="navbarDropdown">
<div class="row d-block">
<div class="col-xl-3 float-left">
<p data-id="ACCT" class="submenu-title mnn-sdaaaent-nav-click">
1
<i class="sub-up-down fa-up fa"></i>
</p>
<ul class="list-unstyled ACCT ">
<li>
<a class="mnn-nav-sub-click" data-id="IPASSBOOKACCT">
seffwew
<i class="fa fa-down"></i>
</a>
<ul class="list-unstyled seffwewACCT mnn-nav-ul-sub" style="display: none;">
<li>
<a href="/asASasAS/GI/Index/#=PTR_KTYU#">General Information</a>
</li>
<li>
<a href="/asASasAS/AccountSummary/Index/#=PTR_KTYU#">sefscsdsd Summary</a>
</li>
<li>
<a href="/asASasAS/Transaction/Index/#=PTR_KTYU#">Transaction</a>
</li>
</ul>
</li>
<li>
<a href="/asASasAS/DeferredIncome/AdminIndex">sfdsfsds Income</a>
</li>
</ul>
</div>
<div class="col-xl-3 float-left">
<p data-id="TAX" class="submenu-title mnn-sdaaaent-nav-click">
2
<i class="sub-up-down fa-up fa"></i>
</p>
<ul class="list-unstyled TAX ">
<li>
<a href="/Communications/Tax/TaxForms/2019/Forms">2019 sdfdsfsfsdfs Forms</a>
<sup class="newtext">NEW</sup>
</li>
<li>
<a target="_blank" href="/Commonfiles/2019/2019POFManual.pdf">2019 POF Manual</a>
<sup class="newtext">NEW</sup>
</li>
<li>
<a href="/sdfdsfsfsdfs/EstimatedCompositesdfdsfsfsdfs/Index">Estimated Composite sdfdsfsfsdfses 4th Qtr Election</a>
</li>
<li>
<a href="/sdfdsfsfsdfs/sdfdsfsfsdfsdsFOF/Index">ds sfsdsdsd and Consent</a>
</li>
<li>
<a href="/sdfdsfsfsdfs/NYIT2658Estimates/Index">NY IT-2658 Estimate</a>
</li>
<li>
<a href="/sdfdsfsfsdfs/sdfdsfsfsdfsQuestionaire/Index">State sdfdsfsfsdfs Questionnaire</a>
</li>
<li>
<a href="/sdfdsfsfsdfs/sdfdsfsfsdfsPrepSignUp/Index">sdfdsfsfsdfs Presdaaaation Sign-Up</a>
</li>
<li>
<a class="mnn-nav-sub-click" data-id="ARCHIVES">
Archives
<i class="fa fa-down"></i>
</a>
<ul class="list-unstyled ARCHIVES mnn-nav-ul-sub" style="display: none;">
<li>
<a href="/Communications/sdfdsfsfsdfs/sdfdsfsfsdfsForms/2018/Forms">2018 sdfdsfsfsdfs Forms</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2018/2018POFManual.pdf">2018 POF Manual</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2018/2018SampleForms965and965-A.PDF">2018 dfgdfgdg Manual addendum-Sample Forms 965 and 965-A</a>
</li>
<li>
<a href="/Commonfiles/2018/Section965StatebyStateInstructions.xlsx">Section 965 State by State Instructions</a>
</li>
<li>
<a href="/Communications/sdfdsfsfsdfs/sdfdsfsfsdfsForms/2017/Forms">2017 sdfdsfsfsdfs Forms</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2017/Sec965FAQ.pdf">Section 965 FAQs</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2017/2017dfgdfgdgManual.pdf">2017 dfgdfgdg Manual</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2017/2017sdfdsfsfsdfs_Information.pdf">2017 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2017/2017dfgdfgdgManualAddendum965TransitionsdfdsfsfsdfsREVISED101218.pdf">2017 dfgdfgdg Manual Addendum 965 Transition sdfdsfsfsdfs revised 101218</a>
</li>
<li>
<a href="/Communications/sdfdsfsfsdfs/sdfdsfsfsdfsForms/2016/Forms">2016 sdfdsfsfsdfs Forms</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2016/2016_sdfdsfsfsdfsInformation.pdf">2016 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2016/2016dfgdfgdgManual.pdf">2016 dfgdfgdg Manual</a>
</li>
<li>
<a href="/Communications/sdfdsfsfsdfs/sdfdsfsfsdfsForms/2015/Forms">2015 sdfdsfsfsdfs Forms</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2015/2015sdfdsfsfsdfsInformation.pdf">2015 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2015/2015dfgdfgdgManual.pdf">2015 dfgdfgdg Manual</a>
</li>
<li>
<a href="/Communications/sdfdsfsfsdfs/sdfdsfsfsdfsForms/2014/Forms">2014 sdfdsfsfsdfs Forms</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2014/2014sdfdsfsfsdfsInformation.pdf">2014 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2014/2014dfgdfgdgManual.pdf">2014 dfgdfgdg Manual</a>
</li>
<li>
<a href="/Communications/Forms">2013 sdfdsfsfsdfs Forms</a>
</li>
<li>
<a target="_blank" href="/CommonFiles/2013/2013sdfdsfsfsdfsInformation.pdf">2013 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2013/2013dfgdfgdgManual.pdf">2013 dfgdfgdg Manual</a>
</li>
<li>
<a href="/Communications/Forms">2012 sdfdsfsfsdfs Forms</a>
</li>
<li>
<a target="_blank" href="/CommonFiles/2012/2012sdfdsfsfsdfsInformation.pdf">2012 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2012/2012dfgdfgdgManual.pdf">2012 dfgdfgdg Manual</a>
</li>
<li>
<a href="/Communications/Forms">2011 sdfdsfsfsdfs Forms</a>
</li>
<li>
<a target="_blank" href="/CommonFiles/2011/2011sdfdsfsfsdfsInformation.pdf">2011 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2011/2011dfgdfgdgManual.pdf">2011 dfgdfgdg Manual</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-xl-3 float-left">
<p data-id="FINPLANPTR" class="submenu-title mnn-sdaaaent-nav-click">
3
<i class="sub-up-down fa-up fa"></i>
</p>
<ul class="list-unstyled FINPLANPTR ">
<li>
<a href="/sdfdsfsfsdfs/FinPlanServices/Index">dfgdfgdg-dfgdgdfgdfg Planning Services sfsdsdsd</a>
</li>
</ul>
</div>
<div class="col-xl-3 float-left">
<p data-id="ADM" class="submenu-title mnn-sdaaaent-nav-click">
4
<i class="sub-up-down fa-up fa"></i>
</p>
<ul class="list-unstyled ADM ">
<li>
<a target="_blank" href="/Commonfiles/dfdfs/DirectAdmitBook.pdf">Direct dfdfs Manual</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/dfdfs/NewsdsdsdManual.pdf">New sdsdsd & Principal Manual</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/dfdfs/sdsdsdshipagreements.pdf">sdsdsdship Agreements</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/dfdfs/Americas_Operating_Agreement_as_amended_July_4_2015.pdf">Americas Operating Agreement</a>
</li>
</ul>
</div>
<div class="col-xl-3 float-left">
<p data-id="RET" class="submenu-title mnn-sdaaaent-nav-click">
5
<i class="sub-up-down fa-up fa"></i>
</p>
<ul class="list-unstyled RET ">
<li>
<a class="mnn-nav-sub-click" data-id="SPDS">
Summary Plan Descriptions (sdssdsd)
<i class="fa fa-down"></i>
</a>
<ul class="list-unstyled sdssdsd mnn-nav-ul-sub" style="display: none;">
<li>
<a target="_blank" href="/Commonfiles/sdsdaa/TYU sdsdsdship sdsdaa Plan - HR-10 Plan - 2016.pdf">TYU sdsdsdship sdsdaa Plan -HR10-Plan</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/sdsdaa/TYU sdsdaa Savings Plan -401(k) sdsdsd-principles - 2016.pdf">TYU sdsdaa Savings Plan-401(k)</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/sdsdaa/TYU PDBRP and IDBRP 2017.pdf">TYU PDBRP and IDBRP</a>
</li>
</ul>
</li>
<li>
<a href="/sdsdaa/401kContribution/_401kExclusionMsg">
401(k) asdaaa and
Election
</a>
</li>
<li>
<a class="mnn-nav-sub-click" data-id="sdssdsd">
Summary Plan Descriptions (sdssdsd)
<i class="fa fa-down"></i>
</a>
<ul class="list-unstyled sdssdsd mnn-nav-ul-sub" style="display: none;">
<li>
<a target="_blank" href="/Commonfiles/sdsdaa/TYU sdsdsdship sdsdaa Plan - HR-10 Plan - 2016.pdf">TYU sdsdsdship sdsdaa Plan -HR10-Plan</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/sdsdaa/TYU sdsdaa Savings Plan -401(k) sdsdsd-principles - 2016.pdf">TYU sdsdaa Savings Plan-401(k)</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/sdsdaa/TYU PDBRP and IDBRP 2017.pdf">TYU asdadad and sdfsfsdsd</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-xl-3 float-left">
<a target="_blank" class="submenu-title mnn-sdaaaent-nav-click" href="https://sdaaa.TYU.net">6</a>
</div>
<div class="col-xl-3 float-left">
<a class="submenu-title mnn-sdaaaent-nav-click" href="https://ptrshpdashboard.TYU.net">7</a>
</div>
</div>
</div>
</li>
</ul>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$("#navbarContent").hide();
$('.navtrigger').click(function () {
$("#navbarContent").toggle();
$(this).toggleClass('active');
$("#mainListDiv").toggleClass("show_list");
$("#mainListDiv").fadeIn();
});
setTimeout(function () {
$('body').addClass('loaded');
}, 100);
});
$(".mnn-nav-ul-sub").hide();
$(".mnn-nav-sub-click").click(function () {
$(".mnn-nav-ul-sub").slideToggle();
$(this).find('i').toggleClass('fa fa-down fa fa-up');
$(".mnn-nav-sub-click").sdaaaent().removeClass('navactive');
});
$(".ddn").on("click", function (e) {
e.stopPropagation();
});
</script>
</body>
</html>
<div class="row row-cols-4">instead ofrow d-blockand removefloat-leftnear ofcol-xl-3div class="row row-cols-5">and change yourcol-xl-3tocol