Bootstrap: Where is justify-self

Created on 21 Feb 2018  路  10Comments  路  Source: twbs/bootstrap

Where is justify-self utility? There are classes for justify-content, align-items, align-self, but no justify-self?

The only reason I can see is keeping css size to a minimum, is that the actual reason? I constantly find myself wanting to use justify-self but it doesn't exist in bootstrap 4.

Thanks

css v4

Most helpful comment

A decent way to accomplish what you're looking for is to set the margin to auto for the direction you want to justify (e.g., mt-auto, mr-auto, mb-auto, ml-auto).

All 10 comments

i dont think that value exists for that property
heres the spec https://www.w3.org/TR/css-flexbox-1/#justify-content-property

hm, perhaps you are right, support seems unclear:
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
https://www.w3.org/TR/css-align-3/#justify-self-property

it does work on latest ios safari, mac safari, chrome, and firefox (just tested)

A decent way to accomplish what you're looking for is to set the margin to auto for the direction you want to justify (e.g., mt-auto, mr-auto, mb-auto, ml-auto).

@719media i think this clarify's it all in that it can't be used for bootstrap > https://drafts.csswg.org/css-align-3/#justify-flex
justify-self is not supported within flexbox elements, so it won't really be of help in the bootstrap grid

@joshuafredrickson that will work for aligning it within the container and also affects it's siblings behavior, in a way
how i understand this property is that it is a way to align the element (mainly) within a column of a parent that has a css grid applied to it
i could be completely off here, but this is how i understand the property

I think it is absolutely ridiculous that this feature is not included. Using margins to accomplish something that is part of the flexbox spec is hacky.

@joniler https://drafts.csswg.org/css-align-3/#justify-flex clearly states that it does not aply to flexbox, so it is ridiculous to demand a feature that doesn't exist.
to me this issue can be closed as css doesn't support the property for flexbox elements.

@joniler ml-auto can do the trick

@gijsbotje Css grid is now supported on all modern browsers. Would you still not add the justify-self classes because they aren't useful for bootstrap as is? Even as utilities?

@Arturace you're right the support is good now, but bootstrap 4 was built before css grid and,as far as my knowledge goes, has no css grid code in it. so adding it to v4 would not be needed imo as the team is working on v5. so adding it to v5 could be a good thing.

Good justification for v4. I found #27141, I'll leave a comment there, asking for a consideration about v5.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ghost picture ghost  路  3Comments

knownasilya picture knownasilya  路  3Comments

alvarotrigo picture alvarotrigo  路  3Comments

leomao10 picture leomao10  路  3Comments

devfrey picture devfrey  路  3Comments