diff options
Diffstat (limited to 'site/content/docs/5.0/layout')
| -rw-r--r-- | site/content/docs/5.0/layout/columns.md | 12 | ||||
| -rw-r--r-- | site/content/docs/5.0/layout/utilities.md | 2 |
2 files changed, 7 insertions, 7 deletions
diff --git a/site/content/docs/5.0/layout/columns.md b/site/content/docs/5.0/layout/columns.md index b9f54f2e1a..9d4f538b56 100644 --- a/site/content/docs/5.0/layout/columns.md +++ b/site/content/docs/5.0/layout/columns.md @@ -264,20 +264,20 @@ In addition to column clearing at responsive breakpoints, you may need to reset #### Margin utilities -With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to force sibling columns away from one another. +With the move to flexbox in v4, you can use margin utilities like `.me-auto` to force sibling columns away from one another. {{< example class="bd-example-row" >}} <div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> - <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> + <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div> </div> <div class="row"> - <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> - <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> + <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div> + <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div> </div> <div class="row"> - <div class="col-auto mr-auto">.col-auto .mr-auto</div> + <div class="col-auto me-auto">.col-auto .me-auto</div> <div class="col-auto">.col-auto</div> </div> </div> @@ -300,7 +300,7 @@ The classes can be used together with utilities to create responsive floated ima {{< example >}} <div class="clearfix"> - {{< placeholder width="100%" height="210" class="col-md-6 float-md-right mb-3 ml-md-3" text="Responsive floated image" >}} + {{< placeholder width="100%" height="210" class="col-md-6 float-md-end mb-3 ms-md-3" text="Responsive floated image" >}} <p> Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris paddenstoel nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/site/content/docs/5.0/layout/utilities.md b/site/content/docs/5.0/layout/utilities.md index af1cf2580e..009d2416d1 100644 --- a/site/content/docs/5.0/layout/utilities.md +++ b/site/content/docs/5.0/layout/utilities.md @@ -18,7 +18,7 @@ Should you need to add `display: flex` to an element, do so with `.d-flex` or on ## Margin and padding -Use the `margin` and `padding` [spacing utilities]({{< docsref "/utilities/spacing" >}}) to control how elements and components are spaced and sized. Bootstrap includes a six-level scale for spacing utilities, based on a `1rem` value default `$spacer` variable. Choose values for all viewports (e.g., `.mr-3` for `margin-right: 1rem`), or pick responsive variants to target specific viewports (e.g., `.mr-md-3` for `margin-right: 1rem` starting at the `md` breakpoint). +Use the `margin` and `padding` [spacing utilities]({{< docsref "/utilities/spacing" >}}) to control how elements and components are spaced and sized. Bootstrap includes a six-level scale for spacing utilities, based on a `1rem` value default `$spacer` variable. Choose values for all viewports (e.g., `.me-3` for `margin-right: 1rem` in LTR), or pick responsive variants to target specific viewports (e.g., `.me-md-3` for `margin-right: 1rem` —in LTR— starting at the `md` breakpoint). ## Toggle `visibility` |