Objeto de mídia

Documentação e exemplos para o objeto de mídia Bootstrap, construído para componentes repetitivos como comentários de blog, tweets, etc.

Exemplo

O objeto de mídia ajuda construir componentes complexos e repetitivos, onde alguma mídia é posicionada ao lado do conteúdo. Além do mais, isso é possível só com duas classes, graças ao flexbox.

Abaixo, temos um exemplo de um objeto de mídia. Apenas duas classes são necessárias (o elemento pai .media e o corpo .media-body), em volta de seus conteúdos. Margem e padding adicionais podem ser usados com utilitários de espaçamento.

Cabeçalho da mídia

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 class="media">
  <img class="mr-3" src=".../64x64" alt="Imagem de exemplo genérica">
  <div class="media-body">
    <h5 class="mt-0">Cabeçalho da mídia</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.
  </div>
</div>

Flexbug #12: Elementos inline não são tratados como flex items

Internet Explorer 10-11 não renderiza elementos inline, como links ou imagens (ou pseudo-elementos ::before e ::after), como flex items. A única solução é definir um valor não-inline display (block, inline-block ou flex). Nós sugerimos usar .d-flex, um de nossos utilitários display, como uma solução fácil.

Fonte: Flexbugs no GitHub

Aninhamento

Objetos de mídia podem ser aninhados infinitamente, apesar de sugerirmos que você pare, em algum ponto. Coloque .media aninhado dentro do .media-body de um objeto mídia pai aninhado.

Cabeçalho da mídia

<div class="media">
  <img class="mr-3" src=".../64x64" alt="Imagem de exemplo genérica">
  <div class="media-body">
    <h5 class="mt-0">Cabeçalho da mídia</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.

    <div class="media mt-3">
      <a class="pr-3" href="#">
        <img src=".../64x64" alt="Imagem de exemplo genérica">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Cabeçalho da mídia</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.
      </div>
    </div>
  </div>
</div>

Alinhamento

A mídia, em um objeto de mídia, pode ser alinhada com utilitários flexbox na parte superior, meio ou fim do conteúdo do .media-body.

Mídia alinhada ao topo

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.

<div class="media">
  <img class="align-self-start mr-3" src=".../64x64" alt="Imagem de exemplo genérica">
  <div class="media-body">
    <h5 class="mt-0">Mídia alinhada ao topo</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>
  </div>
</div>

Mídia centralizada

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.

<div class="media">
  <img class="align-self-center mr-3" src=".../64x64" alt="Imagem de exemplo genérica">
  <div class="media-body">
    <h5 class="mt-0">Mídia centralizada</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>
  </div>
</div>

Mídia alinhada na parte inferior

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.

<div class="media">
  <img class="align-self-end mr-3" src=".../64x64" alt="Imagem de exemplo genérica">
  <div class="media-body">
    <h5 class="mt-0">Mídia alinhada na parte inferior</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>
  </div>
</div>

Ordem

Altere a ordem do conteúdo, em objetos de mídia, modificando o próprio HTML ou usando algum CSS flexbox customizado para definir o valor da propriedade order em um número inteiro de sua escolha.

Objeto mídia

<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Objeto mídia</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.
  </div>
  <img class="ml-3" src=".../64x64" alt="Imagem de exemplo genérica">
</div>

Lista de mídia

Devido as poucas exigências do objeto de mídia, você também pode usar estas classes em elementos HTML de lista. Em seu <ul> ou <ol>, use a classe .list-unstyled para remover qualquer estilo de lista padrão e, então, aplique .media no seu <li>. Como sempre: use utilitários de espaçamento, onde quer que precise.

Objeto de mídia baseado em lista
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.
Objeto de mídia baseado em lista
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.
Objeto de mídia baseado em lista
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.

<ul class="list-unstyled">
  <li class="media">
    <img class="mr-3" src=".../64x64" alt="Imagem de exemplo genérica">
    <div class="media-body">
      <h5 class="mt-0 mb-1">Objeto de mídia baseado em lista</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.
    </div>
  </li>
  <li class="media my-4">
    <img class="mr-3" src=".../64x64" alt="Imagem de exemplo genérica">
    <div class="media-body">
      <h5 class="mt-0 mb-1">Objeto de mídia baseado em lista</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.
    </div>
  </li>
  <li class="media">
    <img class="mr-3" src=".../64x64" alt="Imagem de exemplo genérica">
    <div class="media-body">
      <h5 class="mt-0 mb-1">Objeto de mídia baseado em lista</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.
    </div>
  </li>
</ul>