Bootstrap Flex

What is Bootstrap Flex ?

Rapidly deal with the design, arrangement, and measuring of lattice sections, route, segments, and more with a full set-up of responsive flexbox utilities.

Empower Bootstrap flex practices

Apply display utilities to make a flexbox holder and transform direct youngsters elements into flex things. Flex holders and things can be changed further with extra flex properties.

Syntax:-

flexbox container

<div class=”d-flex p-2 bd-highlight”>I’m a flexbox container!</div>

Syntax:-

inline flexbox container

<div class=”d-inline-flex p-2 bd-highlight”>I’m an inline flexbox container!</div>

Responsive variations .d-flex and .d-inline-flex.

1. .d-flex

2. .d-inline-flex

3. .d-sm-flex

4. .d-sm-inline-flex

5. .d-md-flex

6. .d-md-inline-flex

7. .d-lg-flex

8. .d-lg-inline-flex

9. .d-xl-flex

10. .d-xl-inline-flex

Direction

We can set the course of flex things in a flex holder with bearing utilities. Much of the time you can discard the flat class here as the program default is line. Be that as it may, you may experience circumstances where you expected to unequivocally set this worth (like responsive designs).

We can Use

1. .flex-line to set a flat heading (the program default).

2. .flex-line reverse to start the flat heading from the contrary side.

Example:-

<div class=”d-flex flex-row bd-highlight mb-3″> <div class=”p-2 bd-highlight”>Flex item 1</div> <div class=”p-2 bd-highlight”>Flex item 2</div> <div class=”p-2 bd-highlight”>Flex item 3</div> </div> <div class=”d-flex flex-row-reverse bd-highlight”> <div class=”p-2 bd-highlight”>Flex item 1</div> <div class=”p-2 bd-highlight”>Flex item 2</div> <div class=”p-2 bd-highlight”>Flex item 3</div> </div>

Use .flex-column to set a vertical course, or .flex-section reverse to start the vertical heading from the contrary side.

Example:-

<div class=”d-flex flex-column bd-highlight mb-3″> <div class=”p-2 bd-highlight”>Flex item 1</div> <div class=”p-2 bd-highlight”>Flex item 2</div> <div class=”p-2 bd-highlight”>Flex item 3</div> </div> <div class=”d-flex flex-column-reverse bd-highlight”> <div class=”p-2 bd-highlight”>Flex item 1</div> <div class=”p-2 bd-highlight”>Flex item 2</div> <div class=”p-2 bd-highlight”>Flex item 3</div> </div>

Let’s see Responsive variations  for flex-direction.

1. .flex-row

2. .flex-row-reverse

3. .flex-column

4. .flex-column-reverse

5. .flex-sm-row

6. .flex-sm-row-reverse

7. .flex-sm-column

8. .flex-sm-column-reverse

9. .flex-md-row

10. .flex-md-row-reverse

11. .flex-md-column

12. .flex-md-column-reverse

13. .flex-lg-row

14. .flex-lg-row-reverse

15. .flex-lg-column

16. .flex-lg-column-reverse

17. .flex-xl-row

18. .flex-xl-row-reverse

19. .flex-xl-column

20. .flex-xl-column-reverse

Justify content

Use justify-content utilities on flexbox holders to change the arrangement of flex things on the fundamental pivot (the x-hub to begin, y-hub if flex-heading: segment). Pick from start (browser default), end, center, between, or around.

Example:-

<div class=”d-flex justify-content-start”>Menu1</div> <div class=”d-flex justify-content-end”>Menu2</div> <div class=”d-flex justify-content-center”>Menu3</div> <div class=”d-flex justify-content-between”>Menu4</div> <div class=”d-flex justify-content-around”>Menu5</div>

Responsive variations  for justify-content.

1. .justify-content-start

2. .justify-content-end

3. .justify-content-center

4. .justify-content-between

5. .justify-content-around

6. .justify-content-sm-start

7. .justify-content-sm-end

8. .justify-content-sm-center

9. .justify-content-sm-between

10. .justify-content-sm-around

11. .justify-content-md-start

12. .justify-content-md-end

13. .justify-content-md-center

14. .justify-content-md-between

15. .justify-content-md-around

16. .justify-content-lg-start

17. .justify-content-lg-end

18. .justify-content-lg-center

19. .justify-content-lg-between

20. .justify-content-lg-around

21. .justify-content-xl-start

22. .justify-content-xl-end

23. .justify-content-xl-center

24. .justify-content-xl-between

25. .justify-content-xl-around

Align items

Use align-items utilities on flexbox compartments to change the arrangement of flex things on the cross hub (the y-pivot to begin, x-hub if flex-bearing: segment).

Example:-

<div class=”d-flex align-items-start”>Item1</div> <div class=”d-flex align-items-end”>Item2</div> <div class=”d-flex align-items-center”>Item3</div> <div class=”d-flex align-items-baseline”>Item4</div> <div class=”d-flex align-items-stretch”>Item5</div>

Responsive variations for align-items.

1. .align-items-start

2. .align-items-end

3. .align-items-center

4. .align-items-baseline

5. .align-items-stretch

6. .align-items-sm-start

7. .align-items-sm-end

8. .align-items-sm-center

9. .align-items-sm-baseline

10. .align-items-sm-stretch

11. .align-items-md-start

12. .align-items-md-end

13. .align-items-md-center

14. .align-items-md-baseline

15. .align-items-md-stretch

16. .align-items-lg-start

17. .align-items-lg-end

18. .align-items-lg-center

19. .align-items-lg-baseline

20. .align-items-lg-stretch

21. .align-items-xl-start

22. .align-items-xl-end

23. .align-items-xl-center

24. .align-items-xl-baseline

25. .align-items-xl-stretch

Align self

We can Use adjust self utilities on flexbox things to separately change their arrangement on the cross hub (the y-hub to begin, x-hub if flex-bearing: segment).

Example:-

<div class=”align-self-start”>Aligned flex item</div> <div class=”align-self-end”>Aligned flex item</div> <div class=”align-self-center”>Shift flex item</div> <div class=”align-self-baseline”>Shift flex item</div> <div class=”align-self-stretch”>Aligned flex item</div>

Grow and shrink

We can Use .flex-develop * utilities to flip a flex thing’s capacity to develop to occupy accessible space. In the model underneath, the .flex-grow-1 components utilizes all accessible space it can, while permitting the staying two flex things their vital space.

Example:-

<div class=”d-flex bd-highlight”> <div class=”p-2 flex-grow-1 bd-highlight”>Flex item</div> <div class=”p-2 bd-highlight”>Flex item</div> <div class=”p-2 bd-highlight”>Third flex item</div> </div>

Auto margins

Flexbox can do some quite magnificent things when you blend flex arrangements with auto edges.

Example:-

<div class=”d-flex bd-highlight mb-3″> <div class=”p-2 bd-highlight”>Flex item</div> <div class=”p-2 bd-highlight”>……….</div> <div class=”p-2 bd-highlight”>Flex item</div> </div>

<div class=”d-flex bd-highlight mb-3″> <div class=”mr-auto p-2 bd-highlight”>Flex item</div> <div class=”p-2 bd-highlight”>………</div> <div class=”p-2 bd-highlight”>Flex item</div> </div>

<div class=”d-flex bd-highlight mb-3″> <div class=”p-2 bd-highlight”>Flex item</div> <div class=”p-2 bd-highlight”>………</div> <div class=”ml-auto p-2 bd-highlight”>Flex item</div> </div>