Properties
Property | Type | Default Value |
---|---|---|
tag | String | div |
right-align | Boolean | false |
vertical-align | String | top |
no-body | Boolean | false |
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.
<b-card>
<b-media>
<b-img slot="aside" blank blank-color="#ccc" width="64" alt="placeholder" />
<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>
<b-img slot="aside" blank blank-color="#ccc" width="64" alt="placeholder" />
<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>
<!-- media-1.vue -->
<b-media>
<img slot="aside" src="..." alt="Media Aside" />
<h2>Media Body</h2>
<p>Some text</p>
<!-- [Optional: add media children here for nesting] -->
</b-media>
<b-card>
<b-media no-body>
<b-media-aside vertical-align="center">
<b-img blank blank-color="#ccc" width="128" height="256" alt="placeholder" />
</b-media-aside>
<b-media-body class="ml-3">
<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>
<b-img slot="aside" blank blank-color="#ccc" width="64" alt="placeholder" />
<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>
<!-- media-2.vue -->
Change the order of content in media objects by adding right-align
property.
<b-media right-align vertical-align="center">
<b-img slot="aside" blank blank-color="#ccc" width="80" alt="placeholder" />
<h5 class="mt-0 mb-1">Media object</h5>
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.
</b-media>
<!-- media-3.vue -->
You can easily nest media objects by including another <b-media>
inside parent's body.
Aside can be vertical aligned using vertical-align
should be either top
, center
or end
. Default is top
.
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.
<ul class="list-unstyled">
<b-media tag="li">
<b-img slot="aside" blank blank-color="#abc" width="64" alt="placeholder" />
<h5 class="mt-0 mb-1">List-based media object</h5>
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.
</b-media>
<b-media tag="li" class="my-4">
<b-img slot="aside" blank blank-color="#cba" width="64" alt="placeholder" />
<h5 class="mt-0 mb-1">List-based media object</h5>
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.
</b-media>
<b-media tag="li">
<b-img slot="aside" blank blank-color="#bac" width="64" alt="placeholder" />
<h5 class="mt-0 mb-1">List-based media object</h5>
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.
</b-media>
</ul>
<!-- media-4.vue -->
<b-media>
Property | Type | Default Value |
---|---|---|
tag | String | div |
right-align | Boolean | false |
vertical-align | String | top |
no-body | Boolean | false |
Slot | Description |
---|---|
aside | Media Aside |
.native
modifier to capture browser native events such as:
@click.native="..."
,
@mouseover.native="..."
, etc. See the the official
Vue.js documentation
for more information.
<b-media-aside>
Property | Type | Default Value |
---|---|---|
tag | String | div |
vertical-align | String | top |
<b-media-body>
Property | Type | Default Value |
---|---|---|
tag | String | div |
Component | Import Path |
---|---|
<b-media> | bootstrap-vue/es/components/media/media |
<b-media-aside> | bootstrap-vue/es/components/media/media-aside |
<b-media-body> | bootstrap-vue/es/components/media/media-body |
Example:
import bMedia from 'bootstrap-vue/es/components/media/media';
Vue.component('b-media', bMedia);
This plugin includes all of the above listed individual components. Plugins also include any component aliases.
import { Media } from 'bootstrap-vue/es/components';
Vue.use(Media);