Search code examples
cssbulma

Can put a bulma columns inside a level-item?

I am trying to put a columns inside a level-item, but it seems to shrink to a small width. Is there a way to make the columns occupy the full width of the level-item?

Below is the code:

<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>
  <div class="level">
    <div class="level-item">
      <div class="columns">
        <div class="column is-1">
          hi
        </div>
        <div class="column is-2">
          hi2
        </div>
      </div>
    </div>
  </div>
  </div>
</body>

</html>
Solution

  • You can add helper class is-flex-grow-1 to columns

         <div class="level">
        <div class="level-item">
          <div class="columns is-flex-grow-1">
            <div class="column">
              hi
            </div>
            <div class="column">
              hi2
            </div>
          </div>
        </div>
      </div>