Bootstrap 5 Flex Media object

Last Updated : 19 Dec, 2022

Bootstrap 5 Flex Media object class can be used to align images or videos to the left or right with content in an easy and efficient manner. The Bootstrap Flex Media object is used where some data is positioned alongside content to build up complicated.

Bootstrap 5 Flex Media object classes: There is no pre-defined class for flex media objects we can use the Bootstrap 5 Flex Grow and shrink classes.

Note: The ‘*‘ can be replaced by 1 or 0, and ** can be replaced by sm/md/lg/xl/xxl screen sizes.

Syntax:

 <div class="d-flex">
    <div class="flex-shrink-0">
        <img src="...">
    </div>
    <div class="flex-grow-1">
        ...
    </div>
</div>

Example 1: In this example, we set the text content aligned with the image using Flex Media object classes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
               content="IE=edge"> 
    <meta name="viewport" content= 
"width=device-width, initial-scale=1.0"> 
  
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
        rel="stylesheet">     
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="container"> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <h5>Bootstrap 5 Flex Media object </h5> 
    </div> 
    <div class="d-flex flex-nowrap  
            justify-content-center  
            border mx-5 w-50 mt-4"> 
        <div class="flex-shrink-0"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20221129215205/gfg.png"> 
        </div> 
        <div class="flex-grow-1"> 
            An image is a visual representation of something. 
            GFG a Computer Science portal for geeks. 
            It contains well written, well thought and  
            well explained computer science and programming. 
        </div> 
    </div> 
</body> 
</html>

Output:

Example 2: In this example, we set the text content at the center next to the image.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
  
     <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"> 
      
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"> 
    </script> 
  
</head> 
  
<body> 
    <div class="container"> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <h5>Bootstrap 5 Flex Media object </h5> 
    </div> 
    <div class="d-flex align-items-center  
                border mx-4 w-50 mt-3"> 
        <div class="flex-md-shrink-0"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20221129215205/gfg.png"> 
        </div> 
        <div class="flex-md-grow-1"> 
            An image is a visual representation of something. 
            This is some content center next to the image.  
            GFG a Computer Science portal for geeks. 
        </div> 
    </div> 
</body> 
</html>