Media object Bootstrap

Les medias objects permettent d'afficher un objet multimédia (images, vidéo, audio) calé à gauche ou à droite d'un bloc de texte.

     
    <div class="media">

      <div class="media-left">

        <a href="#" title="Media object">

          <img class="media-object" src="images/photo01.jpg" alt="Nature">  

        </a>

      </div>

      <div class="media-body">

        <h4 class="media-heading">Media heading</h4>

        Iudicem distinguantur ut mandaremus eu irure ex litteris an legam. Summis aliquip quo velit nisi, ne lorem doctrina excepteur et officia minim nisi ingeniis sunt, eram eu mentitum et velit.

      </div>

    </div>

Exemple

Media heading

Iudicem distinguantur ut mandaremus eu irure ex litteris an legam. Summis aliquip quo velit nisi, ne lorem doctrina excepteur et officia minim nisi ingeniis sunt, eram eu mentitum et velit.

Aligné à droite

Il faudra remplacer la classe .media-left par .media-right.

Il faut placer la balise div avec la classe .media-right après la balise div contenant la .media-body


    <div class="media">

      <div class="media-body">

        <h4 class="media-heading">Media heading</h4>

        Iudicem distinguantur ut mandaremus eu irure ex litteris an legam. Summis aliquip quo velit nisi, ne lorem doctrina excepteur et officia minim nisi ingeniis sunt, eram eu mentitum et velit.

      </div>

    
      <div class="media-right">

        <a href="#" title="Media object">

          <img class="media-object" src="images/photo01.jpg" alt="Nature">  

        </a>

      </div>

      
    </div>

Exemple

Media heading

Iudicem distinguantur ut mandaremus eu irure ex litteris an legam. Summis aliquip quo velit nisi, ne lorem doctrina excepteur et officia minim nisi ingeniis sunt, eram eu mentitum et velit.

Alignement vertical

Les images peuvent être alignées sur la verticale avec les classes : .media-top, .media-middle, .media-bottom.

     
    <div class="media">

      <div class="media-left media-middle">

        <a href="#" title="Media object">

          <img class="media-object" src="images/photo01.jpg" alt="Nature">  

        </a>

      </div>

      <div class="media-body">

        <h4 class="media-heading">Media heading</h4>

        Iudicem distinguantur ut mandaremus eu irure ex litteris an legam. Summis aliquip quo velit nisi, ne lorem doctrina excepteur et officia minim nisi ingeniis sunt, eram eu mentitum et velit.

      </div>

    </div>

Exemple

Media heading avec la classe .media-middle

Amet expetendis eu exquisitaque quo nam a summis dolore magna, proident fore cernantur appellat, id tempor de possumus si ex non sempiternum, fore possumus aut comprehenderit, illum offendit non voluptate iis aut enim despicationes. Velit quibusdam o imitarentur, hic ipsum incididunt deserunt ut quae a eiusmod, dolor exercitation eiusmod multos deserunt. Quae aliquip ne aute veniam o eiusmod eruditionem a ullamco, deserunt irure quid aut nulla, noster mentitum ut instituendarum. Ea culpa proident transferrem, excepteur se sunt officia, ab e quem labore quid ad nescius imitarentur eu incididunt. Esse singulis ad irure varias eu duis vidisse qui malis culpa, admodum in culpa laborum nam quamquam id quae expetendis. Proident ex minim, duis comprehenderit cernantur malis vidisse. Tempor quis de deserunt fidelissimae nam minim cohaerescant nescius aute arbitror, et excepteur id excepteur, an nostrud an officia.

Media heading avec la classe media-bottom

Media list


    <ul class="media-list">

      <li class="media">

        <div class="media-left">

          <a href="#">

            <img class="media-object" images/photo01.jpg" alt="Nature">

          </a>

        </div>

        <div class="media-body">

          <h4 class="media-heading">Media heading</h4>

          ...

        </div>

      </li>

    </ul>

Exemple

Media Heading

Lorem ipsum dolor sit amet, consectetur adipis elit…

Nested Media Heading

Vestibulum consectetur scelerisque faucibus…

Nested Media Heading

Integer pulvinar leo id risus tempor…

Nested Media Heading

Phasellus vitae suscipit justo mauris…
Media Heading

Quisque pharetra velit id velit iaculis pretium…

Tutoriel Bootstrap