Simple columns system
Bulma is mostly famous for its straightforward columns architecture:
<divclass="columns"><divclass="column"><!-- First column --></div><divclass="column"><!-- Second column --></div></div>
That’s it! It only takes two classes (columns for the container, column for the child items) to have a set of responsive columns. You don’t have to specify any dimensions: both columns will each take 50% of the width automatically.
If you want a third column, just add another column:
<divclass="columns"><divclass="column"><!-- First column --></div><divclass="column"><!-- Second column --></div><divclass="column"><!-- Third column --></div></div>
Each column will now take up 33% of the width. No additional change is required! Continue this and put as many columns in as your want. Bulma will automatically adjust the size.