htmlcssframeworksgridbulma

Bulma different column sizes on desktop, tablet or mobile

Bulma CSS framework

I am using bulma's grid system to make column blocks. For example I have 4 div's next to eachother and each div has column is-3 is-offset-0 as its class. My question is how can I show these div's on tablet 2x2 and on mobile 1x1? Mobile is working but I can't get it working on tablet. In the picture you see 4 columns next to eachother, that is what I want on desktop but on tablet only I want them to show like 2 columns per row.

Does anyone know how to do this?

enter image description here

Solution 

  • <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello Bulma!</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"
    />
  </head>
  <body>
    <style>
      .column p {
        background-color: coral;
      }
    </style>
    <div class="container">
      <div class="columns is-multiline">
        <div
          class="column is-3 is-3-fullhd is-3-desktop is-6-tablet is-12-mobile"
        >
          <p>First column</p>
        </div>
        <div
          class="column is-3 is-3-fullhd is-3-desktop is-6-tablet is-12-mobile"
        >
          <p>Second column</p>
        </div>
        <div
          class="column is-3 is-3-fullhd is-3-desktop is-6-tablet is-12-mobile"
        >
          <p>Third column</p>
        </div>
        <div
          class="column is-3 is-3-fullhd is-3-desktop is-6-tablet is-12-mobile"
        >
          <p>Fourth column</p>
        </div>
      </div>
    </div>
  </body>
</html>