Categories
Bootstrap HTML

Bootstrap 5 — More Flexbox Utilities

Spread the love

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to use flexbox classes with Bootstrap 5.

Align Items

We can use the align-items classes to change the alignment of flex items.

The items will be aligned vertically with these classes.

The choices include start , end , center , baseline , or stretch .

For example, we can write:

<div class="d-flex align-items-start">...</div>  
<div class="d-flex align-items-end">...</div>  
<div class="d-flex align-items-center">...</div>  
<div class="d-flex align-items-baseline">...</div>  
<div class="d-flex align-items-stretch">...</div>

align-items-start will put the items inside the div on the top.

align-items-end put the items at the bottom.

align-items-center center them vertically.

align-items-baseline put them at the top baseline.

align-items-stretch stretch the items from top to bottom.

Other choices of classes include:

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch
  • .align-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-stretch

Align Self

The align-self utility classes let us individually change the alignment on the cross axis.

Choices include start , end , center , baseline or stretch .

stretch is the default choice.

start will align the item to the top.

end aligns thr item to the bottom.

center vertically aligns the item.

baseline aligns the item to the baseline which is the top.

stretch stretches the content from top to bottom.

We can use them in individual elements:

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

Other choices include:

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-stretch

Fill

The .flex-fill class can be used on sibling elements to force them to widths equal to their content while taking up all available horizontal space.

For example, we can write:

<div class="d-flex bd-light">  
  <div class="p-2 flex-fill bd-light">Lorem ipsum dolor sit amet</div>  
  <div class="p-2 flex-fill bd-light">Lorem ipsum</div>  
  <div class="p-2 flex-fill bd-light">Lorem ipsum</div>  
</div>

We make the divs fill the space of the containers.

Other choices include:

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-fill

Grow and Shrink

Bootstrap 5 has flexbox classes for growing and shrinking items.

There’s the .flex-grow-* utility classes to do that.

We can use it to make an element fill all available space.

For example, we can write:

<div class="d-flex bd-highlight">  
  <div class="p-2 flex-grow-1 bd-highlight">lorem ipsum</div>  
  <div class="p-2 bd-highlight">lorem ipsum</div>  
  <div class="p-2 bd-highlight">lorem ipsum</div>  
</div>

Now the 1st div fills all the available space because we have the flex-grow-1 class applied to it.

Conclusion

We can use Bootstrap 5 classes to add flexbox properties to our elements so that we don’t have to write them from scratch ourselves.

Leave a Reply

Your email address will not be published. Required fields are marked *