VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-flex-align-content/

⇱ Bootstrap 5 Flex Align Content - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 Flex Align Content

Last Updated : 26 Apr, 2024

Bootstrap 5 Flex Align Content provides utilities for aligning flex items along the cross-axis. Options include start, end, center, around, and stretch, accommodating various layout requirements across different screen sizes.

Bootstrap 5 Flex Align Content Classes:

ClassDescription
align-content-startAligns content to the start of the cross-axis for all screen sizes.
align-content-endAligns content to the end of the cross-axis for all screen sizes.
align-content-centerAligns content to the center of the cross-axis for all screen sizes.
align-content-aroundAligns content around the cross-axis for all screen sizes.
align-content-stretchAligns content to stretch across the cross-axis for all screen sizes.

Syntax:

 <div class="d-flex flex-wrap align-content-*">
 ... 
</div>

Example 1: In this example, we align the content to the start and the center of the cross-axis using align content classes.

Output:

👁 Bootstrap 5 Flex Align Content

Example 2: In this example, we align the content to the around and the end of the cross axis using align content classes.

Output:

👁 Bootstrap 5 Flex Align Content
Comment

Explore