Struggling with multi-nested rows and columns in Bootstrap 4, I encountered an issue where the line2 was positioned next to line1 instead of below it with a horizontal bar separating them. Can someone help me understand why this is happening?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<h1>Title</h1>
<div class="row">
<div class="col-lg-12 my-3 p-3 bg-white rounded shadow-sm">
<h5 class="border-bottom border-gray pb-2 mb-0">Test 2</h5>
<div class="row pb-3 mb-0 lh-125 border-bottom border-gray">
<div class="col-md-3 media small">
Some stuff
</div>
<div class="col-md-9 media">
<div class="row pb-3 mb-0 lh-125 border-bottom border-gray">
Line 1
</div>
<div class="row">
Line 2
</div>
</div>
</div>
</div>
</div>
</div>Even when using the same template with Bootstrap 5, the issue does not persist:
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="593b36362d2a2d2b3829196c77697769">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<h1>Title</h1>
<div class="row">
<div class="col-lg-12 my-3 p-3 bg-white rounded shadow-sm">
<h5 class="border-bottom border-gray pb-2 mb-0">Test 2</h5>
<div class="row pb-3 mb-0 lh-125 border-bottom border-gray">
<div class="col-md-3 media small">
Some stuff
</div>
<div class="col-md-9 media">
<div class="row pb-3 mb-0 lh-125 border-bottom border-gray">
Line 1
</div>
<div class="row">
Line 2
</div>
</div>
</div>
</div>
</div>
</div>Desiring to solve this issue while sticking to Bootstrap 4, I am seeking guidance on how to correct it.