Bootstrap Collapse With Multiple Embedded Rows - html

Question

Quick question on bootstrap and columns/rows. I have a cascade effect that has managers, then employees, then employee family members.
The problem is that I do not have a full understanding of bootstrap and how it uses columns/rows.
I get this result when running my code at the bottom here
But I need this result
I know this is not achieveable with my current code... Any suggestions?
Thanks in advance!
<div class="container">
<div class="row">
#{i++;}
<div class="col-md-4">
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="##i">Manager Name</button>
<div id="#i" class="collapse">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-10">
<h5>Employees</h5>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
j++;
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="##j">Employee Name</button>
<br />
<div id="#j" class="collapse">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<h5>Employee Fam Members</h5>
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
#Html.ActionLink(Employee Fam Member Name, blah, blah)
</div>
</div>
<br />
</div>
<br />
</div>
<div class="col-md-2">
<br />
<br />
</div>
</div>
</div>
</div>
<div class="col-md-1">
Edit Button
</div>
<div class="col-md-7">
Delete Button
</div>
</div>
<br />

Answer 1

Rather than putting rows inside of columns, you'll have to make a bunch of rows on the same level instead. Otherwise the new rows would only be the width of the column it was placed in. Also, container-fluid to make it fully full width if you'd like.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#i">Manager Name</button>
</div>
<div class="col-md-1">
Edit Button
</div>
<div class="col-md-7">
Delete Button
</div>
</div>
<div id="i" class="collapse">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-10">
<h5>Employees</h5>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#j">Employee Name</button>
</div>
</div>
</div>
<div id="j" class="collapse">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<h5>Employee Fam Members</h5>
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
#Html.ActionLink(Employee Fam Member Name, blah, blah)
</div>
</div>
</div>
</div>