Bootstrap: Media

Media Object

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

  • 64x64

    Media Heading

    64x64

    Nested Media Heading

    64x64

    Nested Media Heading

    64x64

    Nested Media Heading

  • 64x64

    Media Heading

<MediaList>
  <Media>
    <a className='pull-left' href='#'>
      <MediaObject data-src='holder.js/64x64/random' alt='64x64' />
    </a>
    <MediaBody>
      <MediaHeading>Media Heading</MediaHeading>
      <LoremIpsum query='4s' />
      <MediaDiv>
        <a className='pull-left' href='#'>
          <MediaObject data-src='holder.js/64x64/random' alt='64x64' />
        </a>
        <MediaBody>
          <MediaHeading>Nested Media Heading</MediaHeading>
          <LoremIpsum query='4s' />
          <MediaDiv>
            <a className='pull-left' href='#'>
              <MediaObject data-src='holder.js/64x64/random' alt='64x64' />
            </a>
            <MediaBody>
              <MediaHeading>Nested Media Heading</MediaHeading>
              <LoremIpsum query='4s' />
            </MediaBody>
          </MediaDiv>
        </MediaBody>
        <MediaDiv>
          <a className='pull-left' href='#'>
            <MediaObject data-src='holder.js/64x64/random' alt='64x64' />
          </a>
          <MediaBody>
            <MediaHeading>Nested Media Heading</MediaHeading>
            <LoremIpsum query='4s' />
          </MediaBody>
        </MediaDiv>
      </MediaDiv>
    </MediaBody>
  </Media>
  <Media>
    <a className='pull-left' href='#'>
      <MediaObject data-src='holder.js/64x64/random' alt='64x64' />
    </a>
    <MediaBody>
      <MediaHeading>Media Heading</MediaHeading>
      <LoremIpsum query='4s' />
    </MediaBody>
  </Media>
</MediaList>