React Bootstrap Media object

React 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

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.

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

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

Media heading

Show code

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

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

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

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

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

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

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

Show code

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

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

        
            

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

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.

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.

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

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

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

        
            
                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.webp" 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.webp" 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.webp" 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;

React Bootstrap Media object

React Media - Bootstrap 4 & Material Design

Example

Media heading

Nesting

Media heading

Media heading

Alignment

Top-aligned media

Top-aligned media

Center-aligned media

Center-aligned media

Bottom-aligned media

Bottom-aligned media

Order

Media object

Media list

List-based media object

List-based media object

List-based media object

Responsive media object

Title of the news

Title of the news

Title of the news

Title of the news

Media list with reviews

Anna Smith

Tom Brown

Natalie Doe