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
Syntax:
class="d-flex p-2"
To create an inline flexbox container class d-inline-flex is used
Syntax:
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.
Syntax:
class="d-sm-flex p-2"
class="d-sm-inline-flex p-2"
Direction
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
Wrap
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"