Bootstrap Flex
Flexbox is a CSS layout model for arranging items in a row or a column, and Bootstrap wraps it in easy utility classes. With flex utilities you can align, space, and reorder elements without writing custom CSS, which makes them the go-to tool for navbars, button rows, cards, and centered content.
Turning On Flexbox
To make an element a flex container, add the class .d-flex. Its direct children immediately line up in a row. If you want them stacked in a column instead, add .flex-column. That single decision, row or column, sets the main axis that all the other flex utilities work along.
A row and a column
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="d-flex">
<div class="p-2 bg-primary text-white">One</div>
<div class="p-2 bg-success text-white">Two</div>
<div class="p-2 bg-danger text-white">Three</div>
</div>
<div class="d-flex flex-column mt-3">
<div class="p-2 bg-secondary text-white">Top</div>
<div class="p-2 bg-dark text-white">Bottom</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Justifying Content (Main Axis)
The .justify-content-* classes control how items are spread along the main axis. In a row, that means horizontal spacing. These are the classes you reach for to push items apart or bunch them together.
Spacing items apart
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="d-flex justify-content-between bg-light p-2">
<span>Left</span>
<span>Middle</span>
<span>Right</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Aligning Items (Cross Axis)
While justify-content works along the main axis, .align-items-* works across it. In a row, these classes control vertical alignment. Combining justify-content-center with align-items-center is the classic trick for perfectly centering something in a box.
Perfectly centered content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="d-flex justify-content-center align-items-center bg-light" style="height: 150px;">
<span class="fw-bold">I am dead center.</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>- .flex-wrap lets items wrap onto new lines when they run out of room.
- .flex-fill makes items grow to share the available space equally.
- .gap-2 or .gap-3 adds consistent spacing between flex items.
- Responsive versions like .d-md-flex or .flex-lg-row apply flex behavior only at certain screen sizes.
Exercise: Bootstrap Flex
What does adding .d-flex to a container do by itself?
