Bootstrap 5 Flex Fill

Last Updated : 19 Dec, 2022

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/bootstrap@5.2.2/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/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 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>