I need to create a card that includes text and an image, save it as a component, and then display this component three times in app.component.html so that the cards are all visible on the website. Currently, the cards are stacked vertically. How can I align them horizontally?
Below is my code:
<div class="card" style="width: 18rem;">
<img class="card-img" src="assets/grey.jpg" alt="Grey background">
<div class="card-body">
<h5 class="card-title">Heading</h5>
<p class="card-text">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<a href="#" class="btn btn-secondary">View details »</a>
</div>
</div>
And here is the SCSS code:
@import "../../styles";
.card{
text-align: center;
&-title{font: 32px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
&-text{font: 16px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
&-img{border-radius: 100%;
width: 140px;
}
}