Bootstrap: Support for flexbox justify-content: space-evenly?

[rlue]

I'm relatively new to Bootstrap, so forgive me if I've missed something here:

The missing feature

According to the docs, columns can be horizontally aligned using classes that correspond to various flexbox justify-content values:

• .justify-content-start
• .justify-content-center
• .justify-content-end
• .justify-content-around
• .justify-content-between

and according to CSS-Tricks' _Complete Guide to Flexbox_, there is a sixth flexbox justify-content value:

• justify-content: space-evenly

This alignment option does not appear to be exposed through a Bootstrap CSS class.

Why I think it's missing

In my browser (Firefox 57), while viewing the section of the Bootstrap docs linked above, I used the Dev Tools to manually modify the class of one of the elements in the demo area:

The resulting layout was identical to what it would have been without any .justify-content-* class at all.

The space-evenly value is, however, supported in my browser: it works when I apply the CSS property-value pair manually:

Question

Both CSS and Flexbox have been around for the better part of a decade, so I can only assume this was a deliberate omission. Is there a reason space-evenly is not supported?

(Is it related to browser compatibility issues? According to MDN, space-evenly is still unsupported in both Edge and IE, as well as most mobile browsers, but then again, so are start and end.)

[andresgalante]

Hi @rlue thanks for been so clear on your proposal ❤️

Bootstrap 4 supports IE10+ that's why we don't include space-evenly.

We don't include start or end either, justify-content-start refers to flex-start and justify-content-end refers to flex-end.

[rlue]

If I'm understanding you correctly, that means the decision has been made on this one (so maybe I can look forward to it in v5?). I'm 100% fine with closing this issue, but I know a big project like this might have its own protocol for issue tracking, so I'll leave it up to you guys.

Thanks for the speedy response!

[andresgalante]

Hi @rlue in the meantime, if you those utility classes, you can have them on your project.

Thanks again for bringing this up. I'll close the issue.

[jonjohnjohnson]

I know this issue has been closed, but from what I understand, though space-evenly may not be natively supported for older browsers, like ie10, you can create the same layout effect by using pseudo elements at the beginning and end of the flex container. An example of this is shown in the following link.

https://stackoverflow.com/questions/45612955/space-evenly-justify-content-not-working-on-chrome-mobile/45620233#45620233

Just posting this to inform, if the trade off of hijacking pseudo elements on the flex container would be worth offering the justify-content-evenly modifier class?

[MartinSoderholm]

Maybe you can add these non supported styles in the scss so anyone who doesn't support ie can just import it? Now I have to add the following to my own style, but I guess there are more things excluded? space-evenly is now supported by Edge (all but ie).

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    .justify-content#{$infix}-evenly   { justify-content: space-evenly !important; }
  }
}

It would be great if I could just ...

@import "bootstrap/scss/not-supported-by-ie";