Blog

Bootstrap Flex

 

Thank you for reading this post, don't forget to subscribe!

 

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>

 

 

×