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.

• .d-flex
• .d-inline-flex
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-flex
• .d-md-inline-flex
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-flex
• .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.

 

• .flex-row
• .flex-row-reverse
• .flex-column
• .flex-column-reverse
• .flex-sm-row
• .flex-sm-row-reverse
• .flex-sm-column
• .flex-sm-column-reverse
• .flex-md-row
• .flex-md-row-reverse
• .flex-md-column
• .flex-md-column-reverse
• .flex-lg-row
• .flex-lg-row-reverse
• .flex-lg-column
• .flex-lg-column-reverse
• .flex-xl-row
• .flex-xl-row-reverse
• .flex-xl-column
• .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>