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 columnas
Referencia: https://bulma.io/documentation/columns/responsiveness/#mobile-columns