Bootstrap 4 | Flex

The flex classes are used to control the layout of flexbox components.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Flex</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <div class="container mt-3">
          
        <h1 style="color:green; text-align:center;">
            GeeksforGeeks
        </h1>
          
        <h2 style="text-align:center;">Flex</h2
          
        <div class="d-flex bg-success p-3 text-white"
            <div class="p-2 bg-primary">Flexbox 1</div
            <div class="p-2 bg-secondary ">Flexbox 2</div
            <div class="p-2 bg-info">Flexbox 3</div
        </div
    </div
</body
  
</html>                    

chevron_right


Output:



Inline Flexbox Container: The .d-inline-flex class is used to create an inline flexbox container.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Flex</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <div class="container mt-3">
          
        <h1 style="color:green; text-align:center;">
            GeeksforGeeks
        </h1>
          
        <h2 style="text-align:center;">Inline Flexbox</h2
          
        <div class="d-inline-flex bg-success p-3 text-white"
            <div class="p-2 bg-primary">Flexbox 1</div
            <div class="p-2 bg-secondary ">Flexbox 2</div
            <div class="p-2 bg-info">Flexbox 3</div
        </div
    </div
</body
  
</html>                    

chevron_right


Output:

Horizontal Direction: The .flex-row class is used to display the flex items horizontally. By default the flexbox are placed horizontally. The .flex-row-reverse class is used to reverse the align of flexbox (right-align flexbox).

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Flex</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <div class="container mt-3">
          
        <h1 style="color:green; text-align:center;">
            GeeksforGeeks
        </h1>
          
        <h2 style="text-align:center;">Horizontal Flexbox</h2
          
        <h3>flex-row class</h3>
        <div class="d-flex flex-row bg-success mb-3 text-white"
            <div class="p-2 bg-primary">Flexbox 1</div
            <div class="p-2 bg-secondary ">Flexbox 2</div
            <div class="p-2 bg-info">Flexbox 3</div
        </div> <br>
          
        <h3>flex-row-reverse class</h3>
        <div class="d-flex flex-row-reverse bg-success mb-3 text-white"
            <div class="p-2 bg-primary">Flexbox 1</div
            <div class="p-2 bg-secondary ">Flexbox 2</div
            <div class="p-2 bg-info">Flexbox 3</div
        </div
    </div
</body
  
</html>                    

chevron_right


Output:

Vertical Direction: The .flex-column class is used to display the flexbox vertically (stack to each other). The .flex-column-reverse class is used to put the flexbox vertically in reverse direction.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Flex</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <div class="container mt-3">
          
        <h1 style="color:green; text-align:center;">
            GeeksforGeeks
        </h1>
          
        <h2 style="text-align:center;">Vertical Flexbox</h2
          
        <h3>flex-column class</h3>
        <div class="d-flex flex-column text-white"
            <div class="p-2 bg-primary">Flexbox 1</div
            <div class="p-2 bg-secondary ">Flexbox 2</div
            <div class="p-2 bg-info">Flexbox 3</div
        </div> <br>
          
        <h3>flex-column-reverse class</h3>
        <div class="d-flex flex-column-reverse text-white"
            <div class="p-2 bg-primary">Flexbox 1</div
            <div class="p-2 bg-secondary ">Flexbox 2</div
            <div class="p-2 bg-info">Flexbox 3</div
        </div
    </div
</body
  
</html>                    

chevron_right


Output:

Justify Content: The .justify-content-* classes are used to change the alignment of flexbox. The alignment of flexbox can be start, end, center, between and around.


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Flex</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <div class="container mt-3">
          
        <h1 style="color:green; text-align:center;">
            GeeksforGeeks
        </h1>
          
        <h2 style="text-align:center;">Justify Content Flexbox</h2
          
        <h5>justify-content-start class</h5>
        <div class=
              "d-flex justify-content-start bg-success mb-3 text-white"
            <div class="p-2 bg-primary">Flexbox 1</div
            <div class="p-2 bg-secondary ">Flexbox 2</div
            <div class="p-2 bg-info">Flexbox 3</div
        </div>
          
        <h5>justify-content-center class</h5>
        <div class=
              "d-flex justify-content-center bg-success mb-3 text-white"
            <div class="p-2 bg-primary">Flexbox 1</div
            <div class="p-2 bg-secondary ">Flexbox 2</div
            <div class="p-2 bg-info">Flexbox 3</div
        </div
          
        <h5>justify-content-end class</h5>
        <div class=
              "d-flex justify-content-end bg-success mb-3 text-white"
            <div class="p-2 bg-primary">Flexbox 1</div
            <div class="p-2 bg-secondary ">Flexbox 2</div
            <div class="p-2 bg-info">Flexbox 3</div
        </div
          
        <h5>justify-content-between class</h5>
        <div class=
              "d-flex justify-content-between bg-success mb-3 text-white"
            <div class="p-2 bg-primary">Flexbox 1</div
            <div class="p-2 bg-secondary ">Flexbox 2</div
            <div class="p-2 bg-info">Flexbox 3</div
        </div
          
        <h5>justify-content-around class</h5>
        <div class=
              "d-flex justify-content-around bg-success mb-3 text-white"
            <div class="p-2 bg-primary">Flexbox 1</div
            <div class="p-2 bg-secondary ">Flexbox 2</div
            <div class="p-2 bg-info">Flexbox 3</div
        </div
    </div
</body
  
</html>                    

chevron_right


Output:

Fill/Equal Widths: The .flex-fill class is used to force the flex items into equal widths.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Flex</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <div class="container mt-3">
          
        <h1 style="color:green; text-align:center;">
            GeeksforGeeks
        </h1>
          
        <h2 style="text-align:center;">
            Fill/Equal Width Flexbox
        </h2
          
        <div class="d-flex mb-3"
            <div class="p-2 bg-primary flex-fill">Flexbox 1</div
            <div class="p-2 bg-secondary flex-fill">Flexbox 2</div
            <div class="p-2 bg-info flex-fill">Flexbox 3</div
        </div>
    </div
</body
  
</html>                    

chevron_right


Output:

Grow: The .flex-grow-1 class is used on flexbox to take the rest of space.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Flex</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <div class="container mt-3">
          
        <h1 style="color:green; text-align:center;">
            GeeksforGeeks
        </h1>
          
        <h2 style="text-align:center;">Grow Flexbox</h2
          
        <div class="d-flex mb-3"
            <div class="p-2 bg-primary">Flexbox 1</div
            <div class="p-2 flex-grow-1 bg-secondary">Flexbox 2</div
            <div class="p-2 bg-success">Flexbox 3</div
        </div>
    </div
</body
  
</html>                    

chevron_right


Output:

Order: The .order class is used to change the order of flexbox. The valid order classes
are from 0 to 12.

Example:


filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Flex</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <div class="container mt-3">
          
        <h1 style="color:green; text-align:center;">
            GeeksforGeeks
        </h1>
          
        <h2 style="text-align:center;">Order Flexbox</h2
          
        <div class="d-flex mb-3"
            <div class="p-2 bg-primary order-3">
                Flexbox 1
            </div
            <div class="p-2 bg-secondary order-1">
                Flexbox 2
            </div
            <div class="p-2 bg-success order-2">
                Flexbox 3
            </div
        </div>
    </div
</body
  
</html>                    

chevron_right


Output:

Auto Margins: The .mr-auto and .ml-auto classes are used to add margins to the item. The .mr-auto class pushes the item to the right and .ml-auto class pushes the item to the left.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Flex</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <div class="container mt-3">
          
        <h1 style="color:green; text-align:center;">
            GeeksforGeeks
        </h1>
          
        <h2 style="text-align:center;">Auto Margins</h2
          
        <div class="d-flex bg-success mb-3 text-white"
            <div class="p-2 bg-primary">
                Flexbox 1
            </div
            <div class="p-2 mr-auto bg-secondary ">
                Flexbox 2
            </div
            <div class="p-2 mr-auto bg-info">
                Flexbox 3
            </div
        </div>
  
        <div class="d-flex bg-success mb-3 text-white"
            <div class="p-2 bg-primary">
                Flexbox 1
            </div
            <div class="p-2 ml-auto bg-secondary ">
                Flexbox 2
            </div
            <div class="p-2 bg-info">
                Flexbox 3
            </div
        </div
    </div
</body
  
</html>                    

chevron_right


Output:

Wrap: The .flex-nowrap (default), .flex-wrap or .flex-wrap-reverse classes are used to control the wrap of flex items.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Flex</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <div class="container mt-3">
          
        <h1 style="color:green; text-align:center;">
            GeeksforGeeks
        </h1>
          
        <h2 style="text-align:center;">Flex Wrap</h2
          
        <h4>flex-nowrap class</h4>
        <div class="d-flex flex-nowrap bg-success"
            <div class="p-2 border">
                Welcome to GeeksforGeeks 1
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 2
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 3
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 4
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 5
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 6
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 7
            </div
        </div
          
        <br><br>
          
        <h4>flex-wrap class</h4>
        <div class="d-flex flex-wrap bg-success"
            <div class="p-2 border">
                Welcome to GeeksforGeeks 1
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 2
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 3
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 4
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 5
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 6
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 7
            </div
        </div
          
        <br><br>
          
        <h4>flex-wrap-reverse class</h4>
        <div class="d-flex flex-wrap-reverse bg-success"
            <div class="p-2 border">
                Welcome to GeeksforGeeks 1
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 2
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 3
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 4
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 5
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 6
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 7
            </div
        </div
    </div
</body
  
</html>                    

chevron_right


Output:

Align Content: The .align-content-* classes are used to set the vertical alignment of flex items. The list of all classes are: .align-content-start (default), .align-content-end, .align-content-center, .align-content-between, .align-content-around and .align-content-stretch.

Note: The align content works for more then one rows of flex items.

Example:


filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Flex</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <div class="container mt-3">
          
        <h1 style="color:green; text-align:center;">
            GeeksforGeeks
        </h1>
          
        <h2 style="text-align:center;">Align Content</h2
          
        <h4>align-content-start class</h4>
        <div class="d-flex flex-wrap align-content-start border"
                style="height:250px"
            <div class="p-2 border">
                Welcome to GeeksforGeeks 1
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 2
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 3
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 4
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 5
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 6
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 7
            </div
        </div
        <br>
          
        <h4>align-content-around class</h4>
        <div class="d-flex flex-wrap align-content-around border"
                style="height:250px"
            <div class="p-2 border">
                Welcome to GeeksforGeeks 1
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 2
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 3
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 4
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 5
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 6
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 7
            </div
        </div
        <br>
          
        <h4>align-content-stretch class</h4>
        <div class="d-flex flex-wrap align-content-stretch border"
                style="height:250px"
            <div class="p-2 border">
                Welcome to GeeksforGeeks 1
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 2
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 3
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 4
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 5
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 6
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 7
            </div
        </div
    </div
</body
  
</html>                    

chevron_right


Output:

Align Items: The .align-items-* classes are used to control the vertical alignment of flex items. The list of all classes are: .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, and .align-items-stretch (default).

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Flex</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <div class="container mt-3">
          
        <h1 style="color:green; text-align:center;">
            GeeksforGeeks
        </h1>
          
        <h2 style="text-align:center;">Align Items</h2
          
        <h4>align-items-end class</h4>
        <div class="d-flex align-items-end border"
                style="height:150px"
            <div class="p-2 border">
                Welcome to GeeksforGeeks 1
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 2
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 3
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 4
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 5
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 6
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 7
            </div
        </div
        <br>
          
        <h4>align-items-baseline class</h4>
        <div class="d-flex align-items-baseline border"
                style="height:150px"
            <div class="p-2 border">
                Welcome to GeeksforGeeks 1
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 2
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 3
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 4
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 5
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 6
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 7
            </div
        </div
        <br>
          
        <h4>align-items-stretch class</h4>
        <div class="d-flex align-items-stretch border"
                style="height:150px"
            <div class="p-2 border">
                Welcome to GeeksforGeeks 1
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 2
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 3
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 4
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 5
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 6
            </div
            <div class="p-2 border">
                Welcome to GeeksforGeeks 7
            </div
        </div
    </div
</body
  
</html>                    

chevron_right


Output:

Align Self: The .align-self-* classes are used to control the vertical alignment of flex items. The list of all classes are: .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, and .align-self-stretch (default).

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Flex</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body
    <div class="container mt-3">
          
        <h1 style="color:green; text-align:center;">
            GeeksforGeeks
        </h1>
          
        <h2 style="text-align:center;">Align Self</h2
          
        <h4>align-items-end class</h4>
        <div class="d-flex" style="height:250px"
            <div class="p-2 border align-self-start">
                Welcome to GeeksforGeeks 1
            </div
            <div class="p-2 border align-self-center">
                Welcome to GeeksforGeeks 2
            </div
            <div class="p-2 border align-self-end">
                Welcome to GeeksforGeeks 3
            </div
            <div class="p-2 border align-self-baseline">
                Welcome to GeeksforGeeks 1
            </div
            <div class="p-2 border align-self-stretch">
                Welcome to GeeksforGeeks 2
            </div
        </div
    </div
</body
  
</html>                    

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.