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>
This commit is contained in:
parent
a4c4f7917b
commit
1df59bb17f
|
@ -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.
|
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.
|
- Remove `position: relative` from grid columns.
|
||||||
- The horizontal padding is added to the direct children in a row instead of the columns themselves.
|
- The horizontal padding is added to the direct children in a row instead of the columns themselves.
|
||||||
- This simplifies our codebase.
|
- This simplifies our codebase.
|
||||||
|
|
|
@ -628,6 +628,34 @@ Responsive variations also exist for `align-content`.
|
||||||
{{< /flex.inline >}}
|
{{< /flex.inline >}}
|
||||||
{{< /markdown >}}
|
{{< /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
|
## Sass
|
||||||
|
|
||||||
### Utilities API
|
### Utilities API
|
||||||
|
|
Loading…
Reference in New Issue