Rate this docs

React Bootstrap Media object

React Media - Bootstrap 4 & Material Design

React Bootstrap media provides you with various ways of presenting images and videos to your audience thanks to Bootstrap way of handling those elements.

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.

Generic placeholder image
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.

            import React from 'react';
            import { MDBMedia } from 'mdbreact';

            const MediaObjectPage = () => {
              return (
                <MDBMedia>
                  <MDBMedia left className="mr-3" href="#">
                    <MDBMedia object src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" alt="" />
                  </MDBMedia>
                  <MDBMedia body>
                    <MDBMedia heading>
                      Media heading
                  </MDBMedia>
                    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.
                </MDBMedia>
                </MDBMedia>
              );
            }

            export default MediaObjectPage;
          

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.

Generic placeholder image
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.
Generic placeholder image
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.

              import React from 'react';
              import { MDBMedia } from 'mdbreact';
              
              const MediaObjectPage = () => {
                return (
                  <MDBMedia>
                    <MDBMedia left href="#" className="mr-3">
                      <MDBMedia object src="https://mdbootstrap.com/img/Photos/Others/placeholder4.jpg" alt="Generic placeholder image" />
                    </MDBMedia>
                    <MDBMedia body>
                      <MDBMedia heading>
                        Media heading
                      </MDBMedia>
                      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                      <MDBMedia className="mt-3">
                        <MDBMedia left href="#" className="pr-3">
                          <MDBMedia object src="https://mdbootstrap.com/img/Photos/Others/placeholder4.jpg" alt="Generic placeholder image" />
                        </MDBMedia>
                        <MDBMedia body>
                          <MDBMedia heading>
                            Nested media heading
                          </MDBMedia>
                          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                        </MDBMedia>
                      </MDBMedia>
                    </MDBMedia>
                  </MDBMedia>
                );
              }
              
              export default MediaObjectPage;             
          

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

Generic placeholder image
Top-aligned media

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.

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.


              import React from 'react';
              import { MDBMedia } from 'mdbreact';

              const MediaObjectPage = () => {
                return (
                  <MDBMedia>
                    <MDBMedia left top className="mr-3" href="#">
                      <MDBMedia object src="https://mdbootstrap.com/img/Photos/Others/placeholder6.jpg" alt="Generic placeholder image" />
                    </MDBMedia>
                    <MDBMedia body>
                      <MDBMedia heading>
                        Top-aligned media
                      </MDBMedia>
                      <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>
                    </MDBMedia>
                  </MDBMedia>
                );
              }

              export default MediaObjectPage;
          

Center-aligned media

Generic placeholder image
Center-aligned media

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.

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.


              import React from 'react';
              import { MDBMedia } from 'mdbreact';

              const MediaObjectPage = () => {
                return (
                  <MDBMedia>
                    <MDBMedia left middle className="mr-3" href="#">
                      <MDBMedia object src="https://mdbootstrap.com/img/Photos/Others/placeholder6.jpg" alt="Generic placeholder image" />
                    </MDBMedia>
                    <MDBMedia body>
                      <MDBMedia heading>
                        Top-aligned media
                      </MDBMedia>
                      <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>
                    </MDBMedia>
                  </MDBMedia>
                );
              }

              export default MediaObjectPage;
          

Bottom-aligned media

Generic placeholder image
Bottom-aligned media

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.

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.


              import React from 'react';
              import { MDBMedia } from 'mdbreact';
              
              const MediaObjectPage = () => {
                return (
                  <MDBMedia>
                    <MDBMedia left bottom className="mr-3" href="#">
                      <MDBMedia object src="https://mdbootstrap.com/img/Photos/Others/placeholder6.jpg" alt="Generic placeholder image" />
                    </MDBMedia>
                    <MDBMedia body>
                      <MDBMedia heading>
                        Top-aligned media
                      </MDBMedia>
                      <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>
                    </MDBMedia>
                  </MDBMedia>
                );
              }
              
              export default MediaObjectPage;             
          

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
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.
Generic placeholder image

              import React from 'react';
              import { MDBMedia } from 'mdbreact';
              
              const MediaObjectPage = () => {
                return (
                  <MDBMedia>
                    <MDBMedia body>
                      <MDBMedia heading>
                        Media object
                      </MDBMedia>
                      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.
                    </MDBMedia>
                    <MDBMedia right className="ml-3" href="#">
                      <MDBMedia object src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" alt="Generic placeholder image" />
                    </MDBMedia>
                  </MDBMedia>
                );
              }
              
              export default MediaObjectPage;              
          

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.

  • Generic placeholder image
    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.
  • Generic placeholder image
    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.
  • Generic placeholder image
    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.


              import React from 'react';
              import { MDBMedia } from 'mdbreact';
              
              const MediaObjectPage = () => {
                return (
                  <MDBMedia list className="mt-3">
                    <MDBMedia tag="li">
                      <MDBMedia left href="#">
                        <MDBMedia object src="https://mdbootstrap.com/img/Photos/Others/placeholder7.jpg" alt="Generic placeholder image" />
                      </MDBMedia>
                      <MDBMedia body>
                        <MDBMedia heading>
                          List-based media object
                        </MDBMedia>
                        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.
                        </MDBMedia>
                    </MDBMedia>
                    <MDBMedia tag="li">
                      <MDBMedia left href="#">
                        <MDBMedia object src="https://mdbootstrap.com/img/Photos/Others/placeholder6.jpg" alt="Generic placeholder image" />
                      </MDBMedia>
                      <MDBMedia body>
                        <MDBMedia heading>
                          List-based media object
                        </MDBMedia>
                        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.
                      </MDBMedia>
                    </MDBMedia>
                    <MDBMedia tag="li">
                      <MDBMedia left href="#">
                        <MDBMedia object src="https://mdbootstrap.com/img/Photos/Others/placeholder5.jpg" alt="Generic placeholder image" />
                      </MDBMedia>
                      <MDBMedia body>
                        <MDBMedia heading>
                          List-based media object
                        </MDBMedia>
                        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.
                      </MDBMedia>
                    </MDBMedia>
                  </MDBMedia>
                );
              }
              
              export default MediaObjectPage;
              

          

Responsive media object

Generic placeholder image
Title of the news
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.
Generic placeholder image
Title of the news
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.
Generic placeholder image
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.
Generic placeholder image
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.

              import React from 'react';
              import { MDBMedia } from 'mdbreact';
              
              const MediaObjectPage = () => {
                return (
                  <>
                    <MDBMedia>
                      <MDBMedia left href="#" className="mr-3">
                        <img className="media-image" src="https://mdbootstrap.com/img/Others/documentation/img (1)-mini.jpg" alt="" />
                      </MDBMedia>
                      <MDBMedia body>
                        <MDBMedia heading>
                          Title of the news
                      </MDBMedia>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                      <MDBMedia className="mt-3">
                          <MDBMedia left href="#" className="pr-3">
                            <img className="media-image" src="https://mdbootstrap.com/img/Others/documentation/img (107)-mini.jpg" alt="" />
                          </MDBMedia>
                          <MDBMedia body>
                            <MDBMedia heading>
                              Title of the news
                          </MDBMedia>
                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                        </MDBMedia>
                        </MDBMedia>
                      </MDBMedia>
                    </MDBMedia>
                    <MDBMedia>
                      <MDBMedia left href="#" className="mr-3">
                        <img className="media-image" src="https://mdbootstrap.com/img/Others/documentation/img (96)-mini.jpg" alt="" />
                      </MDBMedia>
                      <MDBMedia body>
                        <MDBMedia heading>
                          Title of the news
                        </MDBMedia>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                        <MDBMedia className="mt-3">
                          <MDBMedia left href="#" className="pr-3">
                            <img className="media-image" src="https://mdbootstrap.com/img/Others/documentation/img (101)-mini.jpg" alt="" />
                          </MDBMedia>
                          <MDBMedia body>
                            <MDBMedia heading>
                              Title of the news
                            </MDBMedia>
                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                          </MDBMedia>
                        </MDBMedia>
                      </MDBMedia>
                    </MDBMedia>
                  </>
                );
              }
              
              export default MediaObjectPage;
          

Media list with reviews

  • Generic placeholder image
    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.

  • Generic placeholder image
    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.

  • Generic placeholder image
    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.


              import React from 'react';
              import { MDBMedia, MDBIcon } from 'mdbreact';

              const MediaObjectPage = () => {
                return (
                  <MDBMedia list className="mt-3">
                    <MDBMedia tag="li">
                      <MDBMedia left href="#">
                        <MDBMedia object src="https://mdbootstrap.com/img/Photos/Others/avatar-min1.jpg" alt="Generic placeholder image" />
                      </MDBMedia>
                      <MDBMedia body>
                        <MDBMedia heading>
                          Anna Smith
                          </MDBMedia>
                        <MDBIcon icon="star" className="blue-text" />
                        <MDBIcon icon="star" className="blue-text" />
                        <MDBIcon icon="star" className="blue-text" />
                        <MDBIcon icon="star" className="blue-text" />
                        <MDBIcon icon="star" className="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>
                      </MDBMedia>
                    </MDBMedia>
                    <MDBMedia tag="li">
                      <MDBMedia left href="#">
                        <MDBMedia object src="https://mdbootstrap.com/img/Photos/Others/avatar-min2.jpg" alt="Generic placeholder image" />
                      </MDBMedia>
                      <MDBMedia body>
                        <MDBMedia heading>
                          Anna Smith
                          </MDBMedia>
                        <MDBIcon icon="star" className="blue-text" />
                        <MDBIcon icon="star" className="blue-text" />
                        <MDBIcon icon="star" className="blue-text" />
                        <MDBIcon icon="star" className="grey-text" />
                        <MDBIcon icon="star" className="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>
                      </MDBMedia>
                    </MDBMedia>
                    <MDBMedia tag="li">
                      <MDBMedia left href="#">
                        <MDBMedia object src="https://mdbootstrap.com/img/Photos/Others/avatar-min3.jpg" alt="Generic placeholder image" />
                      </MDBMedia>
                      <MDBMedia body>
                        <MDBMedia heading>
                          Natalie Doe
                          </MDBMedia>
                        <MDBIcon icon="star" className="blue-text" />
                        <MDBIcon icon="star" className="blue-text" />
                        <MDBIcon icon="star" className="blue-text" />
                        <MDBIcon icon="star" className="blue-text" />
                        <MDBIcon icon="star" className="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>
                      </MDBMedia>
                    </MDBMedia>
                  </MDBMedia>
                );
              }

              export default MediaObjectPage;