Bootstrap 5 Flex Fill Last Updated : 22 Jul, 2024 Comments Improve Suggest changes Like Article Like Report Bootstrap 5 Flex fill can be used to force the flex items to take the width according to their content. If the content of any sibling element does not exceed its border, all the flex items with flex fill classes will take up equal widths. Bootstrap 5 Flex Fill Classes:flex-fill: This class is used on the flex items to make them take width according to their content.flex-*-fill: This class is used on the flex items to make them take width according to their content for different screen sizes.Note: '*' can be replaced by sm/md/lg/xl/xxl.Syntax:<div class="d-flex"> <div class="flex-fill class"> ... </div></div>Example 1: In this example, we set the flex fill to force the flex items to take the width according to the content using flex fill 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"> </head> <body class="m-2"> <div class="container text-center "> <h1 class="text-success"> GeeksforGeeks </h1> <h5>Bootstrap 5 flex fill</h5> </div> <div class="d-flex flex-nowrap justify-content-center"> <div class="p-2 flex-fill border bg-light"> Item 1 </div> <div class="p-2 flex-fill border bg-light"> This is the item 2 content </div> <div class="p-2 flex-fill border bg-light"> Item 3 </div> <div class="p-2 flex-fill border bg-light"> Content for Item 4 </div> </div> </body> </html> Output: Example 2: In this example, we set the flex fill to force the flex items to take the width of content to achieve this effect on a large screen size. 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 class="m-2"> <div class="container text-center "> <h1 class="text-success">GeeksforGeeks</h1> <h5>Bootstrap 5 flex fill</h5> </div> <div class="d-flex flex-nowrap justify-content-center"> <div class="p-2 flex-sm-fill border bg-light"> Item 1 </div> <div class="p-2 flex-sm-fill border bg-light"> This is the Item 2 Content </div> <div class="p-2 flex-sm-fill border bg-light"> Item 3 </div> <div class="p-2 flex-sm-fill border bg-light"> Content for Item 4 </div> </div> </body> </html> Output: Reference: https://getbootstrap.com/docs/5.0/utilities/flex/#fill Comment More infoAdvertise with us Next Article Bootstrap 5 Flex B bulbultomar Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads 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 Bootstrap 4 | Flex The flex classes are used to control the layout of flexbox components. Example: HTML <!DOCTYPE html> <html lang="en"> <head> <title>Flex</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial 10 min read Bootstrap 5 Flex Direction Bootstrap 5 Flex Direction is set by using the direction utilities for flex items in a flex container. The default browser setting is for the horizontal direction with the use of the flex-row class. For horizontal direction from the opposite side, the class used is flex-row-reverse. Use flex-column 3 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 Float Bootstrap 5 Float classes use the current viewport size to float an element to the left, right, or deactivate floating. !Important is mentioned to prevent issues with specificity. Please be mindful that flex objects are unaffected by float utilities. This is the replacement of CSS float property tha 3 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 Like