Bulma es un marco CSS gratuito y de código abierto que se puede utilizar como alternativa a Bootstrap . Viene con componentes preconstruidos como botones e íconos. En este artículo, veremos cómo usar las columnas de Bulma en dispositivos móviles.
De forma predeterminada, las columnas en Bulma están activadas en tabletas y tamaños de pantalla superiores. En los dispositivos móviles, las columnas se apilan una encima de la otra, pero si desea habilitar columnas en dispositivos móviles, la clase CSS is-mobile se puede usar en el contenedor de columnas. Si desea activar columnas solo en escritorios y superiores, la clase CSS is-desktop se puede usar en el contenedor de columnas.
Bulma Columnas Clases CSS:
- is-mobile: esta clase se usa en el contenedor de columnas cuando desea deshabilitar el apilamiento de columnas en dispositivos móviles.
- is-desktop: esta clase se usa en el contenedor de columnas cuando desea habilitar columnas solo en escritorios y superiores.
Sintaxis:
<div class="columns Columns-CSS-Classes"> ... </div>
Ejemplo: El siguiente ejemplo muestra el uso de las clases Columnas CSS en Bulma.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Mobile Columns</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> <style> .container{ margin-top: 25px; } </style> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> <b class="is-size-4">Bulma Mobile Columns</b> <div class="container"> <p><b>Default Columns:</b></p> <div class="columns"> <div class="column"> <div class="notification is-link"> 1 </div> </div> <div class="column"> <div class="notification is-link"> 2 </div> </div> <div class="column"> <div class="notification is-link"> 3 </div> </div> <div class="column"> <div class="notification is-link"> 4 </div> </div> </div> <p><b>Columns with <i>is-mobile</i> CSS class:</b></p> <div class="columns is-mobile"> <div class="column"> <div class="notification is-link"> 1 </div> </div> <div class="column"> <div class="notification is-link"> 2 </div> </div> <div class="column"> <div class="notification is-link"> 3 </div> </div> <div class="column"> <div class="notification is-link"> 4 </div> </div> </div> <p><b>Columns with <i>is-desktop</i> CSS class:</b></p> <div class="columns is-desktop"> <div class="column"> <div class="notification is-link"> 1 </div> </div> <div class="column"> <div class="notification is-link"> 2 </div> </div> <div class="column"> <div class="notification is-link"> 3 </div> </div> <div class="column"> <div class="notification is-link"> 4 </div> </div> </div> </div> </body> </html>
Producción:
![Bulma Mobile columns](https://media.geeksforgeeks.org/wp-content/uploads/20220126190619/bulmamobilecolumns.gif)
Bulma Mobile columnas
Referencia: https://bulma.io/documentation/columns/responsiveness/#mobile-columns