How do I set CSS3 flex-basis property using Bootstrap Flex?

Question

Using CSS3 I can individually set the flex properties like so

.someclass {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;   
}

Using Bootstrap (version >= 4.1) flex it seems I can only set flex-grow-X and flex-shrink-X , like so

<div class="someclass flex-grow-1 flex-shrink-1">...</div>

Is there are way to set the flex-basis using bootstrap 4.1?

Answer 1

Looking at the source code of Bootstrap v4.1, there are no utility classes included that specifically target the flex-basis value.

Searching through the file , there are only 12 occurances of the word flex-basis :

• 5 times to set flex-basis to 0 for some of the col-* classes (eg line 625 ).
• 7 times for styling specific navbar related classes (eg line 4268 ).

This also seem to remain the case in the latest versions of Bootstrap at the time of this writing:

• Bootstrap v4.5.3
• Bootstrap v5.0.0-alpha3

Answer 2

You do it just like you did. No library provides every functionality imaginable, especially when there's a variable that would make implementation very complex (such as an arbitrary size).

I do suggest semantic naming convention. Something like this aligns with Bootstrap's model and best practice in general:

.flex-basis-30 {
  flex-basis: 30%;
}

.flex-basis-70 {
  flex-basis: 70%;
}

I've built many Bootstrap sites over the last decade and a half, and every single one has had a custom stylesheet for a few things. Yours will too.