Open In App

Bulma Narrow column

Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a free and open-source CSS framework based on flexbox. It comes with pre-styled components which makes it easier to develop beautiful and responsive websites as we don’t have to style everything from the ground up. In this article, we will be seeing the Narrow Column in Bulma.

So, if you want a column to only take the space it needs, you can append the is-narrow modifier on that column. The other columns will adjust themselves and fill up the remaining space.

Bulma Narrow Column Classes:

  • is-narrow: This class is used to make the column element only take the space it needs.

Syntax:

<div class="column is-narrow">
...
</div>

Example: The example below shows the use of the is-narrow modifier on a column.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Narrow Columns</title>
    <link rel='stylesheet'
          href=
  
    <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>


Output:

Bulma Narrow column

Bulma Narrow column

Reference: https://bulma.io/documentation/columns/sizes/#narrow-column



Last Updated : 12 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads