Posted By: Anonymous
I am using Angular Material, Bootstrap.
I am trying to show the mat-card which should fit for all screen.
But I am seeing an empty spaces right side of the card
For some screen resolution it is fitting properly. Can anyone suggest what I need to here
StacKblitz URL: demo
Below attached the screen shot of empty space
You can use Bootstrap Grid utility, and specify number of columns for each
mat-card. Also you can specify how you want it to be displayed on what screen size.
For example, to display 4 cards in one row on big screens, 3 on medium, and 2 on small, you can do this:
class="col-lg-3 col-md-4 col-6"
Here is the updated code: https://stackblitz.com/edit/material-responsive-yvkfxc?file=src/app/app.component.html