Bulma: Custom column width for specific column(s) without breaking flexbox?

Created on 5 Nov 2018  路  1Comment  路  Source: jgthms/bulma

This is about Bulma.
This is about the Bulma CSS framework

Description

Custom column width for specific column(s) without breaking flexbox?
Is this possible?

I would want to have 1 column to be for example a fixed with of 20px, then the second column should be 100% width.

Or
I would like to have 3 columns with the 1st and the 3rd to be 20px but the middle fill-out.

Is there any such way to accomplish this?
Without breaking the layout flexbox and responsiveness?

```

i would like this column to be exactly 20px for example
i would want this column to be maximum width
picture voordev

Most helpful comment

If you want specific widths, you will have to create your own classes to have that specific value.

https://codepen.io/jgthms/pen/dQPqPy

<section class="section">
  <div class='columns'>
    <div class='is-20px'>

    </div>
    <div class='column is-rest'>
      i would want this column to be maximum width
    </div>
  </div>
</section>

.is-20px {
  background: tomato;
  width: 20px;
}

.is-rest {
  background: lavender;
}

image

picture jgthms on 5 Nov 2018
👍3

>All comments

If you want specific widths, you will have to create your own classes to have that specific value.

https://codepen.io/jgthms/pen/dQPqPy

<section class="section">
  <div class='columns'>
    <div class='is-20px'>

    </div>
    <div class='column is-rest'>
      i would want this column to be maximum width
    </div>
  </div>
</section>

.is-20px {
  background: tomato;
  width: 20px;
}

.is-rest {
  background: lavender;
}

image

jgthms picture jgthms on 5 Nov 2018
👍3
Was this page helpful?
0 / 5 - 0 ratings

Related issues

JenCant picture JenCant  路  3Comments
Yard8 picture Yard8  路  3Comments
Qard picture Qard  路  3Comments
dotMastaz picture dotMastaz  路  3Comments
swamikevala picture swamikevala  路  3Comments