Bootstrap Flex Item Classes - Bootstrap5 Tutorial 25

Notes for You:: Bootstrap Flex Item Classes.

align-self-*-[value]
- used to vertically align individual flex items
align-self- *-start
align-self-*-center
align-self-*-end
align-self-*-stretch

Example Code:
﹤div class="border border-dark d-flex" style="height:100px;"﹥
﹤div class="border border-primary align-self-start"﹥Div1﹤/div﹥
﹤div class="border border-secondary align-self-center"﹥Div2﹤/div﹥
﹤div class="border border-success align-self-end"﹥Div3﹤/div﹥
﹤div class="border border-warning"﹥Div4﹤/div﹥
﹤/div﹥


order-*-[value]
- used to customize order of individual flex items
order-*- 0
to
order-*- 12

Example code:
﹤div class="border border-dark d-flex"﹥
﹤div class="border border-primary order-4"﹥Div1﹤/div﹥
﹤div class="border border-secondary order-3"﹥Div2﹤/div﹥
﹤div class="border border-success order-2"﹥Div3﹤/div﹥
﹤div class="border border-warning order-1"﹥Div4﹤/div﹥
﹤/div﹥


Auto margin the individual items:
ms-auto, me-auto, mx-auto,
mt-auto, mb-auto, my-auto

Example Code:
﹤div class="border border-dark d-flex"﹥
﹤div class="border border-primary me-auto"﹥Div1﹤/div﹥
﹤div class="border border-secondary"﹥Div2﹤/div﹥
﹤div class="border border-success"﹥Div3﹤/div﹥
﹤div class="border border-warning ms-auto"﹥Div4﹤/div﹥
﹤/div﹥



Stretching Flex Items Horizontally:
- only Bootstrap 4.1 and above versions support flex-*-fill, flex-*-grow

Note: if flex-fill and flex-grow are not working use CSS property width

Example Code:
﹤div class="border border-dark d-flex"﹥
﹤div class="border border-primary flex-fill"﹥Div1﹤/div﹥
﹤div class="border border-secondary flex-fill"﹥Div2﹤/div﹥
﹤div class="border border-success flex-fill"﹥Div3﹤/div﹥
﹤/div﹥


﹤div class="border border-dark d-flex"﹥
﹤div class="border border-primary flex-grow-1"﹥Div1﹤/div﹥
﹤div class="border border-secondary"﹥Div2﹤/div﹥
﹤div class="border border-success"﹥Div3﹤/div﹥
﹤/div﹥


Example Code:
﹤div class='menu-container text-white bg-primary p2 d-flex justify-
content-center'﹥
﹤div class='menu border border-white w-75 d-flex justify-
content-between'﹥
﹤div class='date'﹥Aug 14, 2016﹤/div﹥
﹤div class='links d-flex'﹥
﹤div class='signup'﹥Sign Up﹤/div﹥
﹤div class='login ml-2'﹥Login﹤/div﹥
﹤/div﹥
﹤/div﹥
﹤/div﹥

﹤div class='header-container text-white bg-warning d-flex justify-
content-center'﹥
﹤div class='header border border-white w-75 d-flex justify-
content-between align-items-center' style="height:200px;"﹥
﹤div class='subscribe align-self-end mb-
1'﹥SUBSCRIBE﹤/div﹥
﹤div class='logo'﹥INFINITY JEWELLERS﹤/div﹥
﹤div class='social align-self-end mb-1'﹥SHARE﹤/div﹥
﹤/div﹥
﹤/div﹥

﹤div class='photo-grid-container bg-success d-flex justify-content-
center'﹥
﹤div class='photo-grid w-75 d-flex justify-content-center
flex-wrap'﹥
﹤div class='photo-grid-item border border-white'
style="width:300px;height:300px;"﹥1﹤/div﹥
﹤div class='photo-grid-item border border-white'
style="width:300px;height:300px;"﹥2﹤/div﹥
﹤div class='photo-grid-item border border-white'
style="width:300px;height:300px;"﹥3﹤/div﹥
﹤div class='photo-grid-item border border-white'
style="width:300px;height:300px;"﹥4﹤/div﹥
﹤div class='photo-grid-item border border-white'
style="width:300px;height:300px;"﹥5﹤/div﹥
﹤/div﹥
﹤/div﹥

﹤div class='footer d-flex justify-content-between bg-info'﹥
﹤div class='footer-item footer-one border border-white flex-
grow-1' style="height:200px;"﹥Hi﹤/div﹥
﹤div class='footer-item footer-two border border-white flex-
grow-1' style="height:200px;"﹥Hi﹤/div﹥
﹤div class='footer-item footer-three border border-white
flex-grow-1' style="height:200px;"﹥Hi﹤/div﹥
﹤/div﹥


Note:
- replace ﹤ with less-than symbol.
- replace ﹥ with greater-than symbol.

=========================================

Follow the link for previous video:
https://youtu.be/LTIqVVMURJs

=========================================

Bootstrap5 Tutorials Playlist:
https://www.youtube.com/playlist?list=PLdE8ESr9Th_tgGKttdOp9YWporo2zEr5Q

=========================================
Watch my other useful tutorials:-

PHP Tutorials Playlist:-
https://www.youtube.com/playlist?list=PLdE8ESr9Th_s8zash4d8He_49QS_VVmAG

=========================================

Subscribe to our YouTube channel:-
https://www.youtube.com/chidrestechtutorials

=========================================
Hash Tags:-
#ChidresTechTutorials #Bootstrap #BootstrapTutorial #Bootstrap5