cssbulma

how to resize bulma css card

How can I resize bulma css card?, I'm from Bootstrap-5 in there, if I want to resize the card, I'm using col-md-3 or col-md-4 but in Bulma I don't know how to resize it to a smaller size. When you take a look at this card is actually bigger, and it is not responsive in the mobile devices, how can I resize this card to look like one that has col-md-3 in bootstrap-5?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<style>
    .icon{
        padding-left: 25px;
        background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat left;
        background-size: 20px;
    }
    .thumnails{
        object-fit: cover;
        }
</style>
<body>
  <div class="container">
    
    <div class="columns is-centered ">
      {% for book in books %}
      <div class="column is-half">
        <div class="card">
          <div class="card-image">
            <figure class="image is-4by3">
              <img class="thumnails" src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/S/I/124210_1612011734.jpg" alt="Placeholder image">
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <figure class="image is-48x48">
                  <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
                </figure>
              </div>
              <div class="media-content">
                <p class="title is-4">{{ book.user }}</p>
                <p class="subtitle is-6">{{ book.title }}</p>
              </div>
            </div>
        
            <div class="content">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Phasellus nec iaculis mauris. <a>@bulmaio</a>.
              <a href="#">#css</a> <a href="#">#responsive</a>
              <br>
              <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
            </div>
            
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    
  </div>
</body>
</html>

This is how it display inside a for loop:

The Image

Solution

  • To resize the Bulma CSS card, I added a column class to the outer div of the card and specify the width of the column according to my requirement:

    is-3 inside a column class specifies the width of the column, so I can replace the following line with:

    <div class="column is-3">


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<style>
    .icon{
        padding-left: 25px;
        background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat left;
        background-size: 20px;
    }
    .thumnails{
      height: 100% !important;
      
    }
    .card{
      height: 100% !important;
    }
</style>
<body>
  <div class="container">
    
    <div class="columns">
      {% for book in books %}
      <div class="column is-3">
        <div class="card">
          <div class="card-image">
            <figure class="image is-4by3">
              <img class="thumnails" src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/S/I/124210_1612011734.jpg" alt="Placeholder image">
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <figure class="image is-48x48">
                  <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
                </figure>
              </div>
              <div class="media-content">
                <p class="title is-4">{{ book.user }}</p>
                <p class="subtitle is-6">{{ book.title }}</p>
              </div>
            </div>
        
            <div class="content">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Phasellus nec iaculis mauris. <a>@bulmaio</a>.
              <a href="#">#css</a> <a href="#">#responsive</a>
              <br>
              <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
            </div>
            
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    
  </div>
</body>
</html>