Media Objects

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

Single media object

The media object helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media.

Preview

Jsx

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';
const SingleMediaObject = () => {
  return (
    <div className="media">
        <div className="media-head me-3">
            <Image roundedCircle className="d-9" src={avatar9} alt="Generic placeholder img" />
        </div>
        <div className="media-body">
            <h6 className="mb-2">Media Heading</h6> 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.
        </div>
    </div>
  );
}

export default SingleMediaObject;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

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.

Preview

Jsx

Media heading

Media Heading

import React from 'react';
import { Image } from 'react-bootstrap';

//images
import avatar8 from '../../../Assets/dist/img/avatar8.jpg';
import avatar9 from '../../../Assets/dist/img/avatar9.jpg';

const NestedMediaObjects = () => {
  return (
    <div className="media">
        <div className="media-head me-3">
            <Image roundedCircle className="d-9" src={avatar8} alt="Generic placeholder img" />
        </div>
        <div className="media-body">
            <h6 className="mb-2">Media heading</h6> 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.
            <div className="media mt-5">
                <div className="media-head me-3">
                    <Image roundedCircle className="d-9" src={avatar9} alt="Generic placeholder img" />
                </div>
                <div className="media-body">
                    <h6 className="mb-2">Media Heading</h6> 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.
                </div>
            </div>
        </div>
    </div>
  );
}

export default NestedMediaObjects;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Alignment

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

Preview

Jsx

Media Heading

import React from 'react';
import { Image } from 'react-bootstrap';
//images
import avatar9 from '../../../Assets/dist/img/avatar9.jpg';

const Alignments = () => {
  return (
    <div className="media mb-5">
        <div className="media-head me-3">
            <Image roundedCircle className="d-9" src={avatar9} alt="Generic placeholder img" />
        </div>
        <div className="media-body">
            <h6 className="mb-2">Media Heading</h6> 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.
        </div>
    </div>
    <div className="media align-items-center mb-5">
        <div className="media-head me-3">
            <Image roundedCircle className="d-9" src={avatar9} alt="Generic placeholder img" />
        </div>
        <div className="media-body">
            <h6 className="mb-2">Media Heading</h6> 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.
        </div>
    </div>
    <div className="media align-items-end">
        <div className="media-head me-3">
            <Image roundedCircle className="d-9" src={avatar9} alt="Generic placeholder img" />
        </div>
        <div className="media-body">
            <h6 className="mb-2">Media Heading</h6> 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.
        </div>
    </div>
  );
}

export default Alignments;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Single media object
Nesting
Alignment