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 (e.g. line 625).
• 7 times for styling specific navbar related classes (e.g. 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