Os cartões do Bootstrap fornecem um contêiner de conteúdo flexível e extensível com várias variantes e opções.
Sobre
Um cartão é um contêiner de conteúdo flexível e extensível. Inclui opções para cabeçalhos e rodapés, uma ampla variedade de conteúdo, cores de fundo contextuais e opções de exibição poderosas. Se você estiver familiarizado com o Bootstrap 3, os cartões substituem nossos antigos painéis, poços e miniaturas. Funcionalidade semelhante a esses componentes está disponível como classes modificadoras para cartões.
Exemplo
Os cartões são construídos com o mínimo de marcação e estilos possível, mas ainda conseguem oferecer muito controle e personalização. Construído com flexbox, eles oferecem fácil alinhamento e combinam bem com outros componentes do Bootstrap. Eles não têm marginpor padrão, então use utilitários de espaçamento conforme necessário.
Abaixo está um exemplo de um cartão básico com conteúdo misto e largura fixa. Os cartões não têm largura fixa para iniciar, então eles naturalmente preencherão toda a largura de seu elemento pai. Isso é facilmente personalizado com nossas várias opções de dimensionamento .
Título do cartão
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Os cartões suportam uma ampla variedade de conteúdo, incluindo imagens, texto, grupos de listas, links e muito mais. Veja abaixo exemplos do que é compatível.
Corpo
O bloco de construção de um cartão é o .card-body. Use-o sempre que precisar de uma seção acolchoada em um cartão.
Este é um texto dentro de um corpo de cartão.
Títulos, texto e links
Os títulos dos cartões são usados adicionando .card-titlea uma <h*>tag. Da mesma forma, os links são adicionados e colocados próximos uns dos outros adicionando .card-linka uma <a>tag.
As legendas são usadas adicionando um .card-subtitlea uma <h*>tag. Se os .card-titlee os .card-subtitleitens forem colocados em um .card-bodyitem, o título e o subtítulo do cartão serão alinhados corretamente.
Título do cartão
Legenda do cartão
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
.card-img-topcoloca uma imagem na parte superior do cartão. Com .card-text, o texto pode ser adicionado ao cartão. O texto dentro .card-texttambém pode ser estilizado com as tags HTML padrão.
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Listar grupos
Crie listas de conteúdo em um cartão com um grupo de listas niveladas.
Cras justo odio
Dapibus ac facilisis em
Vestíbulo em eros
Destaque
Cras justo odio
Dapibus ac facilisis em
Vestíbulo em eros
Pia da cozinha
Misture e combine vários tipos de conteúdo para criar o cartão que você precisa ou jogue tudo lá. Abaixo são mostrados estilos de imagem, blocos, estilos de texto e um grupo de listas, todos agrupados em um cartão de largura fixa.
Título do cartão
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Os cartões não assumem um widthinício específico, então eles terão 100% de largura, salvo indicação em contrário. Você pode alterar isso conforme necessário com CSS personalizado, classes de grade, mixins de grade Sass ou utilitários.
Usando marcação de grade
Usando a grade, enrole os cartões em colunas e linhas conforme necessário.
Tratamento de título especial
Com o texto de apoio abaixo como uma introdução natural ao conteúdo adicional.
Você pode alterar rapidamente o alinhamento de texto de qualquer cartão - em sua totalidade ou em partes específicas - com nossas classes de alinhamento de texto .
Tratamento de título especial
Com o texto de apoio abaixo como uma introdução natural ao conteúdo adicional.
Os cartões incluem algumas opções para trabalhar com imagens. Escolha entre anexar “caps de imagem” em cada extremidade de um cartão, sobrepor imagens com o conteúdo do cartão ou simplesmente incorporar a imagem em um cartão.
Limites de imagem
Semelhante aos cabeçalhos e rodapés, os cartões podem incluir "caps de imagem" superior e inferior - imagens na parte superior ou inferior de um cartão.
Título do cartão
Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.
Última atualização 3 minutos atrás
Título do cartão
Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.
Última atualização 3 minutos atrás
Sobreposições de imagem
Transforme uma imagem em um plano de fundo do cartão e sobreponha o texto do seu cartão. Dependendo da imagem, você pode ou não precisar de estilos ou utilitários adicionais.
Título do cartão
Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.
Última atualização 3 minutos atrás
Observe que o conteúdo não deve ser maior que a altura da imagem. Se o conteúdo for maior que a imagem, o conteúdo será exibido fora da imagem.
Horizontal
Usando uma combinação de classes de grade e utilidade, os cartões podem ser feitos horizontalmente de uma maneira responsiva e amigável para dispositivos móveis. No exemplo abaixo, removemos as calhas da grade .no-gutterse usamos .col-md-*classes para tornar o cartão horizontal no ponto de mdinterrupção. Outros ajustes podem ser necessários dependendo do conteúdo do seu cartão.
Título do cartão
Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.
Última atualização 3 minutos atrás
Estilos de cartão
Os cartões incluem várias opções para personalizar seus planos de fundo, bordas e cores.
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Cabeçalho
Título do cartão secundário
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Cabeçalho
Título do cartão de sucesso
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Cabeçalho
Título do cartão de perigo
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Cabeçalho
Título do cartão de aviso
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Cabeçalho
Título do cartão de informações
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Cabeçalho
Título do cartão leve
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Cabeçalho
Título do cartão escuro
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Transmitindo significado às tecnologias assistivas
Usar cores para adicionar significado fornece apenas uma indicação visual, que não será transmitida aos usuários de tecnologias assistivas – como leitores de tela. Certifique-se de que as informações indicadas pela cor sejam óbvias do próprio conteúdo (por exemplo, o texto visível) ou sejam incluídas por meios alternativos, como texto adicional oculto com a .sr-onlyclasse.
Fronteira
Use utilitários de borda para alterar apenas o formato border-colorde um cartão. Observe que você pode colocar .text-{color}classes no pai .cardou em um subconjunto do conteúdo do cartão, conforme mostrado abaixo.
Cabeçalho
Título do cartão principal
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Cabeçalho
Título do cartão secundário
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Cabeçalho
Título do cartão de sucesso
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Cabeçalho
Título do cartão de perigo
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Cabeçalho
Título do cartão de aviso
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Cabeçalho
Título do cartão de informações
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Cabeçalho
Título do cartão leve
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Cabeçalho
Título do cartão escuro
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Utilitários de mixins
Você também pode alterar as bordas do cabeçalho e rodapé do cartão conforme necessário e até removê-las background-colorcom .bg-transparent.
Cabeçalho
Título do cartão de sucesso
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Layout do cartão
Além de estilizar o conteúdo dos cartões, o Bootstrap inclui algumas opções para o layout de séries de cartões. Por enquanto, essas opções de layout ainda não são responsivas .
Grupos de cartões
Use grupos de cartões para renderizar cartões como um único elemento anexado com colunas de largura e altura iguais. Os grupos de cartões usam display: flex;para obter seu dimensionamento uniforme.
Título do cartão
Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.
Última atualização 3 minutos atrás
Título do cartão
Este cartão tem um texto de apoio abaixo como uma introdução natural para conteúdo adicional.
Última atualização 3 minutos atrás
Título do cartão
Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este cartão tem um conteúdo ainda mais longo do que o primeiro para mostrar essa ação de altura igual.
Última atualização 3 minutos atrás
Ao usar grupos de cartões com rodapés, seu conteúdo será alinhado automaticamente.
Título do cartão
Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.
Título do cartão
Este cartão tem um texto de apoio abaixo como uma introdução natural para conteúdo adicional.
Título do cartão
Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este cartão tem um conteúdo ainda mais longo do que o primeiro para mostrar essa ação de altura igual.
Baralhos de cartas
Precisa de um conjunto de cartões de largura e altura iguais que não sejam anexados um ao outro? Use baralhos de cartas.
Título do cartão
Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.
Última atualização 3 minutos atrás
Título do cartão
Este cartão tem um texto de apoio abaixo como uma introdução natural para conteúdo adicional.
Última atualização 3 minutos atrás
Título do cartão
Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este cartão tem um conteúdo ainda mais longo do que o primeiro para mostrar essa ação de altura igual.
Última atualização 3 minutos atrás
Assim como nos grupos de cartas, os rodapés das cartas nos decks serão alinhados automaticamente.
Título do cartão
Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.
Título do cartão
Este cartão tem um texto de apoio abaixo como uma introdução natural para conteúdo adicional.
Título do cartão
Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este cartão tem um conteúdo ainda mais longo do que o primeiro para mostrar essa ação de altura igual.
Cartões de grade
Use o sistema de grade Bootstrap e suas .row-colsclasses para controlar quantas colunas de grade (envolvidas em seus cartões) você mostra por linha. Por exemplo, aqui está .row-cols-1colocando os cartões em uma coluna e .row-cols-md-2dividindo quatro cartões com a mesma largura em várias linhas, do ponto de interrupção médio para cima.
Título do cartão
Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.
Título do cartão
Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.
Título do cartão
Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional.
Título do cartão
Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.
Mude para .row-cols-3e você verá o quarto cartão embrulhado.
Título do cartão
Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.
Título do cartão
Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.
Título do cartão
Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional.
Título do cartão
Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.
Quando você precisar de altura igual, adicione .h-100aos cartões. Se você quiser alturas iguais por padrão, você pode definir $card-height: 100%em Sass.
Título do cartão
Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.
Título do cartão
Este é um cartão curto.
Título do cartão
Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional.
Título do cartão
Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.
Colunas de cartão
Os cartões podem ser organizados em colunas do tipo Maçonaria com apenas CSS, envolvendo-os em .card-columns. Os cartões são construídos com columnpropriedades CSS em vez de flexbox para facilitar o alinhamento. Os cartões são ordenados de cima para baixo e da esquerda para a direita.
Atenção! Sua milhagem com colunas de cartão pode variar. Para evitar que os cartões quebrem as colunas, devemos configurá-los display: inline-blockcomo column-break-inside: avoidainda não é uma solução à prova de balas.
Título do cartão que envolve uma nova linha
Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Título do cartão
Este cartão tem um texto de apoio abaixo como uma introdução natural para conteúdo adicional.
Última atualização 3 minutos atrás
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Título do cartão
Este cartão tem um título regular e um pequeno parágrafo de texto abaixo dele.
Última atualização 3 minutos atrás
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Título do cartão
Este é outro cartão com título e texto de apoio abaixo. Este cartão tem algum conteúdo adicional para torná-lo um pouco mais alto no geral.
Última atualização 3 minutos atrás
As colunas de cartão também podem ser estendidas e personalizadas com algum código adicional. Abaixo está uma extensão da .card-columnsclasse usando o mesmo CSS que usamos — colunas CSS — para gerar um conjunto de camadas responsivas para alterar o número de colunas.