Flexbox, Display e Helpers Visuais

Flexbox

O Bootstrap utiliza Flexbox como base de seu sistema de grid e oferece utilitários para aplicar essa mesma lógica em qualquer elemento.

Ativando Flexbox

<div class="d-flex">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Aplica display flex no container.

Direção dos Itens

<div class="d-flex flex-row">Itens na horizontal (padrão)</div>
<div class="d-flex flex-column">Itens na vertical</div>

Justificando Conteúdo (eixo principal)

<div class="d-flex justify-content-start">Alinhado à esquerda</div>
<div class="d-flex justify-content-center">Centralizado</div>
<div class="d-flex justify-content-end">Alinhado à direita</div>
<div class="d-flex justify-content-between">Espaço entre os itens</div>
<div class="d-flex justify-content-around">Espaço em volta dos itens</div>
<div class="d-flex justify-content-evenly">Espaço igual entre todos</div>

Variações do justify-content:

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-evenly
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-sm-evenly
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-md-evenly
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-lg-evenly
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
.justify-content-xl-evenly
.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-between
.justify-content-xxl-around
.justify-content-xxl-evenly

Alinhando no Eixo Cruzado (vertical, se for linha)

<div class="d-flex align-items-start">Alinhado no topo</div>
<div class="d-flex align-items-center">Centralizado verticalmente</div>
<div class="d-flex align-items-end">Alinhado embaixo</div>
<div class="d-flex align-items-stretch">Esticado (preenche altura)</div>

Alinhamento Individual

<div class="align-self-start">Alinha só este item no topo</div>
<div class="align-self-center">Centraliza só este item</div>
<div class="align-self-end">Alinha só este item embaixo</div>

Quebra de Linha

Por padrão, Flexbox não quebra linha. Para permitir:

<div class="d-flex flex-wrap">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Display

Controle de visibilidade e comportamento de exibição.

Classes de Display

Classe	Descrição
`d-block`	Exibe como bloco
`d-inline`	Inline
`d-inline-block`	Inline com block
`d-flex`	Flexbox
`d-inline-flex`	Flex em linha
`d-grid`	Grid CSS (opcional)
`d-none`	Oculta (display: none)

Controle Responsivo de Display

<div class="d-none d-md-block">
  Oculto no mobile, visível no desktop
</div>

<div class="d-block d-lg-none">
  Visível no mobile, oculto no desktop grande
</div>

Helpers Visuais

Pequenos utilitários que facilitam ajustes rápidos.

Tamanhos

<img src="..." class="w-100"> <!-- 100% da largura -->
<img src="..." class="w-50">  <!-- 50% da largura -->
<div class="h-100">Altura 100%</div>

Alinhamento de Elementos

<div class="text-start">Texto à esquerda</div>
<div class="text-center">Texto centralizado</div>
<div class="text-end">Texto à direita</div>

<div class="mx-auto">Centraliza horizontalmente (margin auto)</div>

Visibilidade Condicional

<div class="invisible">Oculta, mas mantém o espaço reservado</div>
<div class="d-none">Oculta sem ocupar espaço</div>

Overflow

<div class="overflow-auto">Adiciona rolagem se necessário</div>
<div class="overflow-hidden">Oculta conteúdo que transborda</div>
<div class="overflow-visible">Deixa conteúdo transbordar</div>

Utilizar essas classes torna o desenvolvimento mais ágil, reduz a quantidade de CSS personalizado e melhora a consistência visual do projeto.