Bulma es un framework CSS gratuito y de código abierto basado en flexbox . Viene con componentes prediseñados que facilitan el desarrollo de sitios web hermosos y receptivos, ya que no tenemos que diseñar todo desde cero. En este artículo, veremos la Columna Estrecha en Bulma.
Por lo tanto, si desea que una columna solo ocupe el espacio que necesita, puede agregar el modificador is-narrow en esa columna. Las otras columnas se ajustarán y llenarán el espacio restante.
Clases de columna estrecha de Bulma:
- is-narrow: esta clase se usa para hacer que el elemento de columna solo ocupe el espacio que necesita.
Sintaxis:
<div class="column is-narrow"> ... </div>
Ejemplo: El siguiente ejemplo muestra el uso del modificador is-narrow en una columna.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Narrow Columns</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> <style> </style> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> <b class="is-size-4">Bulma Narrow Columns</b> <div class="container is-fluid mt-6"> <div class="columns"> <div class="column is-narrow"> <div class="notification is-link"> Column with <code>is-narrow</code> modifier. It will take the width it needs </div> </div> <div class="column"> <div class="notification is-link"> Normal Column. It will adjust itself to fill the row </div> </div> </div> <div class="columns"> <div class="column"> <div class="notification is-danger"> Normal Column. It will adjust itself to fill the row </div> </div> <div class="column is-narrow"> <div class="notification is-danger"> Column with <code>is-narrow</code> modifier. It will take the width it needs </div> </div> </div> </div> </body> </html>
Producción:
Bulma columna estrecha
Referencia: https://bulma.io/documentation/columns/sizes/#narrow-column