Justify Self
Utilities for controlling how a grid item is aligned along its inline axis.
Classes
| Class | Output |
|---|---|
| .d-js-center | justify-self: center !important; |
| .d-js-end | justify-self: end !important; |
| .d-js-start | justify-self: start !important; |
| .d-js-left | justify-self: left !important; |
| .d-js-right | justify-self: right !important; |
| .d-js-baseline | justify-self: baseline !important; |
| .d-js-first-baseline | justify-self: first-baseline !important; |
| .d-js-last-baseline | justify-self: last-baseline !important; |
| .d-js-stretch | justify-self: stretch !important; |
| .d-js-safe | justify-self: safe !important; |
| .d-js-unsafe | justify-self: unsafe !important; |
| .d-js-normal | justify-self: normal !important; |
| .d-js-legacy | justify-self: legacy !important; |
| .d-js-auto | justify-self: auto !important; |
| .d-js-unset | justify-self: unset !important; |
Auto
Use d-js-auto to justify an item automatically along its inline axis. This is the default value.
<div class="d-d-grid d-g-cols3">
<div class="d-js-auto">1</div>
<div>2</div>
<div>3</div>
</div>
Start
Use d-js-start to justify an item to the start of its inline axis.
<div class="d-d-grid d-g-cols3">
<div class="d-js-start">1</div>
<div>2</div>
<div>3</div>
</div>
End
Use d-js-end to justify an item to the end of its inline axis.
<div class="d-d-grid d-g-cols3">
<div class="d-js-end">1</div>
<div>2</div>
<div>3</div>
</div>
Center
Use d-js-center to justify an item to the center of its inline axis.
<div class="d-d-grid d-g-cols3">
<div class="d-js-center">1</div>
<div>2</div>
<div>3</div>
</div>