I am trying to make these vertical cards into horizontal cards.
I am using the Cards component from Angular Material.
I can create cards only vertically, but I need the cards arranged on a horizontal level.
Here I'm attaching my code for reference.
HTML:
<body> <div> <!-- <img background-image src="assets/logo.png"> --> <div> <h1>Welcome to Data Portal...</h1> <br> <mat-card> <mat-card-header> <mat-card-title>Catalog</mat-card-title> </mat-card-header> <mat-card-content> <p>Here you can find the details about users/roles.</p> </mat-card-content> <mat-card-header> <mat-card-title>Data Portal</mat-card-title> </mat-card-header> <mat-card-content> <p>Here you can find the details about all the databases and tables.</p> </mat-card-content> </mat-card> <br> <mat-card> <mat-card-header> <mat-card-title>Data Portal</mat-card-title> </mat-card-header> <mat-card-content> <p>Here you can find the details about all the databases and tables.</p> </mat-card-content> </mat-card> </div> </div>
</body>CSS:
.example-card { height: 200px; width: 400px; max-width: 300px; margin-left: 100px; background-color: lightgrey; color: black; text-align: center; }3 Answers
Create a container for all the mat-cards, then change the flow of the elements inside the container using CSS. For example:
<div> <mat-card>...</mat-card> <mat-card>...</mat-card>
</div><div fxLayout="row wrap" fxLayoutGap="16px grid"> <div fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%"> <mat-card > </mat-card>
</div>See link below for reference
1You need a container for mat-cards first, then you can set flex to make it horizontal or even vertical if you want. Some code is below maybe will help you.
.wrap{
display: flex;
margin: 0 auto //center the content
}
.example-card{
border: 1px solid black;
border-radius: 5px;
text-align: center;
height: 200px;
width: 400px;
max-width: 300px;
margin-left: 100px;
background-color: lightgrey;
color: black;
text-align: center;
}<div> <mat-card> <mat-card-header> <mat-card-title>Catalog</mat-card-title> </mat-card-header> <mat-card-content> <p>Here you can find the details about users/roles.</p> </mat-card-content> <mat-card-header> <mat-card-title>Data Portal</mat-card-title> </mat-card-header> <mat-card-content> <p>Here you can find the details about all the databases and tables.</p> </mat-card-content> </mat-card> <br> <mat-card> <mat-card-header> <mat-card-title>Data Portal</mat-card-title> </mat-card-header> <mat-card-content> <p>Here you can find the details about all the databases and tables.</p> </mat-card-content> </mat-card>
</div>
