Bootstrap 5 Flex Media object Last Updated : 29 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/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> Output: Reference: https://getbootstrap.com/docs/5.0/utilities/flex/#media-object Comment More infoAdvertise with us Next Article Bootstrap 4 | Media Objects B bulbultomar Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads Bootstrap 4 | Media Objects The Bootstrap Media Objects like images or videos can be aligned to the left or right with content in an easy and efficient manner. The Bootstrap Media Objects are used where some data is positioned alongside content to build up complicated and recursive components of the content.Basic Media Object: 4 min read Bootstrap 5 Flex Order Bootstrap 5 Flex order class can be used to set the order of the flex items inside the flex irrespective of their position in the DOM. We have to select options to make an item first or the last remaining items will follow the order. The order takes integer values from 0-5 and some custom values are 2 min read Media Objects in Bootstrap with Examples The Bootstrap Media Objects like images or videos can be aligned to the left or to the right of some content in an easy and efficient manner.The Bootstrap Media Objects are used where some data is positioned alongside content to build up complicated and recursive components of the content.The media 5 min read Bootstrap 5 Flex Wrap Bootstrap 5's flex-wrap utility enables flexible layout control, allowing items to wrap as needed within a flex container. It offers options like nowrap, wrap, and wrap-reverse for responsive design.Bootstrap 5 Flex Wrap Classes:CSS ClassDescriptionflex-wrapChanges how flex items wrap in a flex cont 2 min read Bootstrap 5 Flex Bootstrap 5 Flex offers utility classes for creating flexible layouts using Flexbox, ensuring responsiveness across screen sizes. To start, wrap desired elements in a flex container with classes like .container or .row. Then, use flex utility classes to control item layout. AspectDescriptionFlex Dir 3 min read React-Bootstrap Media Component React-Bootstrap is a front-end framework that was designed keeping react in mind. Media Component provides a way to hold images and text as it is a container designed for that purpose only. We can use the following approach in ReactJS to use the react-bootstrap Media Component. Media Props: as: It c 2 min read Like