Alinhamento
As classes .row
possuem comportamento flexível, portanto, podem utilizar as classes de alinhamento nas divs filhas. Caso a div não possua essa classe, você poderá adicionar a classe .d-flex
para que ela tenha o mesmo comportamento.
Vertical
Utilize as classes com .row
ou .d-flex
:
.align-items-start
para alinhar no início (topo)Div 1
Div 2
Div 3
.align-items-center
para alinhar no meioDiv 1
Div 2
Div 3
.align-items-end
para alinhar no fim (fundo)Div 1
Div 2
Div 3
Exemplo
- Vanilla
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-sm-6 col-lg-4">Div 1</div>
<div class="col-12 col-sm-6 col-lg-4">Div 2</div>
<div class="col-12 col-sm-6 col-lg-4">Div 3</div>
</div>
</div>
Horizontal
Utilize as classes com .row
ou .d-flex
:
.justify-content-start
para alinhar no início da linhaDiv 1
Div 2
Div 3
.justify-content-center
para alinhar no meio da linhaDiv 1
Div 2
Div 3
.justify-content-end
para alinhar no fim da linhaDiv 1
Div 2
Div 3
Exemplo
- Vanilla
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-sm-6 col-lg-4">Div 1</div>
<div class="col-12 col-sm-6 col-lg-4">Div 2</div>
<div class="col-12 col-sm-6 col-lg-4">Div 3</div>
</div>
</div>