Home >>Bootstrap Tutorial >Bootstrap Flex

Bootstrap Flex

Bootstrap Flex

Bootstrap Flex is used to quickly manages the layouts, sizing of Grid columns, alignment. Add class .d-flex in flexbox container. It is easy to apply in your web pages. By using flex you don’t need to use utilities [margin (left, right, top, bottom), padding margin (left, right, top, bottom)].

Let's take Basic example of class flex:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
  <h2>Flex</h2>
  <div class="d-flex p-3 bg-info text-white">  
    <div class="p-2 bg-danger">Flexbox 1</div>
    <div class="p-2 bg-success">Flexbox 2</div>
    <div class="p-2 bg-warning">Flexbox 3</div>
  </div>
</div>
</body>
</html>
Output:

Flex

Flexbox 1
Flexbox 2
Flexbox 3

Inline flexbox container

Inline flexbox is used to align the inline flexbox container. You have to add class .d-inline-flex.

Let's take an example of inline flexbox container:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
  <h2>Inline Flex container</h2>
  <div class="d-inline-flex p-3 bg-info text-white">  
    <div class="p-2 bg-danger">Flexbox 1</div>
    <div class="p-2 bg-success">Flexbox 2</div>
    <div class="p-2 bg-warning">Flexbox 3</div>
  </div>
</div>
</body>
</html>
Output:

Inline Flex container

Flexbox 1
Flexbox 2
Flexbox 3

Direction

Bootstrap flex provide predefined classes to align the layout in horizontally and vertically.

Horizontal Direction

For horizontal alignment of layouts, you can use class .flex-row together with the class .d-flex. And, if you want to align layout in right horizontal direction, add class .flex-row-reverse.

Let's take an example of Horizontal direction:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
  <h2>Flex-Row</h2>
  <div class="d-flex flex-row p-3 bg-info text-white">  
    <div class="p-2 bg-danger">flex-row</div>
    <div class="p-2 bg-success">flex-row</div>
    <div class="p-2 bg-warning">flex-row</div>
  </div>
</div>
<div class="container">
  <h2>flex-row-reverse</h2>
  <div class="d-flex flex-row-reverse p-3 bg-info text-white">  
    <div class="p-2 bg-danger">flex-row-reverse</div>
    <div class="p-2 bg-success">flex-row-reverse</div>
    <div class="p-2 bg-warning">flex-row-reverse</div>
  </div>
</div>
</body>
</html>
Output:

Flex-Row

flex-row
flex-row
flex-row

flex-row-reverse

flex-row-reverse
flex-row-reverse
flex-row-reverse

Vertical Direction

If you want to align layout vertical then, use class .flex-column and for reverse the vertical direction add class .flex-column-reverse.

Let's take an example of Vertical direction:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
  <h2>Flex-column</h2>
  <div class="d-flex flex-column p-3 bg-info text-white">  
    <div class="p-2 bg-danger">flex-column</div>
    <div class="p-2 bg-success">flex-column</div>
    <div class="p-2 bg-warning">flex-column</div>
  </div>
</div>
<div class="container">
  <h2>flex-column-reverse</h2>
  <div class="d-flex flex-column-reverse p-3 bg-info text-white">  
    <div class="p-2 bg-danger">flex-column-reverse</div>
    <div class="p-2 bg-success">flex-column-reverse</div>
    <div class="p-2 bg-warning">flex-column-reverse</div>
  </div>
</div>
</body>
</html>
Output:

Flex-column

flex-column
flex-column
flex-column

flex-column-reverse

flex-column-reverse
flex-column-reverse
flex-column-reverse

Order

Bootstrap order are used for ordering of the layouts means by adding the class. Order-* (*- valid numbers are 0-12) you can change the layout display look to your web page. The lowest number has the highest priority.

Let's take an example of class order:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
  <h2>Order</h2>
  <div class="d-flex p-3 bg-info text-white">  
    <div class="p-2 bg-danger order-3">flexbox-1</div>
    <div class="p-2 bg-success order-1">flexbox-2</div>
    <div class="p-2 bg-warning order-2">flexbox-3</div>
  </div>
</div>
</body>
</html>
Output:

Order

flexbox-1
flexbox-2
flexbox-3

Justify Content

Add class .justify-content-* (*- start, end, center, between and around) to change the alignment of layouts.

Let's take an example of justify content:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
  <h2>justify content end</h2>
  <div class="d-flex justify-content-end p-3 bg-info text-white">  
    <div class="p-2 bg-danger order-3">flexbox-1</div>
    <div class="p-2 bg-success order-1">flexbox-2</div>
    <div class="p-2 bg-warning order-2">flexbox-3</div>
  </div>
</div>
</body>
</html>
Output:

justify content end

flexbox-1
flexbox-2
flexbox-3

Grow/ shrink

If necessary you can also use classes .flex-grow-1(it takes up all the available space) and .flex-shrink-1(it make shrink).

Let's take an example of Grow/ shrink:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
  <h2>flex Grow</h2>
  <div class="d-flex p-3 bg-info text-white">  
    <div class="p-2 bg-danger">flexbox-1</div>
    <div class="p-2 bg-success flex-grow-1 ">flexbox-2</div>
    <div class="p-2 bg-warning ">flexbox-3</div>
  </div>
</div>
</body>
</html>
Output:

flex Grow

flexbox-1
flexbox-2
flexbox-3

Align Items

By using class .align-items -*, you can easily control the vertical alignment of layouts. *- valid classes are- align-items-start, align-items-baseline, .align-items-end, .align-items-center, and .align-items-stretch (default).

Let's take an example of align items:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
  <h2>Align items</h2>
<div class="container">
  <p>Align items End</p>
  <div class="d-flex align-items-end p-3 bg-info text-white" style="height:120px;">  
    <div class="p-2 bg-danger">flexbox-1</div>
    <div class="p-2 bg-success ">flexbox-2</div>
    <div class="p-2 bg-warning ">flexbox-3</div>
  </div>
</div>
</body>
</html>
Output:

Align items

Align items End

flexbox-1
flexbox-2
flexbox-3

Align Self

Use the classes .align-self-* (align-self-start, align- self -baseline, .align- self -end, .align- self -center, and .align- self -stretch (default)) for the vertical alignment of the individual rows of layouts.

Let's take an example of align-self:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
<h2>Align Self</h2>
  <p>Align self End</p>
  <div class="d-flex p-3 bg-info text-white" style="height:120px;">  
    <div class="p-2 bg-danger">flexbox-1</div>
    <div class="p-2 align-self-end  bg-success ">flexbox-2</div>
    <div class="p-2 bg-warning ">flexbox-3</div>
  </div>
</div>
</body>
</html>
Output:

Align Self

Align self End

flexbox-1
flexbox-2
flexbox-3

Flex-wrap

You can add the classes of flex-wrap property together with the class d-flex to control the flex items are wrapped into a single row or multiple row in a flex container. The flex wrap valid classes are-flex-wrap, .flex- nowrap, .flex-wrap-reverse.

Let's take an example of flex wrap:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
  <h2>Flex Wrap</h2>
  <div class="d-flex flex-wrap flex-wrap p-3 bg-info text-white" >  
    <div class="p-2 bg-danger border">flexbox-1</div>
    <div class="p-2 bg-success border ">flexbox-2</div>
    <div class="p-2 bg-warning border">flexbox-3</div>
	 <div class="p-2 bg-danger border">flexbox-4</div>
    <div class="p-2 bg-success border">flexbox-5</div>
    <div class="p-2 bg-warning border">flexbox-6</div>
	 <div class="p-2 bg-danger border">flexbox-7</div>
    <div class="p-2 bg-success border">flexbox-8</div>
    <div class="p-2 bg-warning border">flexbox-9</div>
	 <div class="p-2 bg-danger border">flexbox-10</div>
    <div class="p-2 bg-success border">flexbox-11</div>
    <div class="p-2 bg-warning border">flexbox-12</div>
	 <div class="p-2 bg-danger border">flexbox-13</div>
    <div class="p-2 bg-success border">flexbox-14</div>
    <div class="p-2 bg-warning border">flexbox-15</div>
  </div>
</div>
</body>
</html>
Output:

Flex Wrap

flexbox-1
flexbox-2
flexbox-3
flexbox-4
flexbox-5
flexbox-6
flexbox-7
flexbox-8
flexbox-9
flexbox-10
flexbox-11
flexbox-12
flexbox-13
flexbox-14
flexbox-15

Popular Tutorials