The media object classes available are:
Bootstrap spacing is used to controlled padding and margin.
Left and Right Alignment
<div class="media-left"> <img src="..."> </div> <div class="media-body"> Content to be placed </div>
<!DOCTYPE html> <html lang="en"> <head> <!-- Link Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <!-- Link Bootstrap JS and JQuery --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <title>Bajarangi soft Bootstrap Example</title> </head> <body> <div class="container"> <h2>Media Object</h2> <!-- Left-aligned media object --> <div class="media"> <div class="media-left"> <img src="logo.jpg" class="media-object" style="width:60px"> </div> <div class="media-body"> <h4 class="media-heading"> Left-aligned </h4> <p> Use the "media-left" class to left-align a media object. Text that should appear next to the image, is placed inside a container with class="media-body" </p> </div> </div> <hr> <!-- Right-aligned media object --> <div class="media"> <div class="media-body"> <h4 class="media-heading"> Right-aligned </h4> <p> Use the "media-right" class to right-align the media object. Text that should appear next to the image, is placed inside a container with class="media-body" </p> </div> <div class="media-right"> <img src="logo.jpg" class="media-object" style="width:60px"> </div> </div> </div> </body> </html>
Top, Middle or Bottom Alignment:
<div class="media-top"> <img src="..."> </div> <div class="media-body"> Content to be placed </div>
<!DOCTYPE html> <html> <head> <!-- Link Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <!-- Link Bootstrap JS and JQuery --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <title>bajarangi Bootstrap Example</title> </head> <body> <div class="container"> <h3>Media Object</h3> <br> <div class="media"> <img class="align-self-start mr-3" src="logo.jpg" alt="Generic placeholder image" style="width:80px"> <div class="media-body"> <h6 class="media-heading"> Media Top </h6> <p> The media object can be aligned to top, middle or bottom. </p> <ul> <li> Use the "media-top" class to top-align a media object. </li> <li> Use the "media-middle" class to middle-align a media object. </li> <li> Use the "media-bottom" class to bottom-align a media object. </li> </ul> </div> </div> <div class="media"> <img class="align-self-center mr-3" src="logo.jpg" alt="Generic placeholder image" style="width:80px"> <div class="media-body"> <h6 class="media-heading">Media Top</h6> <p> The media object can be aligned to top, middle or bottom. </p> <ul> <li> Use the "media-top" class to top-align a media object. </li> <li> Use the "media-middle" class to middle-align a media object. </li> <li> Use the "media-bottom" class to bottom-align a media object. </li> </ul> </div> </div> <div class="media"> <img class="align-self-end mr-3" src="logo.jpg" alt="Generic placeholder image" style="width:80px"> <div class="media-body"> <h6 class="media-heading">Media Top</h6> <p> The media object can be aligned to top, middle or bottom. </p> <ul> <li> Use the "media-top" class to top-align a media object. </li> <li> Use the "media-middle" class to middle-align a media object. </li> <li> Use the "media-bottom" class to bottom-align a media object. </li> </ul> </div> </div> </div> </body> </html>