+91 99674 50288

Bootstrap Flex & Its Uttilities

The Flexible Box Layout Module in bootstrap is employed for planning the versatile and responsive layout structure. it's utilized in Bootstrap four.

Apply display utilities to form a flexbox container and transform direct child elements into flex things. Flexbox containers and items are able to be developed with an additional flex property.

To create a simple flexbox container d-flex class is used


class="d-flex p-2"

To create an inline flexbox container class d-inline-flex is used


class="d-inline-flex p-2"

For all breakpoints(sm, md, lg, xl) like .d-sm-flex, .d-sm-inline-flex, etc .d-flex and .d-inline-flex can be used. 


class="d-sm-flex p-2"

class="d-sm-inline-flex p-2"


Direction utilities set the direction of flex items in a various flex container. In most cases horizontal class because the browser default is row. However, you'll encounter things wherever you required to expressly set this worth (like responsive layouts).

 class="d-flex flex-row bd-highlight"

 class="d-flex flex-row-reverse bd-highlight"

Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to begin the horizontal direction from the alternative aspect.

 class="d-flex flex-column bd-highlight mb-3">

 class="d-flex flex-column-reverse bd-highlight"

Justify content

Use justify-content utilities on flexbox containers to alter the alignment of flex things on the most axis (the coordinate axis to start out, coordinate axis if flex-direction: column). choose from start (default), end, center, around or between.

 class="d-flex justify-content-start"

 class="d-flex justify-content-end"

 class="d-flex justify-content-center"

 class="d-flex justify-content-between"

 class="d-flex justify-content-around"

Align items

Align-items utilities on flexbox containers is udes to alter the alignment of flex things on the cross axis (the coordinate axis to start out, coordinate axis if flex-direction: column). choose from stretch (Default), baseline, end, center, or Start.

 class="d-flex align-items-start"

 class="d-flex align-items-end"

 class="d-flex align-items-center"

 class="d-flex align-items-baseline"

 class="d-flex align-items-stretch"

Align self

Use align-self utilities on flexbox things to singly modification their alignment on the cross axis (the coordinate axis to start out, coordinate axis if flex-direction: column). choose between identical choices as align-items: start, end, center, baseline, or stretch (browser default).

 class="align-self-start">Aligned flex item

 class="align-self-end">Aligned flex item

 class="align-self-center">Aligned flex item

 class="align-self-baseline">Aligned flex item

 class="align-self-stretch">Aligned flex item


Change however flex things wrap in a very flex instrumentality. choose between no wrapping in any respect (the browser default) with .flex-nowrap, wrapping with .flex-wrap, or reverse wrapping with .flex-wrap-reverse.

 class="d-flex flex-nowrap”

 class="d-flex flex-wrap"

 class="d-flex flex-wrap-reverse"

Change the visual order of specific flex things with a few of order utilities. we have a tendency to solely offer choices for creating AN item 1st or last, still as a reset to use the DOM order. As order takes any whole number worth (e.g., 5), add custom CSS for any further values required.

 class="d-flex flex-nowrap bd-highlight"

   class="order-3 p-2 bd-highlight"

   class="order-2 p-2 bd-highlight"

   class="order-1 p-2 bd-highlight"

Align content

Align-content utilities on flexbox containers is use to align flex items together on the cross axis. opt for from start (default), stretch, between, around, end, center. To demonstrate these utilities, we’ve enforced flex-wrap: wrap and exaggerated the number of flex things.

Heads up! This property has no impact on single rows of flex things.

 class="d-flex align-content-start flex-wrap"

 class="d-flex align-content-end flex-wrap"

 class="d-flex align-content-center flex-wrap"

 class="d-flex align-content-between flex-wrap"

 class="d-flex align-content-around flex-wrap"

 class="d-flex align-content-stretch flex-wrap"