Menu
Given the following html :
<div class="columns">
<div class="column">Always here</div>
<div class="column">Hidden on mobile</div>
<div class="column">Always here</div>
</div>
How to make that the middle column get hidden on mobile ?
Note: I found no help on this "hide" feature on the official doc.
317
In Bulma, the flexbox properties are used as helpers. The flex-direction property allows the user to set the direction of items in a flex container with direction utilities, like row, row-reverse, column, column-reverse. Sometimes, the horizontal classes can be omitted as the default direction in the browser is row.
Bulma provides a bit more flexibility for customization compared to Bootstrap. in addition, its modular structure provides more control over individual projects. Unlike Bootstrap, Bulma permits users to import only the modules required for desired features, omitting any that aren't necessary.
Every element in Bulma is mobile-first and optimizes for vertical reading, so by default on mobile: columns are stacked vertically. the level component will show its children stacked vertically.
is-hidden-mobile hides on mobile and is-hidden-touch hides on both mobile and tablet. The hide feature is on the official documentation under responsive helpers:
https://bulma.io/documentation/helpers/visibility-helpers/#hide
112
is-hidden-mobile can do the trick
<div class="columns">
<div class="column">Always here</div>
<div class="column is-hidden-mobile">Hidden on mobile</div>
<div class="column">Always here</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
