Merge da9c3ce7fd into 4449c7465e

dist/css/bootstrap-utilities.css

@@ -1149,6 +1149,42 @@
   justify-content: space-evenly !important;
 }
 
+.justify-self-auto {
+  justify-self: auto !important;
+}
+
+.justify-self-stretch {
+  justify-self: stretch !important;
+}
+
+.justify-self-center {
+  justify-self: center !important;
+}
+
+.justify-self-start {
+  justify-self: start !important;
+}
+
+.justify-self-end {
+  justify-self: end !important;
+}
+
+.justify-self-flex-start {
+  justify-self: flex-start !important;
+}
+
+.justify-self-flex-end {
+  justify-self: flex-end !important;
+}
+
+.justify-self-self-start {
+  justify-self: self-start !important;
+}
+
+.justify-self-self-end {
+  justify-self: self-end !important;
+}
+
 .align-items-start {
   align-items: flex-start !important;
 }
@@ -2665,6 +2701,33 @@
   .justify-content-sm-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-sm-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-sm-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-sm-center {
+    justify-self: center !important;
+  }
+  .justify-self-sm-start {
+    justify-self: start !important;
+  }
+  .justify-self-sm-end {
+    justify-self: end !important;
+  }
+  .justify-self-sm-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-sm-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-sm-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-sm-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-sm-start {
     align-items: flex-start !important;
   }
@@ -3226,6 +3289,33 @@
   .justify-content-md-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-md-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-md-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-md-center {
+    justify-self: center !important;
+  }
+  .justify-self-md-start {
+    justify-self: start !important;
+  }
+  .justify-self-md-end {
+    justify-self: end !important;
+  }
+  .justify-self-md-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-md-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-md-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-md-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-md-start {
     align-items: flex-start !important;
   }
@@ -3787,6 +3877,33 @@
   .justify-content-lg-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-lg-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-lg-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-lg-center {
+    justify-self: center !important;
+  }
+  .justify-self-lg-start {
+    justify-self: start !important;
+  }
+  .justify-self-lg-end {
+    justify-self: end !important;
+  }
+  .justify-self-lg-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-lg-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-lg-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-lg-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-lg-start {
     align-items: flex-start !important;
   }
@@ -4348,6 +4465,33 @@
   .justify-content-xl-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-xl-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-xl-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-xl-center {
+    justify-self: center !important;
+  }
+  .justify-self-xl-start {
+    justify-self: start !important;
+  }
+  .justify-self-xl-end {
+    justify-self: end !important;
+  }
+  .justify-self-xl-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-xl-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-xl-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-xl-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-xl-start {
     align-items: flex-start !important;
   }
@@ -4909,6 +5053,33 @@
   .justify-content-xxl-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-xxl-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-xxl-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-xxl-center {
+    justify-self: center !important;
+  }
+  .justify-self-xxl-start {
+    justify-self: start !important;
+  }
+  .justify-self-xxl-end {
+    justify-self: end !important;
+  }
+  .justify-self-xxl-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-xxl-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-xxl-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-xxl-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-xxl-start {
     align-items: flex-start !important;
   }

dist/css/bootstrap-utilities.rtl.css

@@ -1149,6 +1149,42 @@
   justify-content: space-evenly !important;
 }
 
+.justify-self-auto {
+  justify-self: auto !important;
+}
+
+.justify-self-stretch {
+  justify-self: stretch !important;
+}
+
+.justify-self-center {
+  justify-self: center !important;
+}
+
+.justify-self-start {
+  justify-self: start !important;
+}
+
+.justify-self-end {
+  justify-self: end !important;
+}
+
+.justify-self-flex-start {
+  justify-self: flex-start !important;
+}
+
+.justify-self-flex-end {
+  justify-self: flex-end !important;
+}
+
+.justify-self-self-start {
+  justify-self: self-start !important;
+}
+
+.justify-self-self-end {
+  justify-self: self-end !important;
+}
+
 .align-items-start {
   align-items: flex-start !important;
 }
@@ -2657,6 +2693,33 @@
   .justify-content-sm-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-sm-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-sm-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-sm-center {
+    justify-self: center !important;
+  }
+  .justify-self-sm-start {
+    justify-self: start !important;
+  }
+  .justify-self-sm-end {
+    justify-self: end !important;
+  }
+  .justify-self-sm-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-sm-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-sm-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-sm-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-sm-start {
     align-items: flex-start !important;
   }
@@ -3218,6 +3281,33 @@
   .justify-content-md-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-md-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-md-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-md-center {
+    justify-self: center !important;
+  }
+  .justify-self-md-start {
+    justify-self: start !important;
+  }
+  .justify-self-md-end {
+    justify-self: end !important;
+  }
+  .justify-self-md-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-md-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-md-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-md-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-md-start {
     align-items: flex-start !important;
   }
@@ -3779,6 +3869,33 @@
   .justify-content-lg-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-lg-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-lg-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-lg-center {
+    justify-self: center !important;
+  }
+  .justify-self-lg-start {
+    justify-self: start !important;
+  }
+  .justify-self-lg-end {
+    justify-self: end !important;
+  }
+  .justify-self-lg-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-lg-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-lg-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-lg-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-lg-start {
     align-items: flex-start !important;
   }
@@ -4340,6 +4457,33 @@
   .justify-content-xl-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-xl-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-xl-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-xl-center {
+    justify-self: center !important;
+  }
+  .justify-self-xl-start {
+    justify-self: start !important;
+  }
+  .justify-self-xl-end {
+    justify-self: end !important;
+  }
+  .justify-self-xl-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-xl-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-xl-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-xl-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-xl-start {
     align-items: flex-start !important;
   }
@@ -4901,6 +5045,33 @@
   .justify-content-xxl-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-xxl-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-xxl-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-xxl-center {
+    justify-self: center !important;
+  }
+  .justify-self-xxl-start {
+    justify-self: start !important;
+  }
+  .justify-self-xxl-end {
+    justify-self: end !important;
+  }
+  .justify-self-xxl-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-xxl-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-xxl-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-xxl-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-xxl-start {
     align-items: flex-start !important;
   }

dist/css/bootstrap.css

@@ -7791,6 +7791,42 @@ textarea.form-control-lg {
   justify-content: space-evenly !important;
 }
 
+.justify-self-auto {
+  justify-self: auto !important;
+}
+
+.justify-self-stretch {
+  justify-self: stretch !important;
+}
+
+.justify-self-center {
+  justify-self: center !important;
+}
+
+.justify-self-start {
+  justify-self: start !important;
+}
+
+.justify-self-end {
+  justify-self: end !important;
+}
+
+.justify-self-flex-start {
+  justify-self: flex-start !important;
+}
+
+.justify-self-flex-end {
+  justify-self: flex-end !important;
+}
+
+.justify-self-self-start {
+  justify-self: self-start !important;
+}
+
+.justify-self-self-end {
+  justify-self: self-end !important;
+}
+
 .align-items-start {
   align-items: flex-start !important;
 }
@@ -9307,6 +9343,33 @@ textarea.form-control-lg {
   .justify-content-sm-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-sm-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-sm-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-sm-center {
+    justify-self: center !important;
+  }
+  .justify-self-sm-start {
+    justify-self: start !important;
+  }
+  .justify-self-sm-end {
+    justify-self: end !important;
+  }
+  .justify-self-sm-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-sm-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-sm-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-sm-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-sm-start {
     align-items: flex-start !important;
   }
@@ -9868,6 +9931,33 @@ textarea.form-control-lg {
   .justify-content-md-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-md-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-md-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-md-center {
+    justify-self: center !important;
+  }
+  .justify-self-md-start {
+    justify-self: start !important;
+  }
+  .justify-self-md-end {
+    justify-self: end !important;
+  }
+  .justify-self-md-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-md-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-md-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-md-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-md-start {
     align-items: flex-start !important;
   }
@@ -10429,6 +10519,33 @@ textarea.form-control-lg {
   .justify-content-lg-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-lg-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-lg-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-lg-center {
+    justify-self: center !important;
+  }
+  .justify-self-lg-start {
+    justify-self: start !important;
+  }
+  .justify-self-lg-end {
+    justify-self: end !important;
+  }
+  .justify-self-lg-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-lg-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-lg-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-lg-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-lg-start {
     align-items: flex-start !important;
   }
@@ -10990,6 +11107,33 @@ textarea.form-control-lg {
   .justify-content-xl-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-xl-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-xl-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-xl-center {
+    justify-self: center !important;
+  }
+  .justify-self-xl-start {
+    justify-self: start !important;
+  }
+  .justify-self-xl-end {
+    justify-self: end !important;
+  }
+  .justify-self-xl-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-xl-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-xl-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-xl-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-xl-start {
     align-items: flex-start !important;
   }
@@ -11551,6 +11695,33 @@ textarea.form-control-lg {
   .justify-content-xxl-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-xxl-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-xxl-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-xxl-center {
+    justify-self: center !important;
+  }
+  .justify-self-xxl-start {
+    justify-self: start !important;
+  }
+  .justify-self-xxl-end {
+    justify-self: end !important;
+  }
+  .justify-self-xxl-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-xxl-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-xxl-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-xxl-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-xxl-start {
     align-items: flex-start !important;
   }

dist/css/bootstrap.rtl.css

@@ -7773,6 +7773,42 @@ textarea.form-control-lg {
   justify-content: space-evenly !important;
 }
 
+.justify-self-auto {
+  justify-self: auto !important;
+}
+
+.justify-self-stretch {
+  justify-self: stretch !important;
+}
+
+.justify-self-center {
+  justify-self: center !important;
+}
+
+.justify-self-start {
+  justify-self: start !important;
+}
+
+.justify-self-end {
+  justify-self: end !important;
+}
+
+.justify-self-flex-start {
+  justify-self: flex-start !important;
+}
+
+.justify-self-flex-end {
+  justify-self: flex-end !important;
+}
+
+.justify-self-self-start {
+  justify-self: self-start !important;
+}
+
+.justify-self-self-end {
+  justify-self: self-end !important;
+}
+
 .align-items-start {
   align-items: flex-start !important;
 }
@@ -9281,6 +9317,33 @@ textarea.form-control-lg {
   .justify-content-sm-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-sm-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-sm-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-sm-center {
+    justify-self: center !important;
+  }
+  .justify-self-sm-start {
+    justify-self: start !important;
+  }
+  .justify-self-sm-end {
+    justify-self: end !important;
+  }
+  .justify-self-sm-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-sm-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-sm-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-sm-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-sm-start {
     align-items: flex-start !important;
   }
@@ -9842,6 +9905,33 @@ textarea.form-control-lg {
   .justify-content-md-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-md-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-md-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-md-center {
+    justify-self: center !important;
+  }
+  .justify-self-md-start {
+    justify-self: start !important;
+  }
+  .justify-self-md-end {
+    justify-self: end !important;
+  }
+  .justify-self-md-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-md-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-md-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-md-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-md-start {
     align-items: flex-start !important;
   }
@@ -10403,6 +10493,33 @@ textarea.form-control-lg {
   .justify-content-lg-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-lg-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-lg-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-lg-center {
+    justify-self: center !important;
+  }
+  .justify-self-lg-start {
+    justify-self: start !important;
+  }
+  .justify-self-lg-end {
+    justify-self: end !important;
+  }
+  .justify-self-lg-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-lg-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-lg-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-lg-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-lg-start {
     align-items: flex-start !important;
   }
@@ -10964,6 +11081,33 @@ textarea.form-control-lg {
   .justify-content-xl-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-xl-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-xl-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-xl-center {
+    justify-self: center !important;
+  }
+  .justify-self-xl-start {
+    justify-self: start !important;
+  }
+  .justify-self-xl-end {
+    justify-self: end !important;
+  }
+  .justify-self-xl-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-xl-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-xl-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-xl-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-xl-start {
     align-items: flex-start !important;
   }
@@ -11525,6 +11669,33 @@ textarea.form-control-lg {
   .justify-content-xxl-evenly {
     justify-content: space-evenly !important;
   }
+  .justify-self-xxl-auto {
+    justify-self: auto !important;
+  }
+  .justify-self-xxl-stretch {
+    justify-self: stretch !important;
+  }
+  .justify-self-xxl-center {
+    justify-self: center !important;
+  }
+  .justify-self-xxl-start {
+    justify-self: start !important;
+  }
+  .justify-self-xxl-end {
+    justify-self: end !important;
+  }
+  .justify-self-xxl-flex-start {
+    justify-self: flex-start !important;
+  }
+  .justify-self-xxl-flex-end {
+    justify-self: flex-end !important;
+  }
+  .justify-self-xxl-self-start {
+    justify-self: self-start !important;
+  }
+  .justify-self-xxl-self-end {
+    justify-self: self-end !important;
+  }
   .align-items-xxl-start {
     align-items: flex-start !important;
   }

scss/_utilities.scss

@@ -297,6 +297,23 @@ $utilities: map-merge(
         evenly: space-evenly,
       )
     ),
+    // scss-docs-start utils-justify-self
+    "justify-self": (
+      property: justify-self,
+      responsive: true,
+      values: (
+        auto: auto,
+        stretch: stretch,
+        center: center,
+        start: start,
+        end: end,
+        flex-start: flex-start,
+        flex-end: flex-end,
+        self-start: self-start,
+        self-end: self-end,
+      )
+    ),
+    // scss-docs-end utils-justify-self
     "align-items": (
       responsive: true,
       property: align-items,

site/data/sidebar.yml

@@ -126,6 +126,7 @@
     - title: Flex
     - title: Float
     - title: Interactions
+    - title: Justify self
     - title: Link
     - title: Object fit
     - title: Opacity

site/src/content/docs/utilities/justify-self.mdx

@@ -0,0 +1,217 @@
+---
+title: Justify self
+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"
+---
+
+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
+
+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">
+      <div class="p-2 bg-light border justify-self-start">justify-self-start</div>
+    </div>
+    <div class="col">
+      <div class="p-2 bg-light border justify-self-center">justify-self-center</div>
+    </div>
+    <div class="col">
+      <div class="p-2 bg-light border justify-self-end">justify-self-end</div>
+    </div>
+</div>`
+} />
+
+<Example class="bd-example-grid" code={`<div class="row row-cols-2">
+    <div class="col">
+      <div class="p-2 bg-light border justify-self-stretch">justify-self-stretch</div>
+    </div>
+    <div class="col">
+      <div class="p-2 bg-light border justify-self-auto">justify-self-auto</div>
+    </div>
+</div>`} />
+
+## Responsive
+
+All `justify-self` utilities that apply to all breakpoints, from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+
+The classes are named using the format `justify-self-{value}` for `xs` and `justify-self-{breakpoint}-{value}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
+
+<ul>
+  <li><code>.justify-self-auto</code></li>
+  <li><code>.justify-self-start</code></li>
+  <li><code>.justify-self-end</code></li>
+  <li><code>.justify-self-center</code></li>
+  <li><code>.justify-self-stretch</code></li>
+</ul>
+
+For `sm`, `md`, `lg`, `xl`, and `xxl`, the responsive classes follow the same pattern:
+
+<ul>
+  <li><code>.justify-self-sm-auto</code></li>
+  <li><code>.justify-self-md-start</code></li>
+  <li><code>.justify-self-lg-center</code></li>
+  <li><code>.justify-self-xl-end</code></li>
+  <li><code>.justify-self-xxl-stretch</code></li>
+</ul>
+
+## Usage with Bootstrap's grid system
+
+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">
+      <div class="p-3 bg-primary text-white justify-self-start">
+        justify-self-start
+      </div>
+    </div>
+    <div class="col p-0 border">
+      <div class="p-3 bg-secondary text-white justify-self-center">
+        justify-self-center
+      </div>
+    </div>
+    <div class="col p-0 border">
+      <div class="p-3 bg-success text-white justify-self-end">
+        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-danger text-white justify-self-end">
+        justify-self-end
+      </div>
+    </div>
+</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 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
+
+### Sass utilities API
+
+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" />