Como estilizar cartões no bootstrap 5 | Explicado
Um cartão no bootstrap 5 é referido como um recipiente ou uma caixa que envolve conteúdo dentro dele. Pode consistir em um cabeçalho, algum conteúdo e um rodapé. Pode ser estilizado adicionando cores ou imagens a ele. Esses cartões de bootstrap são considerados um substituto para painéis antigos, miniaturas ou poços. Como esses cartões são criados e estilizados de várias maneiras foram discutidos neste artigo.
Como criar um cartão usando o bootstrap 5
Com o objetivo de criar um cartão simples, fazer um contêiner de div e atribuir o .cartão classe e aninhe uma div dentro da primeira div e atribua -a a .Cartão-corpo classe e coloque o conteúdo do cartão dentro desta div.
Html
Este é um cartão simples
O código declarado acima criará um cartão muito simples.
Saída
A saída exibe um cartão básico.
Como adicionar um cabeçalho e um rodapé em um cartão
Como mencionado, um cartão pode consistir em um cabeçalho e um rodapé. Portanto, para fazer essas entidades usarem o .cabeçalho de cartão e o .Footer de cartão Aulas.
Html
Este é o cabeçalho do cartão
Este é o corpo do cartão
Este é rodapé de cartão
No código acima, para fazer o cabeçalho do cartão, estamos atribuindo um contêiner de div .Classe do cabeçalho do cartão, para colocar algum conteúdo, estamos fazendo o corpo do cartão usando o .aula de corpo-corpo, e por fim para gerar um rodapé .A classe de fôlego é usada.
Saída
O cartão mostrado acima tem um cabeçalho, corpo e rodapé.
Como criar cartões coloridos
Para fornecer cores de fundo para os cartões, basta usar qualquer uma das classes de cores de fundo que são .BG-Primary, .BG-secundário, .BG-Danger, .BG-caules, .BG-success, .BG-Info, .BG-Muted, .BG-Light, .BG-Dark.
Html
Cartão 1
Cartão 2
Cartão 3
Cartão 4
Cartão 5
Há um total de 5 cartões sendo gerados no código acima e cada um recebeu uma cor diferente. Observe que as classes de cores de fundo estão sendo atribuídas à div que tem o .classe de cartão.
Saída
Cartões coloridos foram gerados com sucesso.
Como adicionar título, texto e links para um cartão
Se você estiver gerando cartões que transmitem determinadas informações e desejarem adicionar algum título, texto e links para esse cartão, siga o código fornecido abaixo.
Html
Título
Algum texto.
Link
Para adicionar um título o .Classe de título de cartão foi atribuído a um elemento de cabeçalho (qualquer elemento de cabeçalho H1-H6 pode ser usado), para incluir algum texto o texto .Classe de texto de cartão foi atribuído a um
elemento e um link também foi adicionado e foi tornado pairável junto com uma cor azul usando o .Classe de link de cartão.
Saída
Um cartão informativo foi gerado com sucesso.
Como adicionar imagens a um cartão
Se você deseja adicionar imagens aos seus cartões junto com algum texto e links, siga o exemplo abaixo.
Html
Mike Jason
Oi. Confira meu perfil.
Visite perfil
Para colocar a imagem dentro do cartão, use o .Classe-IMG-TOP Dentro da etiqueta e, assim, como na seção anterior, estamos fazendo um corpo de cartão e colocando um título, um texto e um link dentro do corpo do cartão. Observe que a imagem foi colocada fora do corpo do cartão para fazê -la abranger toda a largura que foi fornecida ao contêiner Div tendo a classe .cartão.
Saída
No entanto, se você deseja colocar seu título, texto e link acima da imagem, use o .Classe-IMG-Bottom. Como nós mostramos no trecho de código abaixo.
Html
Mike Jason
Oi. Confira meu perfil.
Visite perfil
O código acima gerará um cartão com a imagem colocada na parte inferior e o título, texto e link colocado acima dessa imagem.
Saída
O .A aula de cartas-img-bottom está funcionando corretamente.
Como criar sobreposição de imagem do cartão
Além de colocar seu conteúdo acima e abaixo da imagem, você também pode colocá -la na imagem e este procedimento é chamado de sobreposição da imagem do cartão.
Html
Mike Jason
Oi. Confira meu perfil.
Visite perfil
O código é o mesmo que nas seções anteriores, com uma pequena diferença que colocar o conteúdo sobre a imagem que estamos usando o .Cartão-IMG-overlay classe em vez do .Classe de cartão de cartão.
Saída
Uma sobreposição de imagem de cartão foi criada com sucesso.
Conclusão
Com o objetivo de modelar um cartão, você pode adicionar um cabeçalho e rodapé usando o .Card-header e .Footer de cartão Aula, considerando que todas as classes de cores de fundo disponíveis podem ser usadas para criar cartões coloridos. Além disso, use o .título de cartão, .texto-texto, .Classes de link de cartão Para adicionar um título, texto e links para um cartão. Para tornar seus cartões interessantes, você pode adicionar imagens usando o .Card-IMG-top, OR .Classes-Bottom Card-IMG. Por fim, você também pode criar uma sobreposição de imagem de cartão usando o .Classe de Cartão-IMG-Overlay.