rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Harmonize the doc

Browse Source
This commit is contained in:
louismaximepiton 2023-01-17 09:46:05 +01:00 committed by Mark Otto
parent e8b7d38276
commit 5dc7f4c165
3 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/content/docs/5.3/layout/columns.md
View File

@ -94,6 +94,8 @@ Or, change the alignment of each column individually with any of the responsive
### Horizontal alignment
Change the horizontal alignment with any of the responsive `justify-content-*` classes.
{{< example class="bd-example-row" >}}
<div class="container text-center">
<div class="row justify-content-start">

26
site/content/docs/5.3/utilities/sizing.md
View File

@ -18,25 +18,27 @@ Width and height utilities are generated from the utility API in `_utilities.scs
<div class="w-auto p-3">Width auto</div>
{{< /example >}}
{{< example >}}
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
<div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
{{< example class="bd-example-flex" >}}
<div style="height: 100px;">
<div class="h-25 d-inline-block" style="width: 120px;">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px;">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px;">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px;">Height 100%</div>
<div class="h-auto d-inline-block" style="width: 120px;">Height auto</div>
</div>
{{< /example >}}
You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
{{< example >}}
{{< placeholder width="100%" height="100" class="mw-100" text="Max-width 100%" >}}
{{< example class="bd-example-flex" >}}
<div style="width: 50%; height: 100px;">
<div class="mw-100" style="width: 200%;">Max-width 100%</div>
</div>
{{< /example >}}
{{< example >}}
<div style="height: 100px; background-color: rgba(255,0,0,.1);">
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,.1);">Max-height 100%</div>
{{< example class="bd-example-flex" >}}
<div style="height: 100px;">
<div class="mh-100" style="width: 100px; height: 200px;">Max-height 100%</div>
</div>
{{< /example >}}

4
site/content/docs/5.3/utilities/spacing.md
View File

@ -75,13 +75,13 @@ Here are some representative examples of these classes:
Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a `width` set—by setting the horizontal margins to `auto`.
<div class="bd-example">
<div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
<div class="mx-auto p-2" style="width: 200px; background-color: rgba(var(--bd-violet-rgb),.15); border: rgba(var(--bd-violet-rgb),.3) solid 1px;">
Centered element
</div>
</div>
```html
<div class="mx-auto" style="width: 200px;">
<div class="mx-auto p-2" style="width: 200px;">
Centered element
</div>
```