Bootstrap 4 Tutorial

BS4 Media Objects

Last modified on: October 26, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<div class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">Bootstrap 4's Media Object component is a flexible layout structure that allows you to align and position media elements (like images or videos) alongside content. It's useful for building comments sections, blog posts, or any UI with media-content pairing.</div>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="fc41ac50-25fe-4091-9188-a7e5166c761d" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light"><hr />
<h1>Bootstrap 4 Media Objects</h1>
<h2>1. <strong>Basic Media Object</strong></h2>
<p>The basic structure of a media object involves a container with an image (or other media) on one side and content on the other. Use the <code>.media</code> class as the container and <code>.media-body</code> for the main content.</p>
<h3>Example: Basic Media Object</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="media"&gt;
    &lt;img src="https://via.placeholder.com/64" class="mr-3" alt="Sample image"&gt;
    &lt;div class="media-body"&gt;
        &lt;h5 class="mt-0"&gt;Media Heading&lt;/h5&gt;
        This is a simple media object. Use it to align media like images alongside your content.
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li><code>.mr-3</code>: Adds right margin to the image to create spacing between the media and content.</li>
<li><code>.media-body</code>: Contains the main content and is displayed beside the image.</li>
</ul>
<h2>2. <strong>Nesting Media Objects</strong></h2>
<p>Bootstrap allows nesting of media objects, which is useful for creating threaded comments or hierarchical structures.</p>
<h3>Example: Nested Media Object</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="media"&gt;
    &lt;img src="https://via.placeholder.com/64" class="mr-3" alt="Sample image"&gt;
    &lt;div class="media-body"&gt;
        &lt;h5 class="mt-0"&gt;Parent Media Heading&lt;/h5&gt;
        This is the main media object.

&lt;div class="media mt-3"&gt;
            &lt;img src="https://via.placeholder.com/64" class="mr-3" alt="Sample image"&gt;
            &lt;div class="media-body"&gt;
                &lt;h5 class="mt-0"&gt;Child Media Heading&lt;/h5&gt;
                This is a nested media object.
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li>The inner <code>.media</code> block is nested within the outer <code>.media-body</code> div, creating a hierarchical layout.</li>
</ul>
<h2>3. <strong>Media Alignment</strong></h2>
<p>To align media on the left, use <code>.align-self-start</code>. For center and bottom alignment, use <code>.align-self-center</code> and <code>.align-self-end</code>, respectively.</p>
<h3>Example: Media Alignment</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="media"&gt;
    &lt;img src="https://via.placeholder.com/64" class="align-self-start mr-3" alt="Top aligned image"&gt;
    &lt;div class="media-body"&gt;
        &lt;h5 class="mt-0"&gt;Top Aligned Media&lt;/h5&gt;
        This media is aligned to the top of the container.
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="media"&gt;
    &lt;img src="https://via.placeholder.com/64" class="align-self-center mr-3" alt="Center aligned image"&gt;
    &lt;div class="media-body"&gt;
        &lt;h5 class="mt-0"&gt;Center Aligned Media&lt;/h5&gt;
        This media is aligned to the center of the container.
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="media"&gt;
    &lt;img src="https://via.placeholder.com/64" class="align-self-end mr-3" alt="Bottom aligned image"&gt;
    &lt;div class="media-body"&gt;
        &lt;h5 class="mt-0"&gt;Bottom Aligned Media&lt;/h5&gt;
        This media is aligned to the bottom of the container.
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>4. <strong>Reversing Media Order</strong></h2>
<p>To reverse the media and content alignment (placing content first and media after), simply reorder the elements within the <code>.media</code> container.</p>
<h3>Example: Reversed Media Object</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="media"&gt;
    &lt;div class="media-body"&gt;
        &lt;h5 class="mt-0"&gt;Reversed Media Heading&lt;/h5&gt;
        Here, the content is displayed before the media.
    &lt;/div&gt;
    &lt;img src="https://via.placeholder.com/64" class="ml-3" alt="Reversed media image"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>In this example:</p>
<ul>
<li><code>.ml-3</code> is used to add left margin to the image, maintaining spacing between the content and the media.</li>
</ul>
<hr />
<h2>&nbsp;</h2>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More