Bootstrap 4 Flex Tutorial With Example

In Bootstrap 4 Flex Tutorial With Example, you will learn how to create the flex with Bootstrap 4. Using Bootstrap 4 you can easily create responsive flex classes. All flex classes come with additional responsive classes, which makes it easy to set the specific flex class on a specific screen size.

Bootstrap 4 Flex Tutorial With Example

You can use flex classes to control the layout of Bootstrap 4 components.

#1: Bootstrap 4 Flexbox

The difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 uses flexbox, alternately of floats, to handle the layout.

The Flexible Box Layout Module creates it easier to design a flexible, responsive layout structure without using float or positioning.

To create a flexbox container and to transform direct children into flex items, you can use the d-flex class.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Flex Tutorial With Example</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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Flexbox</h2>
  <div class="d-flex p-3 bg-secondary text-white">  
    <div class="p-2 bg-info">Item 1</div>
    <div class="p-2 bg-primary">Item 2</div>
    <div class="p-2 bg-info">Item 3</div>
  </div>
</div>
</body> 
</html>

The example of a Bootstrap flexbox will look like below screenshot.

Bootstrap 4 Flex Example

To you want to create an inline flexbox container then use the d-inline-flex class.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Flex Tutorial With Example</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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Flexbox</h2>
  <div class="d-inline-flex p-3 bg-secondary text-white">  
    <div class="p-2 bg-info">Item 1</div>
    <div class="p-2 bg-primary">Item 2</div>
    <div class="p-2 bg-info">Item 3</div>
  </div>
</div>
</body> 
</html>

The example of a Bootstrap inline flexbox will look like below screenshot.

Bootstrap 4 Flex Tutorial

#2: Bootstrap 4 Flexbox Horizontal Direction

If you want to display the flex items horizontally then use .flex-row. This direction is a default.

You can also use .flex-row-reverse to right-align the horizontal direction.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Flex Tutorial With Example</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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Horizontal Flexbox</h2>
  <div class="d-flex flex-row bg-secondary text-white">  
    <div class="p-2 bg-info">Item 1</div>
    <div class="p-2 bg-primary">Item 2</div>
    <div class="p-2 bg-info">Item 3</div>
  </div>
  <br>
  <div class="d-flex flex-row-reverse bg-secondary text-white">
    <div class="p-2 bg-info">Item 1</div>
    <div class="p-2 bg-primary">Item 2</div>
    <div class="p-2 bg-info">Item 3</div>
  </div>
</div>
</body> 
</html>

The example of a Bootstrap horizontal flexbox will look like below screenshot.

Bootstrap 4 Horizontal Flexbox Example

#3: Bootstrap 4 Flexbox Vertical Direction

If you want to display the flex items vertically then use .flex-column.

You can also use .flex-column-reverse to right-align the vertical direction.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Flex Tutorial With Example</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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Vertical Flexbox</h2>
  <div class="d-flex flex-column bg-secondary text-white">  
    <div class="p-2 bg-info">Item 1</div>
    <div class="p-2 bg-primary">Item 2</div>
    <div class="p-2 bg-info">Item 3</div>
  </div>
  <br>
  <div class="d-flex flex-column-reverse bg-secondary text-white">
    <div class="p-2 bg-info">Item 1</div>
    <div class="p-2 bg-primary">Item 2</div>
    <div class="p-2 bg-info">Item 3</div>
  </div>
</div>
</body> 
</html>

The example of a Bootstrap vertical flexbox will look like below screenshot.

Bootstrap 4 Vertical Flexbox Example

#4: Bootstrap 4 Flexbox Justify Content

You can use .justify-content-* classes to change the alignment of flex items. There are some Valid classes are a start(default), end, center, between or around.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Flex Tutorial With Example</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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Flexbox Justify content</h2>
  <div class="d-flex justify-content-start bg-secondary text-white">  
    <div class="p-2 bg-info">Item 1</div>
    <div class="p-2 bg-primary">Item 2</div>
    <div class="p-2 bg-info">Item 3</div>
  </div>
  <br>
  <div class="d-flex justify-content-end bg-secondary text-white">
    <div class="p-2 bg-info">Item 1</div>
    <div class="p-2 bg-primary">Item 2</div>
    <div class="p-2 bg-info">Item 3</div>
  </div>
  <br>
  <div class="d-flex justify-content-center bg-secondary text-white">
    <div class="p-2 bg-info">Item 1</div>
    <div class="p-2 bg-primary">Item 2</div>
    <div class="p-2 bg-info">Item 3</div>
  </div>
  <br>
  <div class="d-flex justify-content-between bg-secondary text-white">
    <div class="p-2 bg-info">Item 1</div>
    <div class="p-2 bg-primary">Item 2</div>
    <div class="p-2 bg-info">Item 3</div>
  </div>
  <br>
  <div class="d-flex justify-content-around bg-secondary text-white">
    <div class="p-2 bg-info">Item 1</div>
    <div class="p-2 bg-primary">Item 2</div>
    <div class="p-2 bg-info">Item 3</div>
  </div>
</div>
</body> 
</html>

The example of a Bootstrap flexbox justify content will look like below screenshot.

Bootstrap 4 Flexbox Justify content Example

#5: Bootstrap 4 Flexbox Fill / Equal Widths

You can use the class .flex-fill on flex items to force them into equal widths.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Flex Tutorial With Example</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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Flexbox Equal Width</h2>
  <div class="d-flex text-white">  
    <div class="p-2 flex-fill bg-info">Item 1</div>
    <div class="p-2 flex-fill bg-primary">Item 2</div>
    <div class="p-2 flex-fill bg-info">Item 3</div>
  </div>
</div>
</body> 
</html>

The example of a Bootstrap flexbox equal width will look like below screenshot.

Bootstrap 4 Flexbox Equal Width Example

#6: Bootstrap 4 Flexbox Grow

You can use .flex-grow-1 on a flex item to take up the rest of the space.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Flex Tutorial With Example</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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Flexbox Grow</h2>
  <div class="d-flex text-white">  
    <div class="p-2 bg-info">Item 1</div>
    <div class="p-2 bg-primary">Item 2</div>
    <div class="p-2 flex-grow-1 bg-info">Item 3</div>
  </div>
</div>
</body> 
</html>

The example of a Bootstrap flexbox grow will look like below screenshot.

Bootstrap 4 Flexbox Grow Example

#7: Bootstrap 4 Flexbox Order

You can change the visual order of a specific flex item with .order classes. Valid classes are from 0 to 12, where the lowest number has the highest priority.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Flex Tutorial With Example</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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Flexbox Order</h2>
  <div class="d-flex text-white">  
    <div class="p-2 bg-info order-1">Item 1</div>
    <div class="p-2 bg-primary order-3">Item 2</div>
    <div class="p-2 bg-info order-2">Item 3</div>
  </div>
</div>
</body> 
</html>

The example of a Bootstrap flexbox order will look like below screenshot.

Bootstrap 4 Flexbox Order Example

#8: Bootstrap 4 Flexbox Auto Margins

You can easily add auto margins to flex items with .mr-auto (push items to the right), or using .ml-auto (push items to the left).

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Flex Tutorial With Example</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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Flexbox Auto Margin</h2>
  <div class="d-flex bg-secondary text-white">  
    <div class="p-2 bg-info mr-auto">Item 1</div>
    <div class="p-2 bg-primary">Item 2</div>
    <div class="p-2 bg-info">Item 3</div>
  </div>
  <br>
  <div class="d-flex bg-secondary text-white">  
    <div class="p-2 bg-info">Item 1</div>
    <div class="p-2 bg-primary">Item 2</div>
    <div class="p-2 bg-info ml-auto">Item 3</div>
  </div>
</div>
</body> 
</html>

The example of a Bootstrap flexbox auto margin will look like below screenshot.

Bootstrap 4 Flexbox Order Example

#9: Bootstrap 4 Flexbox Wrap

Control how flex items wrap in the flex container with .flex-nowrap(default), .flex-wrap or .flex-wrap-reverse.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Flex Tutorial With Example</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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="d-flex flex-wrap bg-light">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
    <div class="p-2 border">Flex item 4</div>
    <div class="p-2 border">Flex item 5</div>
    <div class="p-2 border">Flex item 6</div>
    <div class="p-2 border">Flex item 7</div>
    <div class="p-2 border">Flex item 8</div>
    <div class="p-2 border">Flex item 9</div>
    <div class="p-2 border">Flex item 10</div>
    <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
  </div>
  <br>
  <p>.flex-wrap-reverse:</p>
  <div class="d-flex flex-wrap-reverse bg-light">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
    <div class="p-2 border">Flex item 4</div>
    <div class="p-2 border">Flex item 5</div>
    <div class="p-2 border">Flex item 6</div>
    <div class="p-2 border">Flex item 7</div>
    <div class="p-2 border">Flex item 8</div>
    <div class="p-2 border">Flex item 9</div>
    <div class="p-2 border">Flex item 10</div>
    <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
  </div>
  <br>
  <p>.flex-nowrap:</p>
  <div class="d-flex flex-nowrap bg-light">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
    <div class="p-2 border">Flex item 4</div>
    <div class="p-2 border">Flex item 5</div>
    <div class="p-2 border">Flex item 6</div>
    <div class="p-2 border">Flex item 7</div>
    <div class="p-2 border">Flex item 8</div>
    <div class="p-2 border">Flex item 9</div>
    <div class="p-2 border">Flex item 10</div>
    <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
    <div class="p-2 border">Flex item 16</div>
    <div class="p-2 border">Flex item 17</div>
    <div class="p-2 border">Flex item 18</div>
    <div class="p-2 border">Flex item 19</div>
    <div class="p-2 border">Flex item 20</div>
  </div>
  <br>
</div>
</body> 
</html>

The example of a Bootstrap flexbox wrap will look like below screenshot.

Bootstrap 4 Flexbox Wrap Example

#10: Bootstrap 4 Flexbox Align Content

Control a vertical alignment of gathered flex items with .align-content-* classes. Valid classes are .align-content-start(default), .align-content-end, .align-content-center, .align-content-between, .align-content-around, .align-content-stretch. These classes have no effect on single row of flex item.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Flex Tutorial With Example</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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Flexbox Align Content</h2>
  <p>.align-content-start (default):</p>
  <div class="d-flex flex-wrap align-content-start bg-light" style="height:200px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
    <div class="p-2 border">Flex item 4</div>
    <div class="p-2 border">Flex item 5</div>
    <div class="p-2 border">Flex item 6</div>
    <div class="p-2 border">Flex item 7</div>
    <div class="p-2 border">Flex item 8</div>
    <div class="p-2 border">Flex item 9</div>
    <div class="p-2 border">Flex item 10</div>
    <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
  </div>
  <br>
  <p>.align-content-end:</p>
  <div class="d-flex flex-wrap align-content-end bg-light" style="height:200px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
    <div class="p-2 border">Flex item 4</div>
    <div class="p-2 border">Flex item 5</div>
    <div class="p-2 border">Flex item 6</div>
    <div class="p-2 border">Flex item 7</div>
    <div class="p-2 border">Flex item 8</div>
    <div class="p-2 border">Flex item 9</div>
    <div class="p-2 border">Flex item 10</div>
    <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
  </div>
  <br>
  <p>.align-content-center:</p>
  <div class="d-flex flex-wrap align-content-center bg-light" style="height:200px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
    <div class="p-2 border">Flex item 4</div>
    <div class="p-2 border">Flex item 5</div>
    <div class="p-2 border">Flex item 6</div>
    <div class="p-2 border">Flex item 7</div>
    <div class="p-2 border">Flex item 8</div>
    <div class="p-2 border">Flex item 9</div>
    <div class="p-2 border">Flex item 10</div>
    <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
  </div>
  <br>
  <p>.align-content-around:</p>
  <div class="d-flex flex-wrap align-content-around bg-light" style="height:200px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
    <div class="p-2 border">Flex item 4</div>
    <div class="p-2 border">Flex item 5</div>
    <div class="p-2 border">Flex item 6</div>
    <div class="p-2 border">Flex item 7</div>
    <div class="p-2 border">Flex item 8</div>
    <div class="p-2 border">Flex item 9</div>
    <div class="p-2 border">Flex item 10</div>
    <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
  </div>
  <br>
  <p>.align-content-stretch:</p>
  <div class="d-flex flex-wrap align-content-stretch bg-light" style="height:200px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
    <div class="p-2 border">Flex item 4</div>
    <div class="p-2 border">Flex item 5</div>
    <div class="p-2 border">Flex item 6</div>
    <div class="p-2 border">Flex item 7</div>
    <div class="p-2 border">Flex item 8</div>
    <div class="p-2 border">Flex item 9</div>
    <div class="p-2 border">Flex item 10</div>
    <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
  </div>
  <br>
</div>
</body> 
</html>

The example of a Bootstrap flexbox align content will look like below screenshot.

Bootstrap 4 Flexbox Align Content Example

#11: Bootstrap 4 Flexbox Align Items

Control a vertical alignment of single rows of flex items with .align-items-* classes. Valid classes are.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, .align-items-stretch(default).

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Flex Tutorial With Example</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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Flexbox Align Items</h2>
  <p>.align-items-start:</p>
  <div class="d-flex align-items-start bg-light" style="height:200px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
  <p>.align-items-end:</p>
  <div class="d-flex align-items-end bg-light" style="height:200px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
  <p>.align-items-center:</p>
  <div class="d-flex align-items-center bg-light" style="height:200px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
  <p>.align-items-baseline:</p>
  <div class="d-flex align-items-baseline bg-light" style="height:200px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
  <p>.align-items-stretch (default):</p>
  <div class="d-flex align-items-stretch bg-light" style="height:200px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
</div>
</body> 
</html>

The example of a Bootstrap flexbox align items will look like below screenshot.

Bootstrap 4 Flexbox Align Items Example

#12: Bootstrap 4 Flexbox Align Self

Control a vertical alignment of a specified flex item with .align-self-* classes. Valid classes are  .align-self-start, .align-self-end, .align.self-center , .align-self-baseline, .align-self-stretch(default).

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Flex Tutorial With Example</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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Flexbox Align Self</h2>
  <p>.align-self-start:</p>
  <div class="d-flex bg-light" style="height:200px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border align-self-start">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
  <p>.align-self-end:</p>
  <div class="d-flex bg-light" style="height:200px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border align-self-end">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
  <p>.align-self-center:</p>
  <div class="d-flex bg-light" style="height:200px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border align-self-center">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
  <p>.align-self-baseline:</p>
  <div class="d-flex bg-light" style="height:200px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border align-self-baseline">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
  <p>.align-self-stretch (default):</p>
  <div class="d-flex bg-light" style="height:200px">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border align-self-stretch">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
  </div>
  <br>
</div>
</body> 
</html>

The example of a Bootstrap flexbox align self will look like below screenshot.

Bootstrap 4 Flexbox Align Self Example

At last, our Bootstrap 4 Flex Tutorial With Example is over.

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.