Here is an example of how you can add a card view style to the div element:
<div class="col-sm-4 my-3"> <div class="card"> <img src="https://picsum.photos/512" class="card-img-top" alt="sampleimage"> <div class="card-body"> <h5 class="card-title">card view with Image</h5> <p class="card-text">Some text about the image</p> <a href="https://picsum.photos/512" download class="btn btn-primary">Download</a> </div> </div> </div>
A div element with class “card” this will give the div element a card view style, and inside it, I added an image element with class “card-img-top” this will give the image a card view style. I also added “card-body” class to the div that contains the text and download button.
You can also add additional classes like ‘card-header’ and ‘card-footer’ to create a header and footer respectively.
For the style to take effect, you need to include the bootstrap CSS file in your HTML file as well, for example :
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
This will enable the usage of the card class and other classes used