Bootstrap 4: Flexbox Grid Tutorial by Bootstrap CSS Girl



https://i.ytimg.com/vi/JW6h8WdfI_c/hqdefault.jpg



In this Bootstrap 4 Flexbox Grid Tutorial, I will discuss the flexbox utility classes within Bootstrap 4. I will show code examples and illustrations. Topics include flex direction with flex-row and flex-column, as well as, flex item alignment with justify-content and align-items classes.

Flex Grid
You use the justify-content classes in Bootstrap 4 to align flex items along the main axis.
You use the align-item classes in Bootstrap 4 to align flex items along the cross axis.
For flex-row and flex-row-reverse classes, the main axis is horizontal and the cross axis is vertical.
For flex-column and flex-column-reverse classes, the main axis is vertical and the cross axis is horizontal.

If you have any questions or tutorial requests, leave a comment. Please subscribe to my channel Bootstrap CSS Girl.

Original source


5 responses to “Bootstrap 4: Flexbox Grid Tutorial by Bootstrap CSS Girl”

Leave a Reply