Bootstrap Flex
Flexbox is layout pattern , it helps to alignment of items and
specification of the layout direction and specification of layout order of items.
To create a flexbox container and to transform direct children into flex items, use the "d-flex" class.
Example
You need to use .flex-row to set a horizontal direction or .flex-row-reverse to start the horizontal direction from the opposite side.
Example
Responsive Version of d-flex available
Justify Content
Use the "justify-content-*" class to change the alignment of flex items.The following are the classes.
Output
Vertical Direction
You can use .flex-column or .flex-column-reverse to make flex vertical arrangement.
Example
Output :
Flexbox is layout pattern , it helps to alignment of items and
specification of the layout direction and specification of layout order of items.
To create a flexbox container and to transform direct children into flex items, use the "d-flex" class.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.my-flex-item_1
{
background-color:
Blue;
border:
1px
dotted
grey;
height:
48px;
width:130px;
}
.my-flex-item_2
{
background-color:
#F18D00;
border:
1px
dotted
grey;
height:
48px;
width:130px;
}
.my-flex-item_3
{
background-color:
#4CAF50;
border:
1px
dotted
grey;
height:
48px;
width:130px;
}
</style>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<div
class="d-flex
bg-secondary text-white">
<div
class="my-flex-item_1">
My
Flex Item 1</div>
<div
class="my-flex-item_2">
My
Flex Item 2</div>
<div
class="my-flex-item_3">
My
Flex Item 3</div>
</div>
</div>
</body>
</html>
My Flex Item 1
My Flex Item 2
My Flex Item 3
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.my-flex-item_1
{
background-color:
Blue;
border:
1px
dotted
grey;
height:
48px;
width:130px;
}
.my-flex-item_2
{
background-color:
#F18D00;
border:
1px
dotted
grey;
height:
48px;
width:130px;
}
.my-flex-item_3
{
background-color:
#4CAF50;
border:
1px
dotted
grey;
height:
48px;
width:130px;
}
</style>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<div
class="d-flex
bg-secondary text-white flex-row">
<div
class="my-flex-item_1">
My
Flex Item 1</div>
<div
class="my-flex-item_2">
My
Flex Item 2</div>
<div
class="my-flex-item_3">
My
Flex Item 3</div>
</div>
<div
class="d-flex
bg-secondary text-white flex-row-reverse">
<div
class="my-flex-item_1">
My
Flex Item 1</div>
<div
class="my-flex-item_2">
My
Flex Item 2</div>
<div
class="my-flex-item_3">
My
Flex Item 3</div>
</div>
</div>
</body>
</html>
Output:
My Flex Item 1
My Flex Item 2
My Flex Item 3
My Flex Item 1
My Flex Item 2
My Flex Item 3
Responsive Version of d-flex available
- .d-flex
- .d-sm-flex
- .d-md-flex
- .d-lg-flex
- .d-xl-flex
- .d-xl-inline-flex
Justify Content
Use the "justify-content-*" class to change the alignment of flex items.The following are the classes.
- justify-content-start
- justify-content-end
- justify-content-center
- justify-content-between
- justify-content-around
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.my-flex-item_1
{
background-color:
Blue;
border:
1px
dotted
grey;
height:
48px;
width:130px;
}
.my-flex-item_2
{
background-color:
#F18D00;
border:
1px
dotted
grey;
height:
48px;
width:130px;
}
.my-flex-item_3
{
background-color:
#4CAF50;
border:
1px
dotted
grey;
height:
48px;
width:130px;
}
</style>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<div
class="d-flex
bg-secondary text-white flex-row justify-content-start">
<div
class="my-flex-item_1">
My
Flex Item 1</div>
<div
class="my-flex-item_2">
My
Flex Item 2</div>
<div
class="my-flex-item_3">
My
Flex Item 3</div>
</div>
<div
class="d-flex
bg-secondary text-white flex-row justify-content-end">
<div
class="my-flex-item_1">
My
Flex Item 1</div>
<div
class="my-flex-item_2">
My
Flex Item 2</div>
<div
class="my-flex-item_3">
My
Flex Item 3</div>
</div>
<div
class="d-flex
bg-secondary text-white flex-row justify-content-center">
<div
class="my-flex-item_1">
My
Flex Item 1</div>
<div
class="my-flex-item_2">
My
Flex Item 2</div>
<div
class="my-flex-item_3">
My
Flex Item 3</div>
</div>
<div
class="d-flex
bg-secondary text-white flex-row justify-content-between">
<div
class="my-flex-item_1">
My
Flex Item 1</div>
<div
class="my-flex-item_2">
My
Flex Item 2</div>
<div
class="my-flex-item_3">
My
Flex Item 3</div>
</div>
<div
class="d-flex
bg-secondary text-white flex-row justify-content-around">
<div
class="my-flex-item_1">
My
Flex Item 1</div>
<div
class="my-flex-item_2">
My
Flex Item 2</div>
<div
class="my-flex-item_3">
My
Flex Item 3</div>
</div>
</div>
</body>
</html>
My Flex Item 1
My Flex Item 2
My Flex Item 3
My Flex Item 1
My Flex Item 2
My Flex Item 3
My Flex Item 1
My Flex Item 2
My Flex Item 3
My Flex Item 1
My Flex Item 2
My Flex Item 3
My Flex Item 1
My Flex Item 2
My Flex Item 3
Vertical Direction
You can use .flex-column or .flex-column-reverse to make flex vertical arrangement.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.my-flex-item_1
{
background-color:
Blue;
border:
1px
dotted
grey;
height:
48px;
width:130px;
}
.my-flex-item_2
{
background-color:
#F18D00;
border:
1px
dotted
grey;
height:
48px;
width:130px;
}
.my-flex-item_3
{
background-color:
#4CAF50;
border:
1px
dotted
grey;
height:
48px;
width:130px;
}
</style>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<div
class="d-flex
bg-secondary text-white flex-column">
<div
class="my-flex-item_1">
My
Flex Item 1</div>
<div
class="my-flex-item_2">
My
Flex Item 2</div>
<div
class="my-flex-item_3">
My
Flex Item 3</div>
</div>
<div
class="d-flex
bg-secondary text-white flex-column-reverse">
<div
class="my-flex-item_1">
My
Flex Item 1</div>
<div
class="my-flex-item_2">
My
Flex Item 2</div>
<div
class="my-flex-item_3">
My
Flex Item 3</div>
</div>
</div>
</body>
</html>
My Flex Item 1
My Flex Item 2
My Flex Item 3
My Flex Item 1
My Flex Item 2
My Flex Item 3
