What is the difference between Bootstrap 5 flex utilities and grid system?

Asked on Jun 01, 2025

1 Answer

Bootstrap 5 offers both flex utilities and a grid system to create responsive layouts, but they serve different purposes. Flex utilities provide a set of classes to control the alignment, direction, and order of elements within a container, while the grid system is a more structured way to create complex layouts using rows and columns.

<!-- BEGIN COPY / PASTE -->
        <!-- Example of Flex Utilities -->
        <div class="d-flex justify-content-center align-items-center" style="height: 100px;">
            <div>Centered Item</div>
        </div>

        <!-- Example of Grid System -->
        <div class="container">
            <div class="row">
                <div class="col-md-4">Column 1</div>
                <div class="col-md-4">Column 2</div>
                <div class="col-md-4">Column 3</div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

Flex utilities:

Use classes like `d-flex`, `justify-content-*`, and `align-items-*` to control layout.
Best for aligning elements within a container.

Grid system:

Uses a 12-column layout with classes like `row` and `col-*`.
Ideal for creating structured, multi-column layouts.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions