To skin Bootstrap v4+ Media Object.
<dl>
<dt>Bootstrap <code>.media</code></dt>
<dd>
<div class="media">
<img
src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png"
alt="(sample image)"
/>
<div class="media-body">
<h4>No Extra Classes</h4>
<p>Default alignment (none).</p>
</div>
</div>
</dd>
<dd>
<div class="media">
<img
class="mr-3"
src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png"
alt="(sample image)"
/>
<div class="media-body align-self-center">
<h4>Has Extra Classes</h4>
<p>Custom alignment (center).</p>
</div>
</div>
</dd>
<dt>TACC <code>.media.media-link</code></dt>
<dd>
<a href="#" class="media media-link">
<img
src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png"
alt="(sample image)"
/>
<div class="media-body">
<h4>HTML5 Markup</h4>
<p>The <code>.media</code> is a link.</p>
</div>
</a>
</dd>
<dd>
<p class="media media-link">
<a href="#" title="HTML4 Markup"><img
src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png"
alt="(sample image)"
/>
</a>
<span class="media-body">
<a href="#">HTML4 Markup</a><br>
<span>Links are inside <code>.media</code>.</span>
</span>
</p>
</dd>
</dl>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
.media img {
max-width: 120px;
height: auto;
}
dd {
float: left;
width: clamp(300px, calc(50% - 25px), 400px); /* 25px is <dd> margin-left */
}
dt {
clear: left;
}
{
"shouldSkipPattern": true,
"bootstrap4Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap4.css"
}
],
"bootstrap5Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap5.css"
}
],
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "bootstrap4/components",
"shouldLoadBootstrap": true
}