Oi, Jonata, tudo bem?
Para colocar os cards em um grid devemos utilizar os seletores de grid row
e col
do Bootstrap. Um exemplo pode ser observado no código abaixo.
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-body">
Conteúdo do Card 1
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
Conteúdo do Card 2
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
Conteúdo do Card 3
</div>
</div>
</div>
</div>
Segundo a documentação do Bootstrap na <div>
container, que engloba todos os cards, é colocada a classe row
. Em cada uma das <div>
que representam o conjunto das informações dos três cards é inserida o seletor col com suas especificidades. As colunas no Bootstrap são divididas em no máximo 12 e podem ser distribuídas seguindo as classes pré-estabelecidas na documentação. No caso o seletor utilizado para o exemplo acima foi o col-6
, que vai dividir as doze colunas em duas grandes colunas que ocuparão seis espaços cada uma.
Para saber mais sobre a documentação referente ao grid, recomendo a documentação do Bootstrap. As informações estão em inglês, mas você pode traduzir ao clicar com o botão direito do mouse e selecionar a opção "Traduzir para o português".
Espero ter ajudado. Caso tenha dúvidas, não hesite em postar no fórum.
Abraços!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!