Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Grid no Bootstrap

Olá boa tarde a todos me chamo Jhon

sobre o grid, na parte de criar colunas, não estou conseguindo aplicar a grid, conforme o instrutor orienta. pra mim não ficou muito clara as informações da aula. apenas neste ponto! Por favor alguem me ajude!!!

[Grid no Bootstrap]! consigo selecionar os cards, mas quando chega no momento de criar a div col-6, não da certo!

[Não consigo deixar como descrito na imagem]! Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Desde ja agradeço, um abraço para todos!!

2 respostas
solução!

Oi, Jonata, tudo bem?

Para colocar os cards em um grid devemos utilizar os seletores de grid rowe 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!

Boa noite Rodrigo. Agradeço pelo compartilhanento de conhecimento, concerteza ajudou bastante.

sucesso para você! Muito obrigado.