I am currently working on creating a container layout that consists of a row and an accordion below it, where the columns have uniform widths using Bootstrap grid system. The issue I'm facing is aligning the data within the accordion to match the top row.
Based on my understanding of Bootstrap 4, the col class should automatically adjust the size of each column, making all columns equal in width regardless of content.
The top row appears fine, but the rows below seem compressed. Here is an illustration:
https://i.sstatic.net/uYkWY.png
Below is the code for my razor page:
<body>
<div class="container">
<div class="row">
<div class="col">
@Html.DisplayNameFor(model => model.ReportHighLevel[0].Item)
</div>
<div class="col">
@Html.DisplayNameFor(model => model.ReportHighLevel[0].ItemDescription)
</div>
<div class="col">
@Html.DisplayNameFor(model => model.ReportHighLevel[0].CorpCustomer)
</div>
<div class="col">
@Html.DisplayNameFor(model => model.ReportHighLevel[0].UoM)
</div>
<div class="col">
@Html.DisplayNameFor(model => model.ReportHighLevel[0].SummedOrder)
</div>
<div class="col">
@Html.DisplayNameFor(model => model.ReportHighLevel[0].SummedForecast)
</div>
<div class="col">
@Html.DisplayNameFor(model => model.ReportHighLevel[0].Difference)
</div>
<div class="col">
@Html.DisplayNameFor(model => model.ReportHighLevel[0].Week)
</div>
</div>
</div>
<div class="container">
<div id="accordion">
@{int counter = 0; }
@foreach (var dataVM in Model.CollapseReport)
{
<div class="card">
<div class="card-header" id="heading@(counter)">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapse@(counter)" aria-expanded="true" aria-controls="collapse@(counter)">
<div class="row">
<div class="col">
@dataVM.Summary.Item
</div>
<div class="col">
@dataVM.Summary.ItemDescription
</div>
<div class="col">
@dataVM.Summary.CorpCustomer
</div>
<div class="col">
@dataVM.Summary.UoM
</div>
<div class="col">
@dataVM.Summary.SummedOrder
</div>
<div class="col">
@dataVM.Summary.SummedForecast
</div>
<div class="col">
@dataVM.Summary.Difference
</div>
<div class="col">
@dataVM.Summary.Week
</div>
</div>
</button>
</h5>
</div>
<div id="collapse@(counter)" class="collapse" aria-labelledby="heading@(counter)" data-parent="#accordion">
<div class="card-body">
<form method="post">
<input type="hidden" name="var1" value="@dataVM.Summary.CorpCustomer" />
<input type="hidden" name="var2" value="@dataVM.Summary.Item" />
<input type="submit" class="btn btn-default" value="Add to Log" asp-page-handler="AddLog" asp-route-data="@dataVM.Summary.CorpCustomer, @dataVM.Summary.Item)" />
</form>
<div class="container">
@foreach (var item in dataVM.WeeksOfData)
{
<div class="row">
<div class="col">
@item.Item
</div>
<div class="col">
@item.ItemDescription
</div>
<div class="col">
@item.CorpCustomer
</div>
<div class="col">
@item.UoM
</div>
<div class="col">
@item.SummedOrder
</div>
<div class="col">
@item.SummedForecast
</div>
<div class="col">
@item.Difference
</div>
<div class="col">
@item.Week
</div>
</div>
}
</div>
</div>
</div>
</div>
counter++;
}
</div>
</div>