Bootstrap 4 Cards Border Colors

Os cartões são recipientes flexíveis de bootstrap 4. Eles fornecem cabeçalho, texto, cores contextuais de fundo e muitas outras opções benéficas. Existem centenas de classes de bootstrap que são usadas para estilizar os elementos. Por exemplo, para ajustar a cor de fundo dos elementos, o “bg”A classe é especificada com as classes de cores, como“BG-Primary","BG-Info", e muitos mais.

Este post ilustrará:

• Como criar um cartão no bootstrap?
• Cardas de borda de borda no bootstrap
• Como adicionar cor de borda aos cartões em bootstrap?

Como criar um cartão no bootstrap?

O bootstrap “cartão”A classe pode ser usada para criar um cartão. Você pode especificar o cabeçalho, texto e componentes do cartão para o cartão, utilizando as classes, como “título de cartão","Cartão-corpo", e "Footer de cartão”:

Linuxhint

Missão Linuxhint

Fornecemos as habilidades e conhecimentos tecnológicos sob demanda para educar o mundo.

Contato: xxx-xxx-xxxx

Saída

Cartas Cores da borda no bootstrap 4

Várias classes de bootstrap são utilizadas para aplicar bordas coloridas ao redor do cartão. Alguns deles são dados abaixo:

Aulas de fronteira	Descrição
Worning-Warning	Esta aula aplica a cor amarela à borda.
sucesso de fronteira	Esta aula aplica a cor verde à fronteira.
Danger de fronteira	Esta classe aplica a cor vermelha à borda.
luz da fronteira	Esta aula aplica a cor cinza claro à borda.
Border-Info	Esta aula aplica a cor azul-celeste à fronteira.
Primary de fronteira	Esta aula aplica a cor azul à fronteira.
Dark de fronteira	Esta aula aplica a cor cinza escura à fronteira.
secundário de fronteira	Esta aula aplica a cor cinza à borda.

Como adicionar cor de borda aos cartões?

Para um melhor entendimento, vamos adicionar um “sucesso de fronteira"Classe dentro da"”Elemento com classe“cartão”Para ver o efeito.

Exemplo 1: Adicionando cor de borda a um único cartão em bootstrap

Neste exemplo, o “sucesso de fronteira”A classe é utilizada para aplicar a borda verde ao redor do cartão:

Linuxhint

Missão Linuxhint

Fornecemos as habilidades e conhecimentos tecnológicos sob demanda para educar o mundo.

A saída fornecida verifica se a borda verde foi aplicada com sucesso ao redor do cartão:

Confira o exemplo abaixo que representa outras classes de cor da borda aplicada aos cartões.

Exemplo 2: Adicionando cores de borda a vários cartões em bootstrap

Aqui, estamos adicionando cores de borda a vários cartões no bootstrap com a ajuda das classes especificadas:

Linuxhint

Missão Linuxhint

Fornecemos as habilidades e conhecimentos tecnológicos sob demanda para educar o mundo.

Linuxhint

Missão Linuxhint

Fornecemos as habilidades e conhecimentos tecnológicos sob demanda para educar o mundo.

Linuxhint

Missão Linuxhint

Fornecemos as habilidades e conhecimentos tecnológicos sob demanda para educar o mundo.

Saída

Exemplo 3: Adicionando cores de borda a vários componentes de um único cartão em bootstrap

Os usuários também podem aplicar cores de borda em torno de outros componentes de cartão. Por exemplo, aplicamos as classes de cores da borda no cartão, cabeçalho do cartão e rodapé do cartão:

Linuxhint

Missão Linuxhint

Fornecemos as habilidades e conhecimentos tecnológicos sob demanda para educar o mundo.

Contato: xxx-xxx-xxxx

Saída

É tudo sobre aplicar as cores de borda do cartão no bootstrap 4.

Conclusão

O "cartão”A classe é utilizada para criar um cartão no bootstrap. Para adicionar uma borda ao redor do cartão, o “fronteira”A classe com a classe de cores é implementada, como a“ “Primary de fronteira”Classe usada para uma borda azul,“Danger de fronteira”Para uma fronteira vermelha e muito mais. Este blog explicou as cores de borda do cartão no bootstrap 4.