mirror of
https://github.com/twbs/bootstrap.git
synced 2025-12-28 05:33:57 +00:00
Adjust examples for correct information
This commit is contained in:
Roman
parent
8e66462b05
commit
da9c3ce7fd
@ -1,20 +1,16 @@
|
||||
---
|
||||
title: Justify self
|
||||
description: Use the justify-self utilities to control how an individual grid item is aligned along its inline (row) axis.
|
||||
description: Use the justify-self utilities to control how an individual element is aligned along its inline (horizontal) axis.
|
||||
toc: true
|
||||
added:
|
||||
version: "5.4"
|
||||
---
|
||||
|
||||
Change the alignment of an individual grid item with the [`justify-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) utilities. These utilities have no effect on flex items.
|
||||
|
||||
<Callout>
|
||||
**Note:** The `justify-self` property is primarily used with CSS Grid layout and has no effect on flexbox items. For flexbox alignment, use the [flex utilities]([[docsref:/utilities/flex]]) instead.
|
||||
</Callout>
|
||||
Use the [`justify-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) utilities to control the horizontal alignment of individual elements. These utilities work with both CSS Grid layouts and Bootstrap's flexbox-based grid system.
|
||||
|
||||
## Classes
|
||||
|
||||
Use `justify-self` utilities on grid items to individually align them along the inline (horizontal) axis. Choose from the same alignment values as `justify-content`: `start`, `end`, `center`, `stretch`, and more.
|
||||
The `justify-self` utilities align individual elements along the horizontal axis. Choose from the available alignment values: `start`, `end`, `center`, `stretch`, and `auto`.
|
||||
|
||||
<Example class="bd-example-grid" code={`<div class="row row-cols-3">
|
||||
<div class="col">
|
||||
@ -50,10 +46,6 @@ The classes are named using the format `justify-self-{value}` for `xs` and `just
|
||||
<li><code>.justify-self-end</code></li>
|
||||
<li><code>.justify-self-center</code></li>
|
||||
<li><code>.justify-self-stretch</code></li>
|
||||
<li><code>.justify-self-flex-start</code></li>
|
||||
<li><code>.justify-self-flex-end</code></li>
|
||||
<li><code>.justify-self-self-start</code></li>
|
||||
<li><code>.justify-self-self-end</code></li>
|
||||
</ul>
|
||||
|
||||
For `sm`, `md`, `lg`, `xl`, and `xxl`, the responsive classes follow the same pattern:
|
||||
@ -66,9 +58,11 @@ For `sm`, `md`, `lg`, `xl`, and `xxl`, the responsive classes follow the same pa
|
||||
<li><code>.justify-self-xxl-stretch</code></li>
|
||||
</ul>
|
||||
|
||||
## Advanced example
|
||||
## Usage with Bootstrap's grid system
|
||||
|
||||
Here's a more complex example showing different `justify-self` values in a grid layout:
|
||||
The `justify-self` utilities work seamlessly with Bootstrap's flexbox-based grid system. They provide granular control over individual elements within columns, complementing the existing column classes and `justify-content` utilities.
|
||||
|
||||
While `justify-content` affects the positioning of columns within the row, `justify-self` allows each element within a column to have its own horizontal alignment.
|
||||
|
||||
<Example class="bd-example-grid" code={`<div class="row row-cols-3">
|
||||
<div class="col p-0 border">
|
||||
@ -86,22 +80,133 @@ Here's a more complex example showing different `justify-self` values in a grid
|
||||
justify-self-end
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-cols-3">
|
||||
<div class="col p-0 border">
|
||||
<div class="p-3 bg-info text-white justify-self-start">
|
||||
justify-self-start
|
||||
</div>
|
||||
</div>
|
||||
<div class="col p-0 border">
|
||||
<div class="p-3 bg-warning text-dark justify-self-stretch">
|
||||
justify-self-stretch
|
||||
</div>
|
||||
</div>
|
||||
<div class="col p-0 border">
|
||||
<div class="p-3 bg-info text-white justify-self-end">
|
||||
<div class="p-3 bg-danger text-white justify-self-end">
|
||||
justify-self-end
|
||||
</div>
|
||||
</div>
|
||||
<div class="col p-0 border">
|
||||
<div class="p-3 bg-dark text-white justify-self-center">
|
||||
justify-self-center
|
||||
</div>`} />
|
||||
|
||||
## Practical examples
|
||||
|
||||
Here are some practical examples showing how `justify-self` can be used to create flexible layouts:
|
||||
|
||||
<Example class="bd-example-grid" code={`<div class="row justify-content-center">
|
||||
<div class="col-8 p-0 border">
|
||||
<div class="p-3 bg-info text-white">
|
||||
Full width content in centered column
|
||||
</div>
|
||||
</div>
|
||||
</div>`} />
|
||||
<div class="col-8 p-0 border">
|
||||
<div class="p-3 bg-warning text-dark justify-self-start">
|
||||
justify-self-start: Aligns to left edge of column
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 p-0 border">
|
||||
<div class="p-3 bg-success text-white justify-self-end">
|
||||
justify-self-end: Aligns to right edge of column
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 p-0 border">
|
||||
<div class="p-3 bg-primary text-white">
|
||||
Normal content fills column width
|
||||
</div>
|
||||
<div class="p-3 bg-secondary text-white justify-self-center" style="width: 60%;">
|
||||
justify-self-center: Centers narrower content within column
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 p-0 border">
|
||||
<div class="p-3 bg-danger text-white justify-self-end" style="width: 70%;">
|
||||
justify-self-end: Aligns narrower content to column's end
|
||||
</div>
|
||||
<div class="p-3 bg-dark text-white">
|
||||
Back to full width
|
||||
</div>
|
||||
</div>
|
||||
</div>`} />
|
||||
|
||||
## Usage with CSS Grid
|
||||
|
||||
The `justify-self` utilities are also valuable when working with CSS Grid layouts, where they provide individual control over grid items within their cells:
|
||||
|
||||
<Example class="bd-example-grid" code={`<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1rem; border: 2px solid #dee2e6;">
|
||||
<div class="p-2 bg-primary text-white text-center">Default</div>
|
||||
<div class="p-2 bg-primary text-white text-center">Default</div>
|
||||
<div class="p-2 bg-primary text-white text-center">Default</div>
|
||||
<div class="p-2 bg-primary text-white text-center">Default</div>
|
||||
|
||||
<div class="p-2 bg-success text-white justify-self-start">Start</div>
|
||||
<div class="p-2 bg-info text-white justify-self-center">Center</div>
|
||||
<div class="p-2 bg-warning text-dark justify-self-end">End</div>
|
||||
<div class="p-2 bg-danger text-white justify-self-stretch">Stretch</div>
|
||||
|
||||
<div class="p-2 bg-secondary text-white justify-self-end">End</div>
|
||||
<div class="p-2 bg-success text-white justify-self-start">Start</div>
|
||||
<div class="p-2 bg-info text-white justify-self-stretch">Stretch</div>
|
||||
<div class="p-2 bg-warning text-dark justify-self-center">Center</div>
|
||||
</div>`} />
|
||||
|
||||
In CSS Grid, each item can be individually positioned within its grid cell using `justify-self`, providing precise control over layout that complements the grid container's overall alignment settings.
|
||||
|
||||
## Alternative approaches
|
||||
|
||||
While `justify-self` provides convenient and direct control, similar results can often be achieved using traditional Bootstrap utilities:
|
||||
|
||||
<Example class="bd-example-grid" code={`<div class="row justify-content-center">
|
||||
<div class="col-8 p-0 border">
|
||||
<div class="p-3 bg-info text-white">
|
||||
Full width content in centered column
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 p-0 border d-flex">
|
||||
<div class="p-3 bg-warning text-dark">
|
||||
Using d-flex: Aligns to left edge of column
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 p-0 border d-flex justify-content-end">
|
||||
<div class="p-3 bg-success text-white">
|
||||
Using justify-content-end: Aligns to right edge of column
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 p-0 border">
|
||||
<div class="p-3 bg-primary text-white">
|
||||
Normal content fills column width
|
||||
</div>
|
||||
<div class="p-3 bg-secondary text-white mx-auto" style="width: 60%;">
|
||||
Using mx-auto: Centers narrower content within column
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 p-0 border">
|
||||
<div class="p-3 bg-danger text-white ms-auto" style="width: 70%;">
|
||||
Using ms-auto: Aligns narrower content to column's end
|
||||
</div>
|
||||
<div class="p-3 bg-dark text-white">
|
||||
Back to full width
|
||||
</div>
|
||||
</div>
|
||||
</div>`} />
|
||||
|
||||
**Comparison of approaches:**
|
||||
- **justify-self**: Direct control, cleaner markup, works consistently across different layout contexts
|
||||
- **Traditional utilities**: May require additional `d-flex` classes or margin utilities.
|
||||
|
||||
Choose the approach that best fits your project's needs.
|
||||
|
||||
## CSS
|
||||
|
||||
@ -109,4 +214,4 @@ Here's a more complex example showing different `justify-self` values in a grid
|
||||
|
||||
Justify self utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
|
||||
|
||||
<ScssDocs name="utils-justify-self" file="scss/_utilities.scss" />
|
||||
<ScssDocs name="utils-justify-self" file="scss/_utilities.scss" />
|
||||
Loading…
Reference in New Issue
Block a user