Bulma es un marco CSS gratuito y de código abierto que se utiliza para crear sitios web receptivos y hermosos. Está basado en flexbox . En este artículo, estaremos viendo la opción de multilínea en columnas en Bulma.
Entonces, de forma predeterminada, todas las columnas dentro de un contenedor de columnas estarán en la misma fila, pero podemos usar el modificador is-multiline en el contenedor de columnas para hacer que las columnas se ajusten en varias líneas.
Clases de opciones multilínea de Bulma:
- is-multiline: esta clase se usa en el contenedor de columnas para hacer que las columnas se ajusten en varias líneas.
Sintaxis:
<div class="columns is-multiline">
...
</div>
Ejemplo: El siguiente ejemplo ilustra el uso de la clase is-multiline en Bulma para hacer que las columnas se ajusten a varias líneas.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Multiline Option</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 Multiline Option</b>
<div class="container is-fluid">
<div class="columns is-multiline">
<div class="column is-half">
<div class="notification is-link">
<code>is-half</code>
</div>
</div>
<div class="column is-half">
<div class="notification is-link">
<code>is-half</code>
</div>
</div>
<div class="column is-one-quarter">
<div class="notification is-link">
<code>is-one-quarter</code>
</div>
</div>
<div class="column is-two-quarter">
<div class="notification is-link">
<code>is-two-quarter</code>
</div>
</div>
<div class="column">
<div class="notification is-link">
<code>Auto width</code>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Opción Multilínea Bulma
Referencia: https://bulma.io/documentation/columns/options/#multiline