Bootstrap 5 TutorialLesson 33Free preview
BS5 Flex
This lesson is part of Bootstrap · All levels
Summary
The flex utility Bootstrap makes it easier to set up flexboxes without writing manual CSS, such as .d-flex to enable flex containers and .justify-content-center to focus content. Direction control uses .flex-row and .flex-column, while .flex-wrap allows row moving items. Automatic margins such as .me-auto are useful for separating elements in a flex.
Key points
- Activate the flexbox layout on the element.
- .justify-content-* Set the main alignment: start, center, end, between.
- The cross-alignment is set up: start, center, end, stretch. (.align-items-)
- .flex-row and .flex-column set directions; .flex-wrap allows row movements.
- .flex-grow-1 and .flex-shrink-0 set the item extension.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.