Align Items
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.
Class
|
Properties
|
---|---|
align-items-start | |
align-items-end | |
align-items-center | |
align-items-baseline | |
align-items-stretch |
Start
Use the .flex-grow-1
class on any flex element to fill all the available space, while allowing the remaining two flex items their necessary space.
<div class="d-flex align-items-start">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
End
Use the .flex-grow-1
class on any flex element to fill all the available space, while allowing the remaining two flex items their necessary space.
<div class="d-flex align-items-end">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Center
Use the .flex-grow-1
class on any flex element to fill all the available space, while allowing the remaining two flex items their necessary space.
<div class="d-flex align-items-center">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Baseline
Use the .flex-grow-1
class on any flex element to fill all the available space, while allowing the remaining two flex items their necessary space.
<div class="d-flex align-items-baseline">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Stretch
Use the .flex-grow-1
class on any flex element to fill all the available space, while allowing the remaining two flex items their necessary space.
<div class="d-flex align-items-stretch">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Responsive
Responsive variations also exist for each align-items value. Use the .align-items-{breakpoint}-{value}
for sm, md, lg, xl, and xxl to any existing align-items
utility.
<div class="align-items-md-center ..."></div>