Bootstrap Flexbox Utilities

Flexbox is a CSS layout system designed to arrange elements in a flexible row or column.

Flexbox is useful for:

• Horizontal layouts.
• Vertical layouts.
• Navigation bars.
• Button groups.
• Card layouts.
• Responsive components.
• Centering content.

The d-flex class changes an element into a Flexbox container.

<div class="d-flex">

    <div>Item One</div>

    <div>Item Two</div>

    <div>Item Three</div>

</div>

The child elements become flex items.

The d-inline-flex class creates an inline-level Flexbox container.

<div class="d-inline-flex">

    <div>One</div>

    <div>Two</div>

</div>

Unlike d-flex, the container behaves as an inline-level element.

Flex direction determines whether flex items are arranged in a row or column.

Bootstrap provides:

• flex-row
• flex-row-reverse
• flex-column
• flex-column-reverse

<div class="d-flex flex-column">

    <div>First</div>
    <div>Second</div>
    <div>Third</div>

</div>

The flex-row class arranges flex items horizontally in the normal row direction.

<div class="d-flex flex-row">

    <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>

The flex-row-reverse class arranges items in the reverse row direction.

<div class="d-flex flex-row-reverse">

    <div>One</div>

    <div>Two</div>

    <div>Three</div>

</div>

The visual order is reversed.

The flex-column class arranges flex items vertically.

<div class="d-flex flex-column">

    <div>First</div>

    <div>Second</div>

    <div>Third</div>

</div>

This is useful for vertical menus and stacked components.

The flex-column-reverse class arranges items vertically in reverse order.

<div
class="d-flex flex-column-reverse">

    <div>One</div>

    <div>Two</div>

    <div>Three</div>

</div>

The justify-content-start class aligns flex items at the start of the main axis.

<div
class="d-flex justify-content-start">

    <div>One</div>

    <div>Two</div>

</div>

The justify-content-center class centers flex items along the main axis.

<div
class="d-flex justify-content-center">

    <button class="btn btn-primary">
        Center
    </button>

</div>

This is commonly used to horizontally center items in a row.

The justify-content-end class aligns flex items at the end of the main axis.

<div
class="d-flex justify-content-end">

    <button class="btn btn-primary">
        Save
    </button>

</div>

The justify-content-between class places the first item at the start and the last item at the end, distributing remaining space between items.

<div
class="d-flex justify-content-between">

    <span>
        Logo
    </span>

    <span>
        Menu
    </span>

</div>

This is very useful for headers and navigation layouts.

The justify-content-around class distributes space around flex items.

<div
class="d-flex justify-content-around">

    <div>One</div>

    <div>Two</div>

    <div>Three</div>

</div>

The justify-content-evenly class distributes equal space between flex items and at the outer edges.

<div
class="d-flex justify-content-evenly">

    <div>One</div>

    <div>Two</div>

    <div>Three</div>

</div>

The align-items-start class aligns flex items at the start of the cross axis.

<div
class="d-flex align-items-start"
style="height:150px;">

    <div>
        Item
    </div>

</div>

The align-items-center class centers flex items along the cross axis.

<div
class="d-flex
align-items-center"
style="height:150px;">

    <div>

        Centered Item

    </div>

</div>

This is especially useful for vertical centering in a horizontal Flexbox layout.

The align-items-end class aligns flex items at the end of the cross axis.

<div
class="d-flex
align-items-end"
style="height:150px;">

    <div>
        Bottom Item
    </div>

</div>

The align-self-* utilities control the alignment of an individual flex item.

Common classes include:

• align-self-start
• align-self-center
• align-self-end
• align-self-baseline
• align-self-stretch

<div class="d-flex">

    <div class="align-self-start">
        Start
    </div>

    <div class="align-self-center">
        Center
    </div>

    <div class="align-self-end">
        End
    </div>

</div>

The flex-wrap class allows flex items to move onto multiple lines when there is not enough space.

<div
class="d-flex flex-wrap">

    <div class="p-3">One</div>
    <div class="p-3">Two</div>
    <div class="p-3">Three</div>
    <div class="p-3">Four</div>

</div>

This is useful for responsive layouts.

The flex-nowrap class keeps flex items on one line.

<div
class="d-flex flex-nowrap">

    <div>One</div>

    <div>Two</div>

    <div>Three</div>

</div>

When the content is wider than the available space, the items may overflow their container depending on the surrounding layout.

The flex-fill utility makes a flex item grow and fill available space relative to other flex items.

<div class="d-flex">

    <div class="flex-fill p-2">
        One
    </div>

    <div class="flex-fill p-2">
        Two
    </div>

</div>

The flex-grow-1 utility allows an item to grow and use available free space.

<div class="d-flex">

    <div>
        Fixed
    </div>

    <div class="flex-grow-1">
        Growing Item
    </div>

</div>

The growing item takes up the available remaining space.

The flex-shrink-0 utility prevents a flex item from shrinking when space becomes limited.

<div class="d-flex">

    <div class="flex-shrink-0">

        Fixed Width Content

    </div>

    <div>

        Other Content

    </div>

</div>

Bootstrap provides order utilities for changing the visual order of flex items.

<div class="d-flex">

    <div class="order-3">
        First HTML Element
    </div>

    <div class="order-1">
        Second HTML Element
    </div>

    <div class="order-2">
        Third HTML Element
    </div>

</div>

The visual order follows the order values rather than the original HTML order.

Flexbox utilities can be combined with responsive breakpoints.

<div
class="d-flex
flex-column
flex-md-row">

    <div>
        Left
    </div>

    <div>
        Right
    </div>

</div>

In this example, items are stacked vertically by default and arranged in a row from the medium breakpoint and above.

Bootstrap gap utilities can be combined with Flexbox to create consistent spacing between items.

<div
class="d-flex gap-3">

    <button class="btn btn-primary">
        Home
    </button>

    <button class="btn btn-success">
        Courses
    </button>

    <button class="btn btn-danger">
        Contact
    </button>

</div>

This avoids adding individual margin classes to every item.

Flexbox is one of the easiest ways to center content horizontally and vertically.

<div
class="d-flex
justify-content-center
align-items-center"
style="height:200px;">

    <h3>
        Centered Content
    </h3>

</div>

justify-content-center centers the item on the main axis, while align-items-center centers it on the cross axis.

Avoid these common mistakes:

• Forgetting to add d-flex.
• Confusing the main axis with the cross axis.
• Using justify-content when you actually need align-items.
• Forgetting flex-wrap in responsive layouts.
• Using too many order utilities unnecessarily.
• Expecting flex items to wrap when flex-nowrap is used.
• Using fixed widths without considering smaller screens.
• Ignoring gaps and spacing between items.

The following example creates a simple responsive navigation layout using Bootstrap Flexbox utilities.

<div
class="d-flex
flex-column
flex-md-row
justify-content-between
align-items-center
gap-3
p-3
bg-light
rounded">

    <div>

        <h4 class="mb-0">
            Soopro Pathshala
        </h4>

    </div>


    <div
    class="d-flex
    flex-column
    flex-md-row
    gap-2">

        <a href="#"
        class="btn btn-primary">
            Home
        </a>

        <a href="#"
        class="btn btn-success">
            Courses
        </a>

        <a href="#"
        class="btn btn-info">
            Contact
        </a>

    </div>

</div>

This complete example combines Flexbox direction, alignment, justification, gap, responsive utilities, and buttons.

<section class="py-5">

    <div class="container">

        <div
        class="d-flex
        flex-column
        flex-lg-row
        justify-content-between
        align-items-center
        gap-4
        p-4
        p-md-5
        bg-light
        rounded">


            <div>

                <h2 class="mb-3">

                    Learn Bootstrap

                </h2>


                <p class="mb-0">

                    Build responsive websites
                    using Bootstrap Flexbox
                    utilities.

                </p>

            </div>


            <div
            class="d-flex
            flex-column
            flex-sm-row
            gap-2">


                <button
                class="btn btn-primary">

                    Start Learning

                </button>


                <button
                class="btn btn-success">

                    View Course

                </button>


            </div>


        </div>

    </div>

</section>