I'm currently working on a website and running into an issue that I can't seem to resolve. The problem lies in the layout of multiple cards with information; they are arranged in columns and when there are more than 4 columns, they switch to a new row. However, the challenge arises when the number of cards is not divisible by 4, resulting in less than 4 columns in a row. This inconsistency in layout is due to my use of the col-sm Bootstrap class, which offers responsiveness but doesn't handle cases with less than 4 columns per row effectively. I attempted using col-sm-3 instead, but it compromised the website's overall responsiveness. (Refer to the screenshots) Additionally, I'm utilizing Razor views to combine C# and HTML in my project.
View when using col-sm: View col-sm
Desired layout: View col-sm-3
Issue with col-sm-3: Problem with col-sm-3
Here is the code for displaying the cards:
.vehicule-card {
border-radius: 10px;
border: solid 4px #2F3136;
background-color: #333333;
}
.vehicule-cardbody {
height: 5em;
}
.vehicule-name {
background-color: #392A49;
color: #B8BABD;
width: 10em;
margin: auto;
padding: 3px;
border-radius: 10px;
border: solid 4px #2F3136;
}
.vehicule-image {
border-radius: 10px;
border: solid 4px #2F3136;
}<div class="container-fluid">
<div class="headline">COMPACT CARS</div>
<div class="row">
@foreach (var car in Model.cars)
{
if (counter != 0 && counter % 4 == 0)
{
@:</div>
@:<div class="row">
}
<div class="col-sm-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="@car.ImgPath" alt="Card image cap">
<div class="card-body vehicule-cardbody">
<h2 class="vehicule-name">@car.Name</h2>
</div>
</div>
</div>
counter++;
}
</div>
</div>Please note that attempting to run the code will not work as it's a Razor view.
Thank you