diff options
| author | Mark Otto <markd.otto@gmail.com> | 2021-03-02 17:08:32 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-03-02 17:08:32 +0300 |
| commit | 1df59bb17f402f155e08fd2d232c7272d6d1466d (patch) | |
| tree | 8a5a3739a4df40f22b48edf973cd90b9a7a3178c | |
| parent | a4c4f7917befd5294cad58836a2ec9bc07800117 (diff) | |
Add an example of v4's media component in the flex utils docs (#33207)
* Add an example of v4's media component in the flex utils docs
* Link to new example from Migration guide
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
| -rw-r--r-- | site/content/docs/5.0/migration.md | 2 | ||||
| -rw-r--r-- | site/content/docs/5.0/utilities/flex.md | 28 |
2 files changed, 29 insertions, 1 deletions
diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index 19a76a8e0a..0260382302 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -333,7 +333,7 @@ We've updated the color system that powers Bootstrap to improve color contrast a Changes to any layout tools and our grid system. -- Dropped the `.media` component as it can be built with utility classes. [See #28265](https://github.com/twbs/bootstrap/pull/28265). +- Dropped the `.media` component as it can be built with utility classes. [See #28265](https://github.com/twbs/bootstrap/pull/28265) and the [flex utilities page for an example]({{< docsref "/utilities/flex#media-object" >}}). - Remove `position: relative` from grid columns. - The horizontal padding is added to the direct children in a row instead of the columns themselves. - This simplifies our codebase. diff --git a/site/content/docs/5.0/utilities/flex.md b/site/content/docs/5.0/utilities/flex.md index 2e22ed988f..c87f7474e5 100644 --- a/site/content/docs/5.0/utilities/flex.md +++ b/site/content/docs/5.0/utilities/flex.md @@ -628,6 +628,34 @@ Responsive variations also exist for `align-content`. {{< /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 |