Image above by Eileen Lamb
I love Nicole Sullivan's Media Object (ten years old this year - happy birthday, Media Object!). It's changed a lot since then and on my current sites, I'm using the variant from Bootstrap 4.
However, Media Object has a problem: it doesn't care if you have enough space to display the image and the media-body
next to each other or not. If the display gets really, wee, it's just going to crush everything up.
Today I realised that Bootstrap 4's display classes are the solution. Lemmy take you through it.
By default, Media Object in Bootstrap 4 required the following structure:
<div class="media">
<p class="mr-2"><img src="myimage.jpg" alt=""></p>
<div class="media-body">
<h2>Heading</h2>
<p>Copy</p>
</div>
</div>
This particular version of Media Object uses flex
for layout, which gives us all kinds of possibilities for positioning the blocks next to each other, or even swapping the order. However, this is all dependent on the .media
element having the declaration display: flex
.
You want the d
Bootstrap's d
classes allow you to switch the display
property of an element by breakpoint, starting at the smallest and cascading to the largest breakpoint. For example:
<p class="d-none">
This won't display at all
</p>
<p class="d-none d-sm-block">
This appears at <code>sm</code> and larger
</p>
<p class="d-none d-md-block">
This appears at <code>md</code> and larger
</p>
<p class="d-none d-lg-block">
This appears at <code>lg</code> and larger
</p>
But it doesn't just switch between block
and none
. Here's the other values you can apply:
none
inline
inline-block
block
table
table-cell
table-row
-
flex
<-- foreshadowing inline-flex
Given that, here's how I'm using the d
classes in conjunction with Media Object, so it collapses on smaller breakpoints (look at the classes on the .media
element):
<div class="media d-block d-md-flex">
<p class="mr-2"><img src="myimage.jpg" alt=""></p>
<div class="media-body">
<h2>Heading</h2>
<p>Copy</p>
</div>
</div>
At smaller breakpoints, none of the flexbox rules applied to the children of media
work, because their parent is display: block
. However, flexbox kicks in again at the medium (and above) breakpoint.
Hopefully this pattern is useful to someone.
Top comments (0)