Columns build on the grid’s flexbox architecture. Flexbox means we have options for changing individual columns and modifying groups of columns at the row level. You choose how columns grow, shrink, or otherwise change.

When building grid layouts, all content goes in columns. The hierarchy of Bootstrap’s grid goes from container to row to column to your content. On rare occasions, you may combine content and column, but be aware there can be unintended consequences.

Bootstrap includes predefined classes for creating fast, responsive layouts. With six breakpoints and a dozen columns at each grid tier, we have dozens of classes already built for you to create your desired layouts. This can be disabled via Sass if you wish.

1. vertical alignment

<div class="row justify-content-start"></div>
<div class="row justify-content-end"></div>
<div class="row justify-content-center"></div>
<div class="row justify-content-between"></div>
<div class="row justify-content-evenly"></div>

<div class="row">
	<div class="col align-self-start"></div>
	<div class="col align-self-center"></div>
	<div class="col align-self-end"></div>
</div>

<div class="row">
	<div class="col align-self-start"></div>
	<div class="col align-self-center"></div>
	<div class="col align-self-end"></div>
</div>