Existem várias formas de fazermos layouts superinteressantes com o bootstrap. Uma das formas é utilizar cartões, carrousel, modal, estilizar formulários e o mais impressionante é podermos utilizar layouts já prontos como template para construir os nossos próprios layouts.

Cartões

O cartão é muito utilizado em sites para apresentar produtos, preços de planos de contratação e etc. Ele inclui opções de cabeçalhos e rodapés, cores de fundo e opções de exibição variadas. Para incluir um cartão é bastante simples. Em uma div adicionamos classe base .card, enquanto o conteúdo pode ser colocado dentro do .card-body. O exemplo abaixo apresenta como criar um cartão com uma imagem, misturado com algum conteúdo de texto e um botão.

O componente do cartão oferece suporte a uma ampla variedade de conteúdo, incluindo imagens, texto, grupos de listas, links, navs e muito mais. Aqui estão os exemplos do que é possível com o cartão.

Cartão Somente Corpo

Você pode simplesmente usar .card com .card-body, sempre que precisar criar um cartão simples.

Cartão com títulos, texto e links

Além disso, você também pode colocar o título e os links dentro do cartão junto com o texto, como este:

Cartão com cabeçalho e rodapé

Você também pode adicionar cabeçalho e rodapé em seus cartões usando a classe .card-header e .card-footer, respectivamente. Vamos dar uma olhada no seguinte exemplo:

Colocando Grupos de Lista no Cartão

Você também pode colocar grupos de listas dentro do cartão junto com outros tipos de conteúdo, conforme mostrado aqui.

Sinta-se à vontade para misturar e combinar vários tipos de conteúdo para criar o cartão de que você precisa. O exemplo a seguir criará um cartão de largura fixa com uma imagem, texto, grupo de listas e hiperlinks.

Opções de layout de cartão