Vue Bootstrap Media object

Vue Media - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Documentation and examples for Bootstrap's media object to construct highly repetitive components like blog comments, tweets, and the like.

Example

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..

Below is an example of a single media object. Only two classes are required—the wrapping .media and the .media-body around your content. Optional padding and margin can be controlled through spacing utilities.

Media heading

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.

Show code

template
script

        
            
            <template>
              <mdb-media>
                <mdb-media-image src="https://mdbootstrap.com/img/Photos/Others/placeholder1.webp" class="d-flex mr-3" alt="Generic placeholder image" />
                <mdb-media-body>
                  <h5 class="mt-0 font-weight-bold">Media heading</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.
                </mdb-media-body>
              </mdb-media>
            </template>

        
            
            <script>
              import {mdbMedia, mdbMediaBody, mdbMediaImage } from 'mdbvue';
              export default {
                components: {
                  mdbMedia,
                  mdbMediaBody,
                  mdbMediaImage
                }
              }
            </script>

Flexbug #12: Inline elements aren’t treated as flex items

Internet Explorer 10-11 do not render inline elements like links or images (or ::before and ::after pseudo-elements) as flex items. The only workaround is to set a non-inline display value (e.g., block, inline-block, or flex). We suggest using .d-flex, one of our display utilities, as an easy fix.

Source: Flexbugs on GitHub

Nesting

Media objects can be infinitely nested, though we suggest you stop at some point. Place nested .media within the .media-body of a parent media object.

Media heading

Show code

template
script

        
            
            <template>
              <mdb-media>
                <mdb-media-image src="https://mdbootstrap.com/img/Photos/Others/placeholder4.webp" class="d-flex mr-3" alt="Generic placeholder image" />
                <mdb-media-body>
                  <h5 class="mt-0 font-weight-bold">Media heading</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.
                    <mdb-media class="mt-4">
                      <mdb-media-image src="https://mdbootstrap.com/img/Photos/Others/placeholder4.webp" class="d-flex pr-3" alt="Generic placeholder image" />
                      <mdb-media-body>
                        <h5 class="mt-0 font-weight-bold">Media heading</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.
                      </mdb-media-body>
                    </mdb-media>
                </mdb-media-body>
              </mdb-media>
            </template>

        
            
            <script>
              import {mdbMedia, mdbMediaBody, mdbMediaImage } from 'mdbvue';
              export default {
                components: {
                  mdbMedia,
                  mdbMediaBody,
                  mdbMediaImage
                }
              }
            </script>

Alignment

Media in a media object can be aligned with flexbox utilities to the top (default), middle, or end of your .media-body content.

Top-aligned media

Align object at the top of media.

Top-aligned media

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.

Show code

template
script

        
            
            <template>
              <mdb-media>
                <mdb-media-image class="d-flex align-self-start mr-3" src="https://mdbootstrap.com/img/Photos/Others/placeholder6.webp" alt="Generic placeholder image" />
                <mdb-media-body>
                  <h5 class="mt-0 font-weight-bold">Top-aligned media</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>
                </mdb-media-body>
              </mdb-media>
            </template>

        
            
            <script>
              import {mdbMedia, mdbMediaBody, mdbMediaImage } from 'mdbvue';
              export default {
                components: {
                  mdbMedia,
                  mdbMediaBody,
                  mdbMediaImage
                }
              }
            </script>

Center-aligned media

Align object at center of media.

Center-aligned media

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.

Show code

template
script

        
            
            <template>
              <mdb-media>
                <mdb-media-image class="d-flex align-self-center mr-3" src="https://mdbootstrap.com/img/Photos/Others/placeholder7.webp" alt="Generic placeholder image" />
                <mdb-media-body>
                  <h5 class="mt-0 font-weight-bold">Center-aligned media</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>
                </mdb-media-body>
              </mdb-media>
            </template>

        
            
            <script>
              import {mdbMedia, mdbMediaBody, mdbMediaImage } from 'mdbvue';
              export default {
                components: {
                  mdbMedia,
                  mdbMediaBody,
                  mdbMediaImage
                }
              }
            </script>

Bottom-aligned media

Align object at bottom of media.

Bottom-aligned media

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.

Show code

template
script

        
            
            <template>
              <mdb-media>
                <mdb-media-image class="d-flex align-self-end mr-3" src="https://mdbootstrap.com/img/Photos/Others/placeholder5.webp" alt="Generic placeholder image" />
                <mdb-media-body>
                  <h5 class="mt-0 font-weight-bold">Bottom-aligned media</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>
                </mdb-media-body>
              </mdb-media>
            </template>

        
            
            <script>
              import {mdbMedia, mdbMediaBody, mdbMediaImage } from 'mdbvue';
              export default {
                components: {
                  mdbMedia,
                  mdbMediaBody,
                  mdbMediaImage
                }
              }
            </script>

Order

Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the order property (to an integer of your choosing).

Media object

Show code

template
script

        
            
            <template>
              <mdb-media>
                <mdb-media-body>
                  <h5 class="mt-0 mb-1 font-weight-bold">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.
                </mdb-media-body>
                <img class="d-flex ml-3" src="https://mdbootstrap.com/img/Photos/Others/placeholder1.webp" alt="Generic placeholder image">
              </mdb-media>
            </template>

        
            
            <script>
              import {mdbMedia, mdbMediaBody } from 'mdbvue';
              export default {
                components: {
                  mdbMedia,
                  mdbMediaBody
                }
              }
            </script>

Media list

Because the media object has so few structural requirements, you can also use these classes on list HTML elements. On your <ul> or <ol>, add the .list-unstyled to remove any browser default list styles, and then apply .media to your <li>s. As always, use spacing utilities wherever needed to fine tune.

List-based media object
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.
List-based media object
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.
List-based media object
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.

Show code

template
script

        
            
            <template>
              <ul class="list-unstyled">
                <mdb-media tag="li">
                  <mdb-media-image circle class="d-flex mr-3" src="https://mdbootstrap.com/img/Photos/Others/placeholder7.webp" alt="Generic placeholder image" />
                  <mdb-media-body>
                    <h5 class="mt-0 mb-1 font-weight-bold">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.
                  </mdb-media-body>
                </mdb-media>
                <mdb-media tag="li" class="my-4">
                  <mdb-media-image circle class="d-flex mr-3" src="https://mdbootstrap.com/img/Photos/Others/placeholder6.webp" alt="Generic placeholder image" />
                  <mdb-media-body>
                    <h5 class="mt-0 mb-1 font-weight-bold">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.
                  </mdb-media-body>
                </mdb-media>
                <mdb-media tag="li">
                  <mdb-media-image circle class="d-flex mr-3" src="https://mdbootstrap.com/img/Photos/Others/placeholder5.webp" alt="Generic placeholder image" />
                  <mdb-media-body>
                    <h5 class="mt-0 mb-1 font-weight-bold">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.
                  </mdb-media-body>
                </mdb-media>
              </ul>
            </template>

        
            
            <script>
              import {mdbMedia, mdbMediaBody, mdbMediaImage } from 'mdbvue';
              export default {
                components: {
                  mdbMedia,
                  mdbMediaBody,
                  mdbMediaImage
                }
              }
            </script>

Another example of nesting

Miley Steward

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tommy Smith

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Alexandra Moon

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Sylvester the Cat

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Caroline Horwitz

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Show code

template
script

        
            
            <template>
              <div>
                <mdb-media class="d-block d-md-flex mt-4">
                    <mdb-media-image class="d-flex mb-3 mx-auto avatar" src="https://mdbootstrap.com/img/Photos/Avatars/img (20).webp" alt="Generic placeholder image" />
                    <mdb-media-body class="media-body text-center text-md-left ml-md-3 ml-0">
                        <h5 class="mt-0 font-weight-bold">Miley Steward</h5>
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                        sunt in culpa qui officia deserunt mollit anim id est laborum.
                        <mdb-media class="d-block d-md-flex mt-3">
                            <mdb-media-image class="d-flex mb-3 mx-auto avatar" src="https://mdbootstrap.com/img/Photos/Avatars/img (27).webp" alt="Generic placeholder image" />
                            <mdb-media-body class="text-center text-md-left ml-md-3 ml-0">
                                <h5 class="mt-0 font-weight-bold">Tommy Smith</h5>
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
                                inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                                <mdb-media class="d-block d-md-flex mt-3">
                                    <mdb-media-image class="d-flex mb-3 mx-auto avatar" src="https://mdbootstrap.com/img/Photos/Avatars/img (31).webp" alt="Generic placeholder image" />
                                    <mdb-media-body class="media-body text-center text-md-left ml-md-3 ml-0">
                                        <h5 class="mt-0 font-weight-bold">Alexandra Moon</h5>
                                        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
                                        sequi nesciunt.
                                    </mdb-media-body>
                                </mdb-media>
                            </mdb-media-body>
                        </mdb-media>
                        <mdb-media class="d-block d-md-flex mt-3">
                            <mdb-media-image class="d-flex mb-3 mx-auto avatar" src="https://mdbootstrap.com/img/Photos/Avatars/img (21).webp" alt="Generic placeholder image" />
                            <mdb-media-body class="text-center text-md-left ml-md-3 ml-0">
                                <h5 class="mt-0 font-weight-bold">Sylvester the Cat</h5>
                                    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
                                    ut labore et dolore magnam aliquam quaerat voluptatem.
                            </mdb-media-body>
                        </mdb-media>
                    </mdb-media-body>
                </mdb-media>
                <mdb-media class="d-block d-md-flex mt-3">
                    <mdb-media-image class="d-flex mb-3 mx-auto avatar" src="https://mdbootstrap.com/img/Photos/Avatars/img (30).webp" alt="Generic placeholder image" />
                    <mdb-media-body class="text-center text-md-left ml-md-3 ml-0">
                        <h5 class="mt-0 font-weight-bold">Caroline Horwitz</h5>
                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
                        excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
                    </mdb-media-body>
                </mdb-media>
              </div>
            </template>

        
            
            <script>
              import {mdbMedia, mdbMediaBody, mdbMediaImage } from 'mdbvue';
              export default {
                components: {
                  mdbMedia,
                  mdbMediaBody,
                  mdbMediaImage
                }
              }
            </script>

        
            
            <style>
              @media (min-width: 768px) {
                .media .avatar {
                    width: 64px;
                }
              }

              @media (max-width: 767px) {
                .media .avatar {
                    width: 160px;
                }
              }
            </style>

Media object within comments list MDB Pro component

Nest comment list inside a media object.

Anna Smith

Danny Tatuum

Caroline Horwitz

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis odit minima eaque dignissimos recusandae officiis commodi nulla est, tempore atque voluptas non quod maxime, iusto, debitis aliquid? Iure ipsum, itaque.

Show code

template
script

        
            
            <template>
              <!-- Grid row -->
              <mdb-row>
                <!-- Grid column -->
                <mdb-col lg="10" xl="8">
                  <mdb-media class="d-block d-md-flex">
                    <mdb-media-image class="d-flex rounded-circle avatar z-depth-1-half mb-3 mx-auto" src="https://mdbootstrap.com/img/Others/documentation/img (20)-mini.webp"
                      alt="Avatar" />
                    <mdb-media-body class="text-center text-md-left ml-md-3 ml-0">
                      <h5 class="mt-0 font-weight-bold blue-text">Anna Smith</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.
                      <mdb-media class="d-block d-md-flex mt-3 shadow-textarea">
                        <img class="d-flex rounded-circle avatar z-depth-1-half mb-3 mx-auto" src="https://mdbootstrap.com/img/Others/documentation/img (3)-mini.webp"
                          alt="Generic placeholder image">
                        <mdb-media-body class="text-center text-md-left ml-md-3 ml-0">
                          <h5 class="mt-0 font-weight-bold blue-text mb-3">Danny Tatuum</h5>
                          <div class="form-group basic-textarea rounded-corners mb-md-0 mb-4">
                            <textarea class="form-control z-depth-1" id="exampleFormControlTextarea3" rows="3" placeholder="Write your comment..."></textarea>
                          </div>
                        </mdb-media-body>
                      </mdb-media>
                    </mdb-media-body>
                  </mdb-media>
                  <mdb-media class="d-block d-md-flex">
                    <mdb-media-image class="d-flex rounded-circle avatar z-depth-1-half mb-3 mx-auto" src="https://mdbootstrap.com/img/Others/documentation/img (2)-mini.webp"
                      alt="Avatar" />
                    <mdb-media-body class="text-center text-md-left ml-md-3 ml-0">
                      <h5 class="mt-0 font-weight-bold blue-text">Caroline Horwitz</h5>
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis odit minima eaque dignissimos recusandae officiis commodi
                      nulla est, tempore atque voluptas non quod maxime, iusto, debitis aliquid? Iure ipsum, itaque.
                    </mdb-media-body>
                  </mdb-media>
                </mdb-col>
                <!-- Grid column -->
              </mdb-row>
              <!-- Grid row -->
            </template>

        
            
            <script>
              import {mdbMedia, mdbMediaBody, mdbMediaImage, mdbRow, mdbCol } from 'mdbvue';
              export default {
                components: {
                  mdbMedia,
                  mdbMediaBody,
                  mdbMediaImage,
                  mdbRow,
                  mdbCol
                }
              }
            </script>

Media object within panels MDB Pro component

Use media objects within panels.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia magni dolores eos qui ratione voluptatem sequi nesciunt.

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Itaque earum rerum hic tenetur a sapiente delectus.

Authors

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis.

Show code

template
script

        
            
            <template>
              <!-- Grid row -->
              <mdb-row>
                <!-- Grid column -->
                <mdb-col md="10" lg="9" xl="6" class="mb-r">
                  <!--Panel-->
                  <mdb-card class="card-body mb-3">
                    <mdb-media class="d-block d-md-flex">
                      <mdb-media-image class="d-flex avatar-2 mb-md-0 mb-3 mx-auto" src="https://mdbootstrap.com/img/Others/documentation/img (31)-mini.webp"
                        alt="Generic placeholder image" />
                      <mdb-media-body class="text-center text-md-left ml-md-3 ml-0">
                        <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia magni dolores
                          eos qui ratione voluptatem sequi nesciunt.</p>
                        <mdb-btn color="primary" size="md">Read more</mdb-btn>
                      </mdb-media-body>
                    </mdb-media>
                  </mdb-card>
                  <!--/.Panel-->

                  <!--Panel-->
                  <mdb-card class="card-body mb-3">
                    <mdb-media class="d-block d-md-flex">
                      <mdb-media-body class="pr-md-3 pr-0 text-center text-md-left">
                        <p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
                          eligendi optio cumque nihil impedit.</p>
                        <mdb-btn color="primary" size="md">Read more</mdb-btn>
                      </mdb-media-body>
                      <img class="d-flex mr-3 avatar-2 mt-md-0 mt-3 mx-auto" src="https://mdbootstrap.com/img/Others/documentation/img (27)-mini.webp"
                        alt="Generic placeholder image">
                    </mdb-media>
                  </mdb-card>
                  <!--/.Panel-->

                  <!--Panel-->
                  <mdb-card class="card-body">
                    <mdb-media class="d-block d-md-flex">
                      <mdb-media-image class="d-flex avatar-2 mb-md-0 mb-3 mx-auto" src="https://mdbootstrap.com/img/Others/documentation/img (28)-mini.webp"
                        alt="Generic placeholder image" />
                      <mdb-media-body class="text-center text-md-left ml-md-3 ml-0">
                        <p> Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
                          placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Itaque earum rerum
                          hic tenetur a sapiente delectus.</p>
                      </mdb-media-body>
                    </mdb-media>
                  </mdb-card>
                  <!--/.Panel-->
                </mdb-col>
                <!-- Grid column -->

                <!-- Grid column -->
                <mdb-col md="10" lg="9" xl="6">
                  <!--Panel-->
                  <mdb-card class="mb-3">
                    <h3 class="card-header indigo white-text text-uppercase text-center">Authors</h3>
                    <mdb-card-body class="card-body">
                      <mdb-media class="d-block d-md-flex mt-md-0 mt-4 mb-4">
                        <mdb-media-image class="d-flex mb-md-0 mb-3 avatar-2 rounded-circle z-depth-1 mx-auto" src="https://mdbootstrap.com/img/Others/documentation/img (3)-mini.webp"
                          alt="Generic placeholder image" />
                        <mdb-media-body class="media-body ml-md-3 ml-0">
                          <p align="justify">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
                            deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
                            provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
                            fuga.
                          </p>
                          <div class="text-center text-md-left">
                            <mdb-btn color="indigo" rounded size="md">Read more</mdb-btn>
                          </div>
                        </mdb-media-body>
                      </mdb-media>
                      <mdb-media class="d-block d-md-flex">
                        <mdb-media-body class="mr-md-3 mr-0">
                          <p align="justify">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis
                            est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis
                            voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis.</p>
                          <div class="text-center text-md-left">
                            <mdb-btn color="indigo" rounded size="md">Read more</mdb-btn>
                          </div>
                        </mdb-media-body>
                        <img class="d-flex mr-3 mb-md-0 mb-3 mt-md-0 mt-4 avatar-2 rounded-circle z-depth-1 mx-auto" src="https://mdbootstrap.com/img/Others/documentation/img (2)-mini.webp"
                          alt="Generic placeholder image">
                      </mdb-media>
                    </mdb-card-body>
                  </mdb-card>
                  <!--/.Panel-->
                </mdb-col>
                <!-- Grid column -->
              </mdb-row>
              <!-- Grid row -->
            </template>

        
            
            <script>
              import {mdbMedia, mdbMediaBody, mdbMediaImage, mdbCard, mdbCardBody, mdbCol, mdbRow, mdbBtn } from 'mdbvue';
              export default {
                components: {
                  mdbMedia,
                  mdbMediaBody,
                  mdbMediaImage,
                  mdbCard,
                  mdbCardBody,
                  mdbCol,
                  mdbRow,
                  mdbBtn
                }
              }
            </script>
          </code>
          <code data-lang="html" data-name="style">
            <style>
              @media (min-width: 768px) {
                .media .avatar-2 {
                    width: 130px;
                }
              }

              @media (max-width: 767px) {
                .media .avatar-2 {
                    width: 160px;
                }
              }

              .card img.rounded-circle {
                border-radius: 50%;
              }
            </style>

Responsive media object

Create a responsive layout of media objects.

Title of the news

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Title of the news

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Show code

template
script
style

        
            
            <template>
              <div>
                <mdb-media class="d-block d-md-flex mt-4">
                  <mdb-media-image class="d-flex mb-3 mx-auto media-image z-depth-1" src="https://mdbootstrap.com/img/Others/documentation/img (1)-mini.webp"
                    alt="Generic placeholder image" />
                  <mdb-media-body class="media-body text-center text-md-left ml-md-3 ml-0">
                    <h5 class="mt-0 font-weight-bold">Title of the news</h5>
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    <mdb-media class="media d-block d-md-flex mt-3">
                      <mdb-media-image class="d-flex mb-3 mx-auto media-image z-depth-1" src="https://mdbootstrap.com/img/Others/documentation/img (101)-mini.webp"
                        alt="Generic placeholder image" />
                      <mdb-media-body class=" text-center text-md-left ml-md-3 ml-0">
                        <h5 class="mt-0 font-weight-bold">Title of the news</h5>
                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
                        ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                      </mdb-media-body>
                    </mdb-media>
                  </mdb-media-body>
                </mdb-media>
                <mdb-media class="media d-block d-md-flex mt-3">
                  <mdb-media-image class="d-flex mb-3 mx-auto media-image z-depth-1" src="https://mdbootstrap.com/img/Others/documentation/img (107)-mini.webp"
                    alt="Generic placeholder image" />
                  <mdb-media-body class="text-center text-md-left ml-md-3 ml-0">
                    <h5 class="mt-0 font-weight-bold">Title of the news</h5>
                    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt.
                    <mdb-media class="media d-block d-md-flex mt-3">
                      <mdb-media-image class="d-flex mb-3 mx-auto media-image z-depth-1" src="https://mdbootstrap.com/img/Others/documentation/img (96)-mini.webp"
                        alt="Generic placeholder image"/>
                      <mdb-media-body class="media-body text-center text-md-left ml-md-3 ml-0">
                        <h5 class="mt-0 font-weight-bold">Title of the news</h5>
                        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
                        tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
                      </mdb-media-body>
                    </mdb-media>
                  </mdb-media-body>
                </mdb-media>
              </div>
            </template>

        
            
            <script>
              import {mdbMedia, mdbMediaBody, mdbMediaImage } from 'mdbvue';
              export default {
                components: {
                  mdbMedia,
                  mdbMediaBody,
                  mdbMediaImage
                }
              }
            </script>

        
            
            <style>
              @media (min-width: 768px) {
                .media .media-image {
                    width: 100px;
                }
              }

              @media (max-width: 767px) {
                .media .media-image {
                    width: 250px;
                }
              }
            </style>

Media list with reviews

Present reviews with ratings from a particular user with media list.

Anna Smith

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.
Tom Brown

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.
Natalie Doe

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.

Show code

template
script

        
            
            <template>
              <ul class="list-unstyled">
                <mdb-media tag="li">
                  <mdb-media-image class="d-flex mr-3" src="https://mdbootstrap.com/img/Photos/Others/avatar-min1.webp" alt="Generic placeholder image" />
                  <mdb-media-body>
                    <h5 class="mt-0 mb-2 font-weight-bold">Anna Smith</h5>
                    <!--Review-->
                    <mdb-icon icon="star" class="blue-text" />
                    <mdb-icon icon="star" class="blue-text" />
                    <mdb-icon icon="star" class="blue-text" />
                    <mdb-icon icon="star" class="blue-text" />
                    <mdb-icon icon="star" class="blue-text" />
                    <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>
                  </mdb-media-body>
                </mdb-media>
                <mdb-media tag="li" class="my-4">
                  <mdb-media-image class="d-flex mr-3" src="https://mdbootstrap.com/img/Photos/Others/avatar-min2.webp" alt="Generic placeholder image" />
                  <mdb-media-body>
                    <h5 class="mt-0 mb-2 font-weight-bold">Tom Brown</h5>
                    <!--Review-->
                    <mdb-icon icon="star" class="blue-text" />
                    <mdb-icon icon="star" class="blue-text" />
                    <mdb-icon icon="star" class="blue-text" />
                    <mdb-icon icon="star" class="blue-text" />
                    <mdb-icon icon="star" class="grey-text" />
                    <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>
                  </mdb-media-body>
                </mdb-media>
                <mdb-media tag="li">
                  <mdb-media-image class="d-flex mr-3" src="https://mdbootstrap.com/img/Photos/Others/avatar-min3.webp" alt="Generic placeholder image" />
                  <mdb-media-body>
                    <h5 class="mt-0 mb-2 font-weight-bold">Natalie Doe</h5>
                    <!--Review-->
                    <mdb-icon icon="star" class="blue-text" />
                    <mdb-icon icon="star" class="blue-text" />
                    <mdb-icon icon="star" class="blue-text" />
                    <mdb-icon icon="star" class="grey-text" />
                    <mdb-icon icon="star" class="grey-text" />
                    <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>
                  </mdb-media-body>
                </mdb-media>
              </ul>
            </template>

        
            
            <script>
              import {mdbMedia, mdbMediaBody, mdbMediaImage, mdbIcon } from 'mdbvue';
              export default {
                components: {
                  mdbMedia,
                  mdbMediaBody,
                  mdbMediaImage,
                  mdbIcon
                }
              }
            </script>