Add card view styles to div element

using bootstrap

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