Divide 4 column to 2 column with Bulma CSS

Question

I have this code -

<div class="columns">
    <div class="column">column 1</div>
    <div class="column">column 2</div>
    <div class="column">column 3</div>
    <div class="column">column 4</div>
</div>

I want to make like this with Bulma css - https://codepen.io/hashem/pen/ausJL

If I resize ( mobile version ) , those columns break in to 2 columns , instead 4 .

Answer 1

This should solve your question:

 <div class="columns is-mobile is-multiline">
  <div class="column is-half-mobile">column 1</div>
  <div class="column is-half-mobile">column 2</div>
  <div class="column is-half-mobile">column 3</div>
  <div class="column is-half-mobile">column 4</div>
</div>

If you want to fit in as many columns as possible and have them wrap when the screen size gets smaller use this:

<div class="columns is-mobile is-multiline">
  <div class="column">column 1</div>
  <div class="column">column 2</div>
  <div class="column">column 3</div>
  <div class="column">column 4</div>
  <div class="column">column 5</div>
  <div class="column">column 6</div>
  <div class="column">column 7</div>
  <div class="column">column 8</div>
  <div class="column">column 9</div>
  <div class="column">column 10</div>
</div>

Check these links for more information about what you're trying to do. https://bulma.io/documentation/columns/responsiveness/

https://bulma.io/documentation/columns/options/