Card grid not working Styling a Razor Page | ASP.NET Core 101 [6 of 13]

[ghost]

I had trouble making the cards show up in more than one column. I went through the Bootstrap files inside lib/bootstrap/dist/css and I couldn't find the .card-coulmns class. So I went to the Bootstrap documentation and found a different way to make the columns: https://getbootstrap.com/docs/5.1/components/card/#grid-cards ; https://getbootstrap.com/docs/5.1/layout/grid/#row-columns. Basically we use row-cols classes to define a grid.

That's the solution that worked for me.

[Crydust]

Another workaround is to add this to the style.css file.

/* BEGIN workaround bootstrap 5 dropped support for card-columns */
.card-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; 
}
.card-columns > .card {
  flex: 0 0 32%;
  margin: 0 2% 20px 0;
}
.card-columns > .card:nth-child(3n) {
  margin-right: 0;
}
/* END workaround bootstrap 5 dropped support for card-columns */

[Umer2451]

That seems to resolve the issue!