English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Basic Tutorial

Bootstrap4 Flex (Flexible) Layout

Bootstrap4 to control the layout of the page through the flex class.

flex box (flexbox)

Bootstrap 3 with Bootstrap 4 The biggest difference is Bootstrap 4 　use flex box to layout instead of floating layout.

Flex Box is a CSS3 a new layout mode, more suitable for responsive design, if you are not familiar with flex, you can read our CSS3 Flex Box (Flex Box) Tutorial

Note: IE9 and its following versions do not support flexible boxes, so if you need to be compatible with IE8-9, please use Bootstrap 3.

The following example uses d-flex class creates a flexible box container and sets three flexible child elements:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Flex</h2>
　　<p>Use d-flex class creates a flexible box container and sets three flexible child elements: </p>
　　<div class="d-flex p-3　bg-secondary text-white">　　
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

Create a flexible box container displayed on the same line using d-inline-flex class:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>inline Flex</h2>
　　<p>Create a flexible box container displayed on the same line using d-inline-flex class: </p>
　　<div class="d-inline-flex p-3　bg-secondary text-white">　　
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

horizontal direction

.flex-row can set the horizontal display of flexible child elements, which is the default.

Use .flex-row-The 'reverse' class is used to set right-aligned display, which is the opposite of .flex-row direction is reversed.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>horizontal direction</h2>
　　<p>Use .flex-The 'row' class sets the horizontal display of flexible child elements: </p>
　　<div class="d-flex flex-row bg-secondary mb-3">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
　　<p>.flex-row-reverse sets the right alignment direction: </p>
　　<div class="d-flex flex-row-reverse bg-secondary">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

vertical direction

.flex-The 'column' class is used to set the vertical display of flexible child elements, .flex-column-reverse is used to flip the child elements:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Vertical direction</h2>
　　<p>.flex-column class is used to set the vertical display of the flexible child elements:</p>
　　<div class="d-flex flex-column mb-3">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
　　<p>.flex-column-reverse class is used to set the vertical flip display of the flexible child elements:</p>
　　<div class="d-flex flex-column-reverse">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

Content alignment

-content-* class is used to modify the alignment of the flexible child elements,* The allowed values are:start (default), end, center, between, or around:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Content alignment</h2>
　　<p>　.justify-content-*　class is used to modify the alignment of the flexible child elements,*　The allowed values are: start (default), end, center, between, or around:</p>
　　<div class="d-flex justify-content-start bg-secondary mb-3">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
　　<div class="d-flex justify-content-end bg-secondary mb-3">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
　　<div class="d-flex justify-content-center bg-secondary mb-3">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
　　<div class="d-flex justify-content-between bg-secondary mb-3">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
　　<div class="d-flex justify-content-around bg-secondary mb-3">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:


Equal width

.flex-fill class forces the width of each flexible child element to be the same:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Equal width</h2>
　　<p>.flex-fill class forces the width of each flexible child element to be the same:</p>
　　<div class="d-flex　mb-3">
　　　　<div class="p-2　flex-fill bg-info">Flex item　1</div>
　　　　<div class="p-2　flex-fill bg-warning">Flex item　2</div>
　　　　<div class="p-2　flex-fill bg-primary">Flex item　3</div>
　　</div>
　　<p>Not using .flex-fill class example:</p>
　　<div class="d-flex　mb-3　bg-secondary">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

Expansion

.flex-grow-1 　Used to set the child elements to use the remaining space. In the following example, the first two child elements only set the space they need, and the last one gets the remaining space. :

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Expansion</h2>
　　<p>.flex-grow-1　Used to set the child elements to use the remaining space:</p>
　　<div class="d-flex　mb-3">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　flex-grow-1　bg-primary">Flex item　3</div>
　　</div>
　　<p>Not using .flex-grow-1　Example:</p>
　　<div class="d-flex　mb-3　bg-secondary">
　　　　<div class="p-2　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

Tip: Use .flex-shrink-1 Used to set the shrink rules of the child elements.

Order

.order class can set the order of the flexible child elements, from .order-1 to .order-12The lower the number, the higher the weight ( .order-1 ranked before .order-2 before) :

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Order</h2>
　　<p>.order class can set the order of the flexible child elements, from　.order-1　to　.order-12The lower the number, the higher the weight:</p>
　　<div class="d-flex　mb-3">
　　　　<div class="p-2　order-3　bg-info">Flex item　1</div>
　　　　<div class="p-2　order-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　order-1　bg-primary">Flex item　3</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

margin

.mr-auto class can set the right outer margin of the child element to autowhich means margin-right: auto!important;, .ml-auto class can set the left outer margin of the child element to autowhich means margin-left: auto!important;:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>margin</h2>
　　<p>.mr-auto　class can set the right outer margin of the child element to auto, .ml-auto　class can set the left outer margin of the child element to auto, </p>
　　<div class="d-flex　mb-3　bg-secondary">
　　　　<div class="p-2　mr-auto　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　bg-primary">Flex item　3</div>
　　</div>
　　<div class="d-flex　mb-3　bg-secondary">
　　　　<div class="p-2　　bg-info">Flex item　1</div>
　　　　<div class="p-2　bg-warning">Flex item　2</div>
　　　　<div class="p-2　ml-auto　bg-primary">Flex item　3</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

Wrap

The wrapped child elements in a flexible container can use the following three classes: .flex-nowrap (default), .flex-wrap or .flex-wrap-reverse. Set the flex container to be a single line or multiple lines.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Wrap</h2>
　　<p>Three classes can be used to wrap elastic child elements in elastic containers: .flex-nowrap (default), .flex-wrap or .flex-wrap-reverse:</p>
　　<p><code>.flex-wrap:</code></p>
　　<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 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 class="p-2　border">Flex item　21</div>
　　　　<div class="p-2　border">Flex item　22</div>
　　　　<div class="p-2　border">Flex item　23</div>
　　　　<div class="p-2　border">Flex item　24</div>
　　　　<div class="p-2　border">Flex item　25</div>
　　</div>
　　<br>
　　<p><code>.flex-wrap-reverse:</code></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 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 class="p-2　border">Flex item　21</div>
　　　　<div class="p-2　border">Flex item　22</div>
　　　　<div class="p-2　border">Flex item　23</div>
　　　　<div class="p-2　border">Flex item　24</div>
　　　　<div class="p-2　border">Flex item　25</div>
　　</div>
　　<br>
　　<p><code>.flex-nowrap:</code></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 class="p-2　border">Flex item　21</div>
　　　　<div class="p-2　border">Flex item　22</div>
　　　　<div class="p-2　border">Flex item　23</div>
　　　　<div class="p-2　border">Flex item　24</div>
　　　　<div class="p-2　border">Flex item　25</div>
　　　　<div class="p-2　border">Flex item　26</div>
　　　　<div class="p-2　border">Flex item　27</div>
　　　　<div class="p-2　border">Flex item　28</div>
　　　　<div class="p-2　border">Flex item　29</div>
　　　　<div class="p-2　border">Flex item　30</div>
　　　　<div class="p-2　border">Flex item　31</div>
　　　　<div class="p-2　border">Flex item　32</div>
　　　　<div class="p-2　border">Flex item　33</div>
　　　　<div class="p-2　border">Flex item　34</div>
　　　　<div class="p-2　border">Flex item　35</div>
　　</div>
　　<br>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

Content alignment

We can use .align-content-* to control how child elements are stacked vertically, including values such as: .align-content-start (default), .align-content-end, .align-content-center, .align-content-between, .align-content-around and .align-content-stretch.

These classes are invalid for elastic child elements that have only one line.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Content alignment</h2>
　　<p>We can use .align-content-*　to control the vertical alignment of child elements./p>
　　<p><strong>Attention:</strong>/<strong>This example does not look good on small devices. These classes are invalid for elastic child elements that have only one line.</p>
　　<p>.align-content-start (default):</p>
　　<div class="d-flex flex-wrap align-content-start bg-light" style="height:300px">
　　　　<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 class="p-2　border">Flex item　21</div>
　　　　<div class="p-2　border">Flex item　22</div>
　　　　<div class="p-2　border">Flex item　23</div>
　　　　<div class="p-2　border">Flex item　24</div>
　　　　<div class="p-2　border">Flex item　25</div>
　　</div>
　　<br>
　　<p>.align-content-end:</p>
　　<div class="d-flex flex-wrap align-content-end bg-light" style="height:300px">
　　　　<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 class="p-2　border">Flex item　21</div>
　　　　<div class="p-2　border">Flex item　22</div>
　　　　<div class="p-2　border">Flex item　23</div>
　　　　<div class="p-2　border">Flex item　24</div>
　　　　<div class="p-2　border">Flex item　25</div>
　　</div>
　　<br>
　　<p>.align-content-center:</p>
　　<div class="d-flex flex-wrap align-content-center bg-light" style="height:300px">
　　　　<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 class="p-2　border">Flex item　21</div>
　　　　<div class="p-2　border">Flex item　22</div>
　　　　<div class="p-2　border">Flex item　23</div>
　　　　<div class="p-2　border">Flex item　24</div>
　　　　<div class="p-2　border">Flex item　25</div>
　　</div>
　　<br>
　　<p>.align-content-around:</p>
　　<div class="d-flex flex-wrap align-content-around bg-light" style="height:300px">
　　　　<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 class="p-2　border">Flex item　21</div>
　　　　<div class="p-2　border">Flex item　22</div>
　　　　<div class="p-2　border">Flex item　23</div>
　　　　<div class="p-2　border">Flex item　24</div>
　　　　<div class="p-2　border">Flex item　25</div>
　　</div>
　　<br>
　　<p>.align-content-stretch:</p>
　　<div class="d-flex flex-wrap align-content-stretch bg-light" style="height:300px">
　　　　<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 class="p-2　border">Flex item　21</div>
　　　　<div class="p-2　border">Flex item　22</div>
　　　　<div class="p-2　border">Flex item　23</div>
　　　　<div class="p-2　border">Flex item　24</div>
　　　　<div class="p-2　border">Flex item　25</div>
　　</div>
　　<br>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:


Child element alignment

To set alignment for a single-line child element, you can use .align-items-* classes to control, including values such as:.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, and .align-items-stretch (default).

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Child element alignment</h2>
　　<p>To set alignment for a single-line child element, you can use .align-content-*　class to control.</p>
　　<p>.align-items-start:</p>
　　<div class="d-flex align-items-start bg-light" style="height:150px">
　　　　<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:150px">
　　　　<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:150px">
　　　　<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:150px">
　　　　<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:150px">
　　　　<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>
Test and see ‹/›

The effect after running is as follows:

Specify child element alignment

To set alignment for specific child elements, you can use .align-self-* classes to control, including values such as: .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, and .align-self-stretch (default).

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Align Self</h2>
　　<p>If you want to set the alignment of a specified child element, you can use .align-self-*　class to control.</p>
　　<p>.align-self-start:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<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:150px">
　　　　<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:150px">
　　　　<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:150px">
　　　　<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:150px">
　　　　<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>
Test and see ‹/›

The effect after running is as follows:

Responsive flex class

We can set the flex class according to different devices to achieve responsive layout of the page, as shown in the following table: * The possible values are: sm, md, lg, or xl, corresponding to small devices, medium devices, large devices, and extra-large devices.

ClassExampleImplementation
Flexible container
-*-flexCreate a flexible box container according to different screen devicesTry It 　
Direction
.flex-*-rowDisplay flexible child elements horizontally according to different screen devicesTry It 　
.flex-*-columnDisplay flexible child elements vertically according to different screen devicesTry It 　
Content alignment
-content-*-startDisplay flexible child elements at the beginning position (left-aligned) according to different screen devicesTry It 　
-content-*-centerCenter display child elements in flex container according to different screen devicesTry It 　
-content-*-aroundUse "around" to display flexible child elements according to different screen devicesTry It 　
Expansion
.flex-*-grow-0Different screen devices do not set expansion　
.flex-*-grow-1Set grow for different screen devices　
Shrink
.flex-*-shrink-0Do not set shrink for different screen devices　
.flex-*-shrink-1Set shrink for different screen devices　
Wrap
.flex-*-nowrapDo not set wrapping elements for different screen devicesTry It 　
.flex-*-wrap-reverseReverse wrapping elements for different screen devicesTry It 　
.align-content-*-endStack elements at the end position according to different screen devicesTry It 　
.align-content-*-aroundStack elements using "around" according to different screen devicesTry It 　
Element Alignment
.align-items-*-startDisplay elements at the start of the same line according to different screen devices.Try It 　
.align-items-*-centerDisplay elements in the center of the same line according to different screen devices.Try It 　
.align-items-*-stretchExtend the height of elements and display them on the same line according to different screen devices.Try It 　
.align-self-*-endDisplay a single child element at the end according to different screen devicesTry It 　
.align-self-*-baselineDisplay a single child element at the baseline position according to different screen devicesTry It 　
Bootstrap4 Media ObjectsBootstrap4 Utilities