diff options
| author | Patrick H. Lauke <[email protected]> | 2021-05-04 12:46:06 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2021-05-04 12:46:06 +0100 |
| commit | 8865a8ab1c7157ab81bf49afa62b75f36daee46d (patch) | |
| tree | 97ef78f2ea8e07aab50014176d061fe3c1d49134 /site/content/docs/5.0/utilities/flex.md | |
| parent | 018ee6a3b50b958ddb49657086cd9168abf5a485 (diff) | |
| parent | 7ea6578773cb1b7f5cfb8fb41321b3fa10349daf (diff) | |
| download | bootstrap-jo-docs-thanks-page.tar.xz bootstrap-jo-docs-thanks-page.zip | |
Merge branch 'main' into jo-docs-thanks-pagejo-docs-thanks-page
Diffstat (limited to 'site/content/docs/5.0/utilities/flex.md')
| -rw-r--r-- | site/content/docs/5.0/utilities/flex.md | 38 |
1 files changed, 37 insertions, 1 deletions
diff --git a/site/content/docs/5.0/utilities/flex.md b/site/content/docs/5.0/utilities/flex.md index 0d773272d..bbb1824b4 100644 --- a/site/content/docs/5.0/utilities/flex.md +++ b/site/content/docs/5.0/utilities/flex.md @@ -101,7 +101,7 @@ Use `justify-content` utilities on flexbox containers to change the alignment of <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> </div> - <div class="d-flex justify-content-around bd-highlight"> + <div class="d-flex justify-content-around bd-highlight mb-3"> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> @@ -627,3 +627,39 @@ Responsive variations also exist for `align-content`. {{- end -}} {{< /flex.inline >}} {{< /markdown >}} + +## Media object + +Looking to replicate the [media object component](https://getbootstrap.com/docs/4.6/components/media-object/) from Bootstrap 4? Recreate it in no time with a few flex utilities that allow even more flexibility and customization than before. + +{{< example >}} +<div class="d-flex"> + <div class="flex-shrink-0"> + {{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" >}} + </div> + <div class="flex-grow-1 ms-3"> + This is some content from a media component. You can replace this with any content and adjust it as needed. + </div> +</div> +{{< /example >}} + +And say you want to vertically center the content next to the image: + +{{< example >}} +<div class="d-flex align-items-center"> + <div class="flex-shrink-0"> + {{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" >}} + </div> + <div class="flex-grow-1 ms-3"> + This is some content from a media component. You can replace this with any content and adjust it as needed. + </div> +</div> +{{< /example >}} + +## Sass + +### Utilities API + +Flexbox utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-flex" file="scss/_utilities.scss" >}} |