O conceito
Quase todo mundo decora que justify-content alinha na
horizontal e align-items na vertical. Isso está
errado — e é por isso que, mais
cedo ou mais tarde, o alinhamento sai no lugar inesperado.
O certo é: justify-content alinha ao longo do
eixo principal e
align-items ao longo do
eixo cruzado. Quem define qual é
qual é o flex-direction:
Eixo principal horizontal →
justify-content mexe na horizontal e
align-items na vertical.
Eixo principal vertical →
os dois trocam de papel.
Agora justify-content mexe na vertical.
No Bootstrap tudo isso vira classe utilitária:
d-flex liga o flexbox, flex-column vira o
eixo, justify-content-between e
align-items-center alinham. Os nomes são idênticos aos
do CSS, só com prefixo.
O HTML que você acabou de montar