rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00
Code Issues Actions Packages Releases Activity

Add an example of v4's media component in the flex utils docs (#33207)

Browse Source 
* 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>
This commit is contained in:
Mark Otto 2021-03-02 06:08:32 -08:00 committed by GitHub
parent a4c4f7917b
commit 1df59bb17f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/content/docs/5.0/migration.md
View File

@ -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.

28
site/content/docs/5.0/utilities/flex.md
View File

@ -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