Aulas de fronteira em Bootstrap 5 | Explicado
Neste artigo, você obtém conhecimento detalhado sobre o Bootstrap 5 aulas para
- Adicionando borda
- Remoção de borda
- Cores da borda
- Largura da fronteira
- Tamanhos de fronteira
- Tamanhos de raio
Aulas de fronteira no bootstrap 5
No bootstrap 5 bordas são criadas adicionando .fronteira classe para qualquer tag div ou imagem ou qualquer formulário ou textarea.
Aulas para aplicar a fronteira
O Bootstrap 5 fornece algumas classes para especificar a borda para qualquer elemento HTML que seja explicado abaixo:
Fronteira
.fronteira A classe é usada para aplicar fronteiras nos quatro lados da caixa.
Código
Aulas de fronteira
Lorem ipsum dolor sit amet consecteter adipiscing elit. Excetouri ipsum culpa neque commodi modi eaqu?
É assim que você cria fronteiras para todos os quatro lados.
Top de fronteira
.Border-top A classe é usada para aplicar a borda no lado superior da caixa.
Código
Aulas de fronteira
Lorem ipsum dolor sit amet consecteter adipiscing elit. Excetouri ipsum culpa neque commodi modi eaqu?
É assim que você cria uma borda para o lado superior.
Fundo da borda
.fundo de fronteira A classe é usada para aplicar a borda no lado inferior da caixa.
Código
Aulas de fronteira
Lorem ipsum dolor sit amet consecteter adipiscing elit. Excetouri ipsum culpa neque commodi modi eaqu?
É assim que você cria uma borda para o lado inferior.
Partida na fronteira
.Fronteira A classe é usada para aplicar a borda no lado esquerdo da caixa.
Código
Aulas de fronteira
Lorem ipsum dolor sit amet consecteter adipiscing elit. Excetouri ipsum culpa neque commodi modi eaqu?
É assim que você cria uma borda para o lado esquerdo.
Fim da fronteira
.Border-End A classe é usada para aplicar a borda no lado direito da caixa.
Código
Aulas de fronteira
Lorem ipsum dolor sit amet consecteter adipiscing elit. Excetouri ipsum culpa neque commodi modi eaqu?
É assim que você cria uma borda para o lado certo.
Classes para remover a borda
Para remover a borda de qualquer lado, apenas adicione -0 a qualquer aula de adição de fronteira
Do top
Para remover a borda do topo, adicione .Border-top-0 com .fronteira aula.
Código
Aulas de fronteira
Lorem ipsum dolor sit amet consecteter adipiscing elit. Excetouri ipsum culpa neque commodi modi eaqu?
É assim que você remove a borda do topo.
Do fundo
Para remover a borda do fundo, adicione .Border-Bottom-0 com .fronteira aula.
Código
Aulas de fronteira
Lorem ipsum dolor sit amet consecteter adipiscing elit. Excetouri ipsum culpa neque commodi modi eaqu?
É assim que você remove a borda do fundo.
Da esquerda
Para remover a borda da esquerda, adicione .Border-start-0 com .fronteira aula.
Código
Aulas de fronteira
Lorem ipsum dolor sit amet consecteter adipiscing elit. Excetouri ipsum culpa neque commodi modi eaqu?
É assim que você remove a borda do lado esquerdo.
De direita
Para remover a borda da direita, adicione .Border-end-0 com .fronteira aula.
Código
Aulas de fronteira
Lorem ipsum dolor sit amet consecteter adipiscing elit. Excetouri ipsum culpa neque commodi modi eaqu?
É assim que você remove a borda do lado direito.
Classes de cores de fronteira
Para adicionar cores de borda, basta adicionar .Fronteira/Info/Sucesso/Danger/Warning/Dark com .fronteira aula.
Código
Aulas de fronteira
É assim que você dá cor para suas fronteiras.
Classes de largura de fronteira
Para dar espessura ao seu uso da fronteira .Border-1/2/3/4/5 classe com .fronteira aula.
Código
Aulas de fronteira
É assim que você dá espessura à sua fronteira.
Radio de fronteira
Para especificar o raio da fronteira, use .arredondado, .top redondado/final/inferior/start/círculo/pílula Aulas.
Código
Aulas de fronteira
Saída
Para criar círculo arredondado e pílula arredondada:
Código
Aulas de fronteira
É assim que você especifica o raio da borda.
Tamanhos de raio
Para especificar o tamanho do raio da fronteira, basta adicionar .arredondado-0/1/2/3 Aulas.
Código
Aulas de fronteira
Saída
É assim que você especifica o tamanho do radiato de fronteira.
Conclusão
Para dar uma borda a qualquer div ou elemento, adicione um .fronteira aula. Para adicionar a fronteira de um lado adicionar .Border-top/inferior/final/start classe junto com .fronteira classe e remover a borda de um lado, apenas adicione -0. Para especificar a cor da borda adicionar .Fronteira/Sucesso/Danger/Info/Warning/Dark/Light aula.
Para dar espessura à fronteira adicionar .Border-1/2/3/4/5, Para especificar o raio da borda adicionar .arredondado, .top arredondado/inferior/final/start/círculo/pílula aula. Para especificar o tamanho do raio da borda adicionar .arredondado-0/1/2/3 aula.