Remove .list-inline in favour of the grid and remove list styles from the grid by default

MartijnCuppens · MartijnCuppens · commit ade1538a9da7 · 2019-11-16T11:31:02.000+01:00
diff --git a/scss/_grid.scss b/scss/_grid.scss
@@ -44,6 +44,7 @@
 @if $enable-grid-classes {
   .row {
     @include make-row();
+    @include list-unstyled(); // Remove padding and list styles for `ul`s
 
     > * {
       @include make-col-ready();
diff --git a/scss/_type.scss b/scss/_type.scss
@@ -72,19 +72,6 @@
   @include list-unstyled();
 }
 
-// Inline turns list items into inline-block
-.list-inline {
-  @include list-unstyled();
-}
-.list-inline-item {
-  display: inline-block;
-
-  &:not(:last-child) {
-    margin-right: $list-inline-padding;
-  }
-}
-
-
 //
 // Misc
 //
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -474,8 +474,6 @@ $dt-font-weight:              $font-weight-bold !default;
 
 $nested-kbd-font-weight:      $font-weight-bold !default;
 
-$list-inline-padding:         .5rem !default;
-
 $mark-bg:                     #fcf8e3 !default;
 
 $hr-margin-y:                 $spacer !default;
diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
@@ -21,6 +21,7 @@ html {
 @import "mixins/breakpoints";
 @import "mixins/grid-framework";
 @import "mixins/grid";
+@import "mixins/lists";
 @import "mixins/utilities";
 
 @import "grid";
diff --git a/site/content/docs/4.3/content/typography.md b/site/content/docs/4.3/content/typography.md
@@ -227,15 +227,15 @@ Remove the default `list-style` and left margin on list items (immediate childre
 </ul>
 {{< /example >}}
 
-### Inline
+### Inline lists
 
-Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`.
+Use the grid with (optionally with [gutter classes]({{< docsref "/layout/grid#gutters" >}}) to change spacing between the list items) to create an inline list. The list bullets are removed by default from `.row`.
 
 {{< example >}}
-<ul class="list-inline">
-  <li class="list-inline-item">Lorem ipsum</li>
-  <li class="list-inline-item">Phasellus iaculis</li>
-  <li class="list-inline-item">Nulla volutpat</li>
+<ul class="row gx-2">
+  <li class="col-auto">Lorem ipsum</li>
+  <li class="col-auto">Phasellus iaculis</li>
+  <li class="col-auto">Nulla volutpat</li>
 </ul>
 {{< /example >}}
 
diff --git a/site/content/docs/4.3/examples/checkout/index.html b/site/content/docs/4.3/examples/checkout/index.html
@@ -223,10 +223,10 @@ <h4>Payment</h4>
 
   <footer class="my-5 pt-5 text-muted text-center text-small">
     <p class="mb-1">&copy; 2017-{{< year >}} Company Name</p>
-    <ul class="list-inline">
-      <li class="list-inline-item"><a href="#">Privacy</a></li>
-      <li class="list-inline-item"><a href="#">Terms</a></li>
-      <li class="list-inline-item"><a href="#">Support</a></li>
+    <ul class="row g-2 justify-content-center">
+      <li class="col-auto"><a href="#">Privacy</a></li>
+      <li class="col-auto"><a href="#">Terms</a></li>
+      <li class="col-auto"><a href="#">Support</a></li>
     </ul>
   </footer>
 </div>
diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md
@@ -59,13 +59,15 @@ Changes to any layout tools and our grid system.
 - Responsive gutter classes can be used to control the gutter width in as well horizontal, vertical or both directions.
 - The gutter width is now set in `rem` and slightly increased from `30px` to `2rem` (32px).
 - Better nesting support. A `.row` class can now be used as a direct child of another `.row`.
+- The bullet points and padding from `<ul class="row">`s are removed by default, so no need to add `.list-unstyled` anymore.
 
 ## Content, Reboot, etc
 
 Changes to Reboot, typography, tables, and more.
 
 - **Todo:** Make RFS enabled by default
 - Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`.
+- `.list-inline` is removed in favor of using the grid (`.row`) in combination with `.col-auto` list items. See [inline lists documentation]({{< docsref "/content/typography#inline-lists" >}}).
 - Simplified table styles (no more 2px border on `thead > th` elements) and tightened cell padding.
 - Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135)
 - `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267](https://github.com/twbs/bootstrap/pull/29267)
