Align media objects with Bootstrap

Bootstrap Web Development CSS Framework

To align media objects, use the .align class in Bootstrap. You can try to run the following code to implement the .align class.

Use the .align-left class to align media to the left −

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class = "container">
         <h2>Google Tag Manager Tutorial</h2>
         <div class = "media">
            <div class = "media-left">
               <img src = "https://www.tutorialspoint.com/latest/Google-Tag-Manager.png" class="media-object" style="width:60px">
            </div>
            <div class = "media-body">
               <h4 class = "media-heading">Introduction</h4>
               <p>Google Tag Manager (GTM) is a free tool that makes it easy for marketers to add and update website tags.</p>
            </div>
         </div>
      </div>
   </body>
</html>

Ankith Reddy

Updated on: 15-Jun-2020

110 Views

Kickstart Your Career

Get certified by completing the course

Get Started