Bootstrap 5 Flex Align Content Last Updated : 26 Apr, 2024 Comments Improve Suggest changes Like Article Like Report 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: ClassDescriptionalign-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. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> </head> <body> <div class="container text-center "> <h1 class="text-success">GeeksforGeeks</h1> <h5>Bootstrap 5 flex Align content</h5> </div> <div class="d-flex flex-column bd-highlight mb-3 flex-wrap align-content-start"> <div class="border p-2 bd-highlight"> Flex item 1 Hello Geeks wellcome </div> <div class="border p-2 bd-highlight"> Flex item 2 Hello Geeks wellcome </div> <div class="border p-2 bd-highlight"> Flex item 3 Hello Geeks wellcome </div> </div> <div class="d-flex flex-column bd-highlight mb-3 flex-wrap align-content-center"> <div class="border p-2 bd-highlight"> Flex item 1 Hello Geeks wellcome </div> <div class="border p-2 bd-highlight"> Flex item 2 Hello Geeks wellcome </div> <div class="border p-2 bd-highlight"> Flex item 3 Hello Geeks wellcome </div> </div> </body> </html> Output: Example 2: In this example, we align the content to the around and the end of the cross axis using align content classes. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> </head> <body> <div class="container text-center "> <h1 class="text-success">GeeksforGeeks</h1> <h5>Bootstrap 5 flex Align content</h5> </div> <div class="d-flex flex-column bd-highlight mb-3 flex-wrap align-content-around"> <div class="border p-2 bd-highlight"> Flex item 1 Hello Geeks wellcome </div> <div class="border p-2 bd-highlight"> Flex item 2 Hello Geeks wellcome </div> <div class="border p-2 bd-highlight"> Flex item 3 Hello Geeks wellcome </div> </div> <div class="d-flex flex-column bd-highlight mb-3 flex-wrap align-content-end"> <div class="border p-2 bd-highlight"> Flex item 1 Hello Geeks wellcome </div> <div class="border p-2 bd-highlight"> Flex item 2 Hello Geeks wellcome </div> <div class="border p-2 bd-highlight"> Flex item 3 Hello Geeks wellcome </div> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article Bootstrap 5 Flex Align Self B bulbultomar Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads Bootstrap 5 Flex Align Self Bootstrap5 Flex Align Self property is used to change each item's alignment individually on the cross-axis. By default, it starts from the y-axis, if we want to change the alignment on the x-axis change the value of the class flex-direction to the column. There are some classes that can be used to s 3 min read Bootstrap 5 Flex Justify Content Bootstrap 5 Flex Justify Content aligns items along the main axis, distributing space between or around them, facilitating flexible layouts and responsive design with various alignment options. iframe { width: 100%; height: 520px;} @media (max-width: 1146px) {.article--viewer .a-wrapper .content .te 3 min read Bootstrap 5 Flex Align items Bootstrap 5 Flex Align items to change the alignment of flex items on the cross-axis using align-items classes. The CSS align-items property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. iframe { width: 100%; height: 500px;} @med 3 min read Bootstrap 5 Text Alignment Bootstrap 5 text alignment classes are used to realign components with the start, end, and center variation. It can be used in the same viewport width breakpoints as the grid system. iframe { width: 100%; height: 450px;} @media (max-width: 1145px) {.article--viewer .a-wrapper .content .text iframe { 2 min read Bootstrap 5 Columns Alignment In bootstrap 5, we can use flexbox alignment utilities to align our columns horizontally and vertically without using CSS. The following are the possible alignment ways: Vertical alignment: For aligning the column vertically we use the flexbox utilities to get desired alignment system.Horizontal ali 2 min read Bootstrap 5 Flex Direction Bootstrap 5 Flex Direction is set by using the direction utilities for flex items in a flex container. The default browser setting is for the horizontal direction with the use of the flex-row class. For horizontal direction from the opposite side, the class used is flex-row-reverse. Use flex-column 3 min read Like