Prev Next

BS5 Flex

Bootstrap 5 Flex utilities provide a quick and responsive way to align and distribute elements using the CSS Flexible Box Layout (Flexbox).

Key Topics

Basic Flex

Activate flexbox on a container by adding the .d-flex class.

<div class="d-flex">
    <div class="p-2 bg-primary text-white">Item 1</div>
    <div class="p-2 bg-secondary text-white">Item 2</div>
    <div class="p-2 bg-success text-white">Item 3</div>
</div>

Explanation: The .d-flex class applies flexbox layout to the container, aligning its children horizontally by default.

Flex Alignment

Align items along the main axis or cross-axis using alignment utilities like .justify-content-* and .align-items-*.

<div class="d-flex justify-content-between">
    <div class="p-2 bg-primary text-white">Left</div>
    <div class="p-2 bg-secondary text-white">Right</div>
</div>

<div class="d-flex align-items-center" style="height: 100px;">
    <div class="p-2 bg-success text-white">Centered</div>
</div>

Explanation: The .justify-content-* class aligns items horizontally, while .align-items-* aligns items vertically within the flex container.

Flex Wrapping

Enable wrapping of flex items using the .flex-wrap class.

<div class="d-flex flex-wrap">
    <div class="p-2 bg-primary text-white" style="width: 100px;">Item 1</div>
    <div class="p-2 bg-secondary text-white" style="width: 100px;">Item 2</div>
    <div class="p-2 bg-success text-white" style="width: 100px;">Item 3</div>
    <div class="p-2 bg-danger text-white" style="width: 100px;">Item 4</div>
</div>

Explanation: The .flex-wrap class ensures that flex items wrap onto multiple lines when they exceed the container width.

Complete Flex Example

Below is a complete example demonstrating flexbox utilities for alignment, spacing, and wrapping.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Flex Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2 class="text-center">Bootstrap Flexbox</h2>
        <div class="d-flex justify-content-between mb-3">
            <div class="p-2 bg-primary text-white">Left</div>
            <div class="p-2 bg-secondary text-white">Right</div>
        </div>
        <div class="d-flex align-items-center mb-3" style="height: 100px;">
            <div class="p-2 bg-success text-white">Centered</div>
        </div>
        <div class="d-flex flex-wrap">
            <div class="p-2 bg-primary text-white" style="width: 100px;">Item 1</div>
            <div class="p-2 bg-secondary text-white" style="width: 100px;">Item 2</div>
            <div class="p-2 bg-success text-white" style="width: 100px;">Item 3</div>
            <div class="p-2 bg-danger text-white" style="width: 100px;">Item 4</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example combines multiple flex utilities for practical and responsive layouts.

Key Takeaways

  • Use .d-flex to enable flexbox on a container.
  • Align items using .justify-content-* and .align-items-*.
  • Enable item wrapping with .flex-wrap for responsive layouts.
Prev Next