Justify Self
Controls the alignment of a single grid element relative to its inline axis.
| Class | Properties |
|---|---|
| js-auto | justify-self: auto; |
| js-n | justify-self: normal; |
| js-stretch | justify-self: stretch; |
| js-c | justify-self: center; |
| js-s | justify-self: start; |
| js-e | justify-self: end; |
| js-fs | justify-self: flex-start; |
| js-fe | justify-self: flex-end; |
| js-l | justify-self: left; |
| js-r | justify-self: right; |
Using breakpoints
Using responsive breakpoints like sm:js-*, md:js-*, lg:js-*, and xxl:js-* allows targeting specific utilities in different viewports.
<div class="js-l md:js-r ..."></div>Using variants
Using :hover variants such as h:js-* allows you to override elements and change their values when hovering over them.
<div class="js-l h:js-r ..."></div>