Media

The media object helps build complex and repetitive components where some media is positioned alongside content that doesn't wrap around said media. Plus, it does this with only two required classes thanks to flexbox.

<div>
  <b-card>
    <b-media>
      <template #aside>
        <b-img blank blank-color="#ccc" width="64" alt="placeholder"></b-img>
      </template>

      <h5 class="mt-0">Media Title</h5>
      <p>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </p>
      <p>
        Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
        penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      </p>

      <b-media>
        <template #aside>
          <b-img blank blank-color="#ccc" width="64" alt="placeholder"></b-img>
        </template>

        <h5 class="mt-0">Nested Media</h5>
        <p class="mb-0">
          Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
          faucibus.
        </p>
      </b-media>
    </b-media>
  </b-card>
</div>

<!-- b-media.vue -->

Usage

<div>
  <b-media>
    <template #aside>
      <img src="..." alt="Media Aside">
    </template>

    <h2>Media Body</h2>
    <p>Some text</p>

    <!-- b-[Optional: add media children here for nesting] -->
  </b-media>
</div>

No body (with sub-components)

<div>
  <b-card>
    <b-media no-body>
      <b-media-aside vertical-align="center">
        <b-img blank blank-color="#ccc" width="64" height="128" alt="placeholder"></b-img>
      </b-media-aside>

      <b-media-body>
        <h5 class="mt-0">Media Title</h5>
        <p>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
          sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
          condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        </p>
        <p class="mb-0">
          Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
          natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        </p>

        <b-media>
          <template #aside>
            <b-img blank blank-color="#ccc" width="64" alt="placeholder"></b-img>
          </template>
          <h5 class="mt-0">Nested Media</h5>
          Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
          faucibus.
        </b-media>
      </b-media-body>
    </b-media>
  </b-card>
</div>

<!-- b-media-no-body.vue -->

Order

Change the order of content in media objects by adding right-align property.

<div>
  <b-media right-align vertical-align="center">
    <template #aside>
      <b-img blank blank-color="#ccc" width="80" alt="placeholder"></b-img>
    </template>
    <h5 class="mt-0 mb-1">Media object</h5>
    <p class="mb-0">
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
      Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
      nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </p>
  </b-media>
</div>

<!-- b-media-order.vue -->

Nesting

You can easily nest media objects by including another <b-media> inside parent's body.

Vertical align

Aside can be vertical aligned using vertical-align should be either top, center or end. Default is top.

Media list

Because the media object has so few structural requirements, you can also use these component as list HTML elements. On your <ul> or <ol>, add the class list-unstyled to remove any browser default list styles, and then use the <b-media> component with tag prop set to li. As always, use spacing utilities wherever needed to fine tune.

<div>
  <ul class="list-unstyled">
    <b-media tag="li">
      <template #aside>
        <b-img blank blank-color="#abc" width="64" alt="placeholder"></b-img>
      </template>
      <h5 class="mt-0 mb-1">List-based media object</h5>
      <p class="mb-0">
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </p>
    </b-media>

    <b-media tag="li" class="my-4">
      <template #aside>
       <b-img blank blank-color="#cba" width="64" alt="placeholder"></b-img>
      </template>

      <h5 class="mt-0 mb-1">List-based media object</h5>
      <p class="mb-0">
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </p>
    </b-media>

    <b-media tag="li">
      <template #aside>
        <b-img blank blank-color="#bac" width="64" alt="placeholder"></b-img>
      </template>

      <h5 class="mt-0 mb-1">List-based media object</h5>
      <p class="mb-0">
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </p>
    </b-media>
  </ul>
</div>

<!-- b-media-list.vue -->

Component reference

`<b-media>`

Functional component

View source

<b-media> Properties
<b-media> Slots

Properties

All property default values are globally configurable.

Property	Type	Default	Description
`no-body`	`Boolean`	`false`	When set, does not render a 'b-media-body' wrapper around the default slot content
`right-align`	`Boolean`	`false`	Render the 'aside' slot on the right. Default is on the left
`tag`	`String`	`'div'`	Specify the HTML tag to render instead of the default tag
`vertical-align`	`String`	`'top'`	Vertical alignment of the 'aside' slot: 'start' (or 'top'), 'center', or 'end' (or 'bottom')

Slots

Name	Description
`aside`	Media aside
`default`	Content to place in the media element

`<b-media-aside>`

Functional component

View source

<b-media-aside> Properties
<b-media-aside> Slots

Properties

All property default values are globally configurable.

Property	Type	Default	Description
`right`	`Boolean`	`false`	Position the 'aside' on the right. Default is on the left
`tag`	`String`	`'div'`	Specify the HTML tag to render instead of the default tag
`vertical-align`	`String`	`'top'`	Vertical alignment of the aside: 'start' (or 'top'), 'center', or 'end' (or 'bottom')

Slots

Name	Description
`default`	Content to place in the media aside

`<b-media-body>`

Functional component

View source

<b-media-body> Properties
<b-media-body> Slots

Properties

All property default values are globally configurable.

Property	Type	Default	Description
`tag`	`String`	`'div'`	Specify the HTML tag to render instead of the default tag

Slots

Name	Description
`default`	Content to place in the media body

Importing individual components

You can import individual components into your project via the following named exports:

Component	Named Export	Import Path
`<b-media>`	`BMedia`	`bootstrap-vue`
`<b-media-aside>`	`BMediaAside`	`bootstrap-vue`
`<b-media-body>`	`BMediaBody`	`bootstrap-vue`

Example:

import { BMedia } from 'bootstrap-vue'
Vue.component('b-media', BMedia)

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named Export	Import Path
`MediaPlugin`	`bootstrap-vue`

Example:

import { MediaPlugin } from 'bootstrap-vue'
Vue.use(MediaPlugin)