The flex classes are used to control the layout of flexbox components.
Example:
<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</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>
Output:
Inline Flexbox Container: The .d-inline-flex class is used to create an inline flexbox container.
Example:
<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</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>
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:
<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</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>
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:
<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</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>
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:
<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</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>
Output:
Fill/Equal Widths: The .flex-fill class is used to force the flex items into equal widths.
Example:
<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</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>
Output:
Grow: The .flex-grow-1 class is used on flexbox to take the rest of space.
Example:
<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</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>
Output:
Order: The .order class is used to change the order of flexbox. The valid order classes
are from 0 to 12.
Example:
<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</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>
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:
<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</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>
Output:
Wrap: The .flex-nowrap (default), .flex-wrap or .flex-wrap-reverse classes are used to control the wrap of flex items.
Example:
<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</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>
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 than one rows of flex items.
Example:
<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</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>
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:
<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</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>
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:
<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</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>
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari