<!DOCTYPE html>
<html lang="en">

<head>
	<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.4.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="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>
</body>

</html>


codemirror

## Explanation


* Line 23:  We have a `div` element with the `class` attribute of `d-flex`. This class applies flex styling to the `div` element and every other element it wraps. Other values in the class attribute of the `div` add styling to the flex but are not determinants for the Bootstrap flex.

* Line 24 to 26: These are the contents of the `d-flex`
 `class` attribute. They add optional styling like colors.

* Line 27: We close the `div` with the `d-flex` class attribute.




How to use the Bootstrap 4 flex

Flex in Bootstrap 4 ensures responsive layouts by managing alignment and size without using positions or floats.

How to use the Bootstrap 4 flex

Overview

Explanation