Como colocar dois cartões de bootstrap um ao lado do outro
Para ajustar a colocação dos itens usando o bootstrap, o “linha" e "col”As aulas podem ser consideradas. A "linha" no bootstrap contém 12 colunas virtuais, e o "Col" determina quantas das 12 colunas possíveis que você deseja usar para cada elemento.
Esta postagem ensinará sobre o ajuste de dois cartões de bootstrap em uma página da web lado a lado.
Como colocar dois cartões de bootstrap um ao lado do outro?
Siga as etapas declaradas abaixo para colocar dois cartões de bootstrap lado a lado.
Etapa 1: Crie um layout "contêiner"
Um bootstrap “recipiente”É um componente fundamental que mantém preenchimento e alinhamento para o conteúdo em um dispositivo específico.
No arquivo html, primeiro, adicione um “”Elemento e atribui uma classe“recipiente”:
Etapa 2: faça uma "linha"
O "linha”A classe é utilizada para conter colunas. Cada linha é dividida em uma grade de 12 colunas virtuais.
Dentro do contêiner, coloque uma div com a classe “linha" do seguinte modo:
Etapa 3: defina duas colunas para duas cartas
Dentro do "”Elemento com classe“linha”, Especifique duas colunas para duas cartas.
Para criar um cartão, siga as instruções dadas:
- Defina um “”Tag com a classe“Col-6”. Esta classe ajusta uma coluna definindo o número de colunas para o elemento abranger.
- Dentro do elemento, adicione outro “”Elemento com a classe“cartão”. É um recipiente expansível e flexível que oferece uma variedade de conteúdo, como cabeçalhos, rodapés, cor de fundo e muito mais.
- Sua largura é ajustada utilizando a propriedade de largura.
- Inclua o “”Tag com a classe“Cartão-IMG-top”, Que é utilizado para definir uma imagem no topo do cartão. O "src”Atributo especifica o caminho da imagem.
- Para adicionar o conteúdo ao cartão, implemente o “Cartão-corpo”Classe, que contém a“","", e "" Tag.
- O "”Ajusta o título do cartão usando o“título de cartão" aula.
- O "”O elemento é atribuído com o“texto-texto”Classe para definir o parágrafo no cartão.
- Então, para definir um botão, use o “btn","Btn-Outline-Primary", e "btn-sm”Classes para criar um botão com um esboço:
Artigos Linuxhint
Escrevemos artigos para educar o mundo!
Visite link
Crie o segundo cartão de maneira semelhante à do primeiro cartão. Este cartão precisa ser ajustado na próxima coluna para colocar o segundo cartão ao lado do primeiro. Para esse fim, crie um separado ““Contêiner junto com“Col-6" aula:
Vídeos Linuxhint
Assista aos tutoriais em vídeo, é claro, de graça!
Visite link
Aqui está a saída gerada pela implementação do código acima:
Aqui está o código completo:
Artigos Linuxhint
Escrevemos artigos para educar o mundo!
Visite link
Vídeos Linuxhint
Assista aos tutoriais em vídeo, é claro, de graça!
Visite link
Demonstramos o procedimento para colocar os dois cartões de bootstrap um ao lado do outro.
Conclusão
Para colocar dois cartões um ao lado do outro, primeiro, crie um “”Elemento junto com o“linha" aula. Então, aloque mais dois “”Elementos e atribui -lhes uma classe de coluna“Col-6”. Isso atribuirá seis colunas a cada cartão. Para criar um cartão no bootstrap, o “cartão”A classe é utilizada. Este estudo explicou o procedimento para alinhar dois cartões de bootstrap lado a lado.