I need to customize the background color of each location in a list that is dynamically loaded from our SQL Server DB and structured using Bootstrap Rows. How can I achieve alternating colors for each location?
Attempting to apply an "nth-child" style to the rows didn't work, as each row generated treats it as the first row regardless of how many are created. Even creating a table resulted in formatting and styling issues.
https://i.sstatic.net/gskTU.png
The code responsible for generating the list shown above is provided below:
@foreach (var hospital in Model)
{
<button class="top50accordion">@Html.DisplayFor(modelItem => hospital.StatesAbre[hospital.State])</button>
<div class="panel">
@foreach (var subhospital in hospital.NameCityCenterId)
{
string[] hosp = @subhospital.Split('+');
<div class="row">
<div class="col-8 col-sm-8 col-md-8 col-lg-6" style="margin: 5px 0;"><a href="~/ResearchCenter?id=@hosp[2]&alias=@hosp[0]" style="color:#0A5D66;font-weight:bold;" target="_blank">@hosp[0]</a></div>
<div class="text-right col-4 col-sm-4 col-md-4 col-lg-5" style="margin: 5px 0;">@hosp[1]</div>
</div>
<div class="col-lg-1"></div>
}
</div>
}