Create dynamic div Razor MVC - css

Question

I want to create a dynamic div.
I have a list of products which maximum 3 can be in one row "col-xs-4" but if they are 4 products I want 3 with "col-xs-4" and the 4th being with "col-xs-12" to fill the entire row. If I have 5 products I want 3 with "col-xs-4" and the other 2 with "col-xs-6".
I was thinking about depending on the count of the items I set the class
<div class="flippersContainer">
<div class="container">
<div class="col-xs-12">
#{
var children = Model.Content.Children.ToList();
if (children.Any())
{
foreach (var item in children.OfType<RedButtonItem1>())
{
string imagePath = string.Empty;
if (!string.IsNullOrEmpty(item.Image))
{
var itemImage = Umbraco.TypedMedia(item.Image);
imagePath = itemImage.GetCropUrl(80, 160);
}
{
string colCSS = string.Empty;
var productNumber = children.OfType<RedButtonItem1>().Count();
}
<div class="col-xs-4">
<div class="front-two">
<div class="flipperAllFront">
<div class="big-button">
<img class="img-responsive" src="https://www.atlantico.ao/SiteCollectionImages/PARTICULARES/ContaGlobal/Atlantico-Conta-Global-375X178.jpg">
<div class="productTitle">
<span>#item.Title</span>
</div>
<div class="productText">
<span>#item.Description</span>
</div>
#{
if (item.CallToAction != null && item.CallToAction.HasValues)
{
var linkUrl = (item.CallToAction.First.Value<bool>("isInternal")) ? (item.CallToAction.First.Value<int?>("internal").HasValue ? Umbraco.NiceUrl(item.CallToAction.First.Value<int>("internal")) : string.Empty) : item.CallToAction.First.Value<string>("link");
var linkTarget = item.CallToAction.First.Value<bool>("newWindow") ? "_blank" : null;
#:<a role="button" href="#linkUrl" target="#linkTarget">
}
else
{
#:<a class="link-big-button" role="button" data-parent="#accordion" href="##item.Id">
}
#:</a>
}
</div>
</div>
</div>
</div>
}
}
}
</div>
</div>
Thanks in Advance

Answer 1

<div class="col-xs-#(childrenCount==3?"4":childrenCount==4?"3":childrenCount==5?"3":"6")">
<div class="flippersContainer">
<div class="container">
<div class="col-xs-12">
#{
var children = Model.Content.Children.ToList();
int childrenCount = children.OfType<RedButtonItem1>().Count;
if (children.Any())
{
foreach (var item in children.OfType<RedButtonItem1>())
{
string imagePath = string.Empty;
if (!string.IsNullOrEmpty(item.Image))
{
var itemImage = Umbraco.TypedMedia(item.Image);
imagePath = itemImage.GetCropUrl(80, 160);
}
{
string colCSS = string.Empty;
var productNumber = children.OfType<RedButtonItem1>().Count();
}
<div class="col-xs-#(childrenCount==3?"4":childrenCount==4?"3":childrenCount==5?"3":"6")">
<div class="front-two">
<div class="flipperAllFront">
<div class="big-button">
<img class="img-responsive" src="https://www.atlantico.ao/SiteCollectionImages/PARTICULARES/ContaGlobal/Atlantico-Conta-Global-375X178.jpg">
<div class="productTitle">
<span>#item.Title</span>
</div>
<div class="productText">
<span>#item.Description</span>
</div>
#{
if (item.CallToAction != null && item.CallToAction.HasValues)
{
var linkUrl = (item.CallToAction.First.Value<bool>("isInternal")) ? (item.CallToAction.First.Value<int?>("internal").HasValue ? Umbraco.NiceUrl(item.CallToAction.First.Value<int>("internal")) : string.Empty) : item.CallToAction.First.Value<string>("link");
var linkTarget = item.CallToAction.First.Value<bool>("newWindow") ? "_blank" : null;
#:<a role="button" href="#linkUrl" target="#linkTarget">
}
else
{
#:<a class="link-big-button" role="button" data-parent="#accordion" href="##item.Id">
}
#:
</a>
}
</div>
</div>
</div>
</div>
}
}
}
</div>
</div>