Bulma different column sizes on desktop, tablet or mobile

2.5k Views Asked by Raccoon At 04 April 2025 at 23:20

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?

Original Q&A

There are 2 best solutions below

Jocelyn On 21 October 2020 at 10:25 BEST ANSWER

<!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/[email protected]/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>

Wam On 06 March 2024 at 10:06

You should add 'is-mobile' on the div.columns.

Source

Bulma different column sizes on desktop, tablet or mobile

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in FRAMEWORKS

Related Questions in GRID

Related Questions in BULMA

Trending Questions

Popular # Hahtags

Popular Questions