Bootstrap Media Objects







googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });



Bootstrap Media Objects



❮ Previous
Next ❯


Media Objects


Bootstrap provides an easy way to align media objects (like images or videos) to the left or to the right of some content. This can be used to
display blog comments, tweets and so on:






Demo Avatar John Doe


John Doe Posted on February 19, 2016


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.




Demo Avatar Jane Doe


Jane Doe Posted on February 20, 2016


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.









Alicia Keyes Posted on February 25, 2016


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla vel metus scelerisque ante sollicitudin commodo.




Demo Avatar Alicia Keyes






Basic Media Object





Demo Avatar John Doe Blank


John Doe


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.







John Doe


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.





Demo Avatar John Doe Blank





Example



<!-- Left-aligned -->
<div class="media">
  <div class="media-left">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">John Doe</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

<!-- Right-aligned -->
<div class="media">
  <div class="media-body">
    <h4 class="media-heading">John Doe</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="media-right">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
</div>

Try it Yourself »

Example explained


Use a <div> element with the .media class to create a container for
media objects.


Use the .media-left class to align the media
object (image) to the left, or the .media-right class to align it to the right.


Text that should appear next to the image, is placed inside a container with class="media-body".


Additionally, you can use .media-heading for
headings.








googletag.cmd.push(function() { googletag.display('div-gpt-ad-1493883843099-0'); });





Top, Middle or Bottom Alignment


The media object can also be top, middle or bottom aligned with the media-top, media-middle or media-bottom class:





Demo Avatar John Doe Blank


Media Top


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.







Demo Avatar John Doe Blank


Media Middle


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.







Demo Avatar John Doe Blank


Media Bottom


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.







Example



<!-- Media top -->
<div class="media">
  <div class="media-left media-top">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media Top</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

<!-- Media middle -->
<div class="media">
  <div class="media-left media-middle">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media Middle</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

<!-- Media bottom -->
<div class="media">
  <div class="media-left media-bottom">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media Bottom</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

Try it Yourself »


Nesting Media Objects


Media objects can also be nested (a media object inside a media object):



Example





Demo Avatar John Doe Blank


John Doe Posted on February 19, 2016


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.




Demo Avatar John Doe Green


John Doe Posted on February 20, 2016


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.




Demo Avatar John Doe Blue


John Doe Posted on February 21, 2016


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.








Try it Yourself »


Another Example of Nesting



Example





Demo Avatar John Doe Blank


John Doe Posted on February 19, 2016


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.






Demo Avatar John Doe Green


John Doe Posted on February 20, 2016


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.






Demo Avatar John Doe Blue


John Doe Posted on February 21, 2016


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.










Demo Avatar Jane Doe Green


Jane Doe Posted on February 20, 2016


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.











Demo Avatar Jane Doe Red


Jane Doe Posted on February 19, 2016


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.







Try it Yourself »




❮ Previous
Next ❯

-

Popular posts from this blog

Colors HSL

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Colors HSL ❮ Previous Next ❯ HSL Calculator   rgb(255, 0, 0) #ff0000 H: S: L: HSL Colors HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+. HSL stands for hue, saturation, and lightness. HSL color values are specified with: hsl( hue , saturation , lightness ) . Hue Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Saturation Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness Lightness is also a percentage; 0% is black, 100% is white. function submitOnEnter(e) { keyboardKey = e.which || e.keyCode; if (keyboardKey == 13) { setFullColor(); } } function clickHue(hue) { var h = document.getElementById("hue01"); h.v...
Read more

W3.CSS Downloads

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> W3.CSS Downloads ❮ Previous Next ❯ Download W3.CSS Download W3.CSS from this link: https://www.w3schools.com/w3css/4/w3.css W3.CSS is Free W3.CSS is free to use. No license is necessary. How To use W3.CSS To use W3.CSS, just add a link to "w3.css" in your web pages: Example <!DOCTYPE html> <html> <title>My Web</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> Try It Yourself » Or download w3.css and run it from your own web site: Example <!DOCTYPE html> <html> <title>My Web</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="w3.css"> If you put w3....
Read more

W3.CSS Tables

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> W3.CSS Tables ❮ Previous Next ❯ First Name Last Name Points Jill Smith 50 Eve Jackson 94 Adam Johnson 67 Bo Nilsson 50 Mike Ross 35 W3.CSS Table Classes W3.CSS provides the following classes for tables: Class Defines w3-table Container for an HTML table w3-striped Striped table w3-border Bordered table w3-bordered Bordered lines w3-centered Centered table content w3-hoverable Hoverable table w3-table-all All properties set Basic Table The w3-table class is used to display a basic table: First Name Last Name Points Jill Smith 50 Eve Jackson 94 Adam Johnson 67 Example <table class="w3-table"> <tr>   <th>First Name</th>   <th>Last Name</th>   <th>Points</th> </tr> <tr>   <td>Jill</td>   <td>Smith</td>   <td>50</...
Read more