Novidades no Bootstrap 5

O Bootstrap é uma das bibliotecas CSS mais populares. Permite que os desenvolvedores utilizem facilmente estilos e componentes atraentes e criam sites responsivos. O uso do Bootstrap pode economizar tempo aos desenvolvedores, especialmente com componentes que são usados em quase todos os projetos.

O Bootstrap 5 (a versão principal atual, lançada em maio de 2021) trouxe consigo inúmeras mudanças e melhorias, incluindo a adição de novos componentes, novas classes, novos estilos para componentes antigos, suporte atualizado para navegadores, remoção de alguns componentes antigos e muito mais.

Neste artigo, abordaremos o que mudou no Bootstrap 5, o que foi descartado e, mais emocionantemente, o que há de novo.

Quando Usar o Bootstrap (e quando não)

O Bootstrap se auto-intitula “a estrutura mais popular do mundo para a construção de sites responsivos e voltados para dispositivos móveis”, e com 152 mil estrelas no GitHub, acho que essa alegação não está muito distante da realidade. Especialmente para iniciantes, o Bootstrap é uma ótima maneira de começar a criar sites modernos e limpos. Torna fácil concretizar designs complexos e voltados para dispositivos móveis e fornece muitos componentes que provavelmente serão necessários em vários projetos.

O Bootstrap tem uma curva de aprendizado baixa e se adapta bem a sites estáticos que não requerem um passo de construção, pois você pode apenas referenciar a biblioteca a partir do CDN do Bootstrap. Isso contrasta com algumas outras estruturas CSS populares que podem ser otimizadas para uso com um empacotador ou orquestrador de tarefas.

Você também deve estar ciente, no entanto, de que o Bootstrap não é uma solução milagrosa. Para os não iniciados, o Bootstrap facilita a produção de marcação confusa e complicada. Também é uma biblioteca relativamente pesada em termos de kilobytes (embora isso esteja melhorando a cada versão), então pode não ser a melhor escolha se você estiver usando apenas uma ou duas de suas funcionalidades. Como em qualquer abstração, será de grande ajuda se você tiver uma boa compreensão da tecnologia subjacente e puder tomar uma decisão informada sobre quando usá-la.

Atualizando de Bootstrap 4 para 5

A atualização de Bootstrap 4 para 5 geralmente é bastante fácil. A maioria dos componentes, suas classes e classes de utilitários disponíveis no Bootstrap 4 ainda estão disponíveis no Bootstrap 5. A principal coisa em que você deve se concentrar ao migrar é se as classes ou componentes que você está usando foram descartados. Se foram descartados, existem substituições ou maneiras de alcançar o mesmo resultado usando classes de utilitários. A segunda coisa em que você deve se concentrar é mudar de data-* atributos para data-bs-* em componentes que requerem JavaScript como parte de suas funcionalidades. (Vamos cobrir isso mais no próximo tópico.)

Se você usa os arquivos Sass do Bootstrap, há algumas variáveis e mixins que foram renomeados. O Bootstrap 5 possui uma seção extensa e detalhada sobre personalização, bem como detalhes sobre as variáveis Sass e mixins de cada componente em suas respectivas páginas de documentação.

O que mudou

O Bootstrap 5 traz mudanças fundamentais para o Bootstrap como uma biblioteca, com alterações nas dependências necessárias, suporte a navegadores e muito mais. Também traz mudanças nos componentes e classes que sempre usamos nas versões anteriores.

jQuery não é mais uma dependência

Como uma grande mudança em relação às versões anteriores, o jQuery não é mais uma dependência do Bootstrap. Agora, você pode usar o Bootstrap em toda a sua glória sem ele, mas ainda precisa do Popper.js. Essa mudança facilita o uso do Bootstrap em projetos que não requerem ou usam o jQuery – como ao usar o Bootstrap com o React.

Você ainda pode usar o jQuery com o Bootstrap se fizer parte do seu site. Se o Bootstrap detectar o jQuery no objeto window, ele adicionará automaticamente todos os componentes ao sistema de plugins do jQuery. Portanto, se você estiver migrando de v4 para v5, não precisa se preocupar com essa mudança e ainda pode usar o jQuery com o Bootstrap conforme necessário.

Mas e se você usar o jQuery em seu site, mas não quiser que o Bootstrap use o jQuery? Você pode fazer isso adicionando o atributo data-bs-no-jquery ao elemento body do documento:

<body data-bs-no-jquery="true">
</body>

Como funciona o Bootstrap sem o jQuery? Por exemplo, na v4 você usaria o seguinte código em JavaScript para criar um elemento Toast:

$('.toast').toast()

No Bootstrap 5, você pode usar esse mesmo código para criar um elemento Toast se seu site já usa jQuery. Sem o jQuery, você precisará usar algo como o seguinte código para criar um elemento Toast:

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

Este código utiliza apenas JavaScript puro para consultar o documento em busca de elementos com a classe .toast, e então inicializa um componente Toast no elemento usando new bootstrap.Toast().

Alteração de suporte ao navegador

Até a versão 4, o Bootstrap oferecia suporte ao Internet Explorer (IE) 10 e 11. A partir do Bootstrap 5, o suporte a IE foi completamente removido. Portanto, se você precisa dar suporte ao IE em seu site, provavelmente deve ter cuidado ao migrar para a versão 5.

Outras mudanças no suporte a navegadores incluem:

• Suporte a Firefox e Chrome agora começando a partir da versão 60
• Suporte a Safari e iOS agora começando a partir da versão 12
• Suporte ao Android Browser e WebView agora começando a partir da versão 6

Alteração nos atributos de dados

O Bootstrap 5 alterou os nomes dos atributos de dados geralmente utilizados por seus componentes que usam JavaScript como parte de sua funcionalidade. Anteriormente, a maioria dos componentes que dependiam de algumas funcionalidades JavaScript teriam atributos de dados começando com data-. Por exemplo, para criar um componente Tooltip no Bootstrap 4:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-toggle="tooltip" 
  data-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

Observe o uso de data-toggle e data-placement. No Bootstrap 5, os atributos de dados para esses componentes agora começam com data-bs para facilmente nomear os atributos do Bootstrap. Por exemplo, para criar um componente Tooltip no Bootstrap 5:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-bs-toggle="tooltip" 
  data-bs-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

Em vez de usar data-toggle e data-placement, utilizamos data-bs-toggle e data-bs-placement. Se você usa JavaScript para criar componentes no Bootstrap, provavelmente não há necessidade de fazer quaisquer alterações. No entanto, se seus componentes dependem apenas de atributos de dados para funcionar, você precisa alterar todos os atributos de dados que começam com data para começar com data-bs.

Correção de bugs

Na documentação do Bootstrap 4 sob Navegadores e dispositivos, há uma lista de bugs que ocorrem em alguns navegadores. Esses bugs não estão mais listados em a mesma lista para o Bootstrap 5. A lista inclui o seguinte:

• O estilo de hover estava sendo aplicado a elementos em eventos de toque no iOS, o que não era desejável, pois era considerado um comportamento inesperado.
• O uso de .container no Safari 8 e superior causava um tamanho de fonte pequeno na impressão.
• O raio de borda estava sendo substituído pelo feedback de validação (mas poderia ser corrigido adicionando uma classe extra .has-validation).

A lista de bugs e problemas na documentação do Bootstrap 4 também detalha bugs que ocorreram em versões de navegadores que não são mais suportadas.

Outras mudanças

Há muitas outras mudanças que são, ou menores, ou não causam uma mudança drástica e perceptível. Essas mudanças são:

• Bootstrap 5 agora utiliza Popper v2. Certifique-se de atualizar sua versão do Popper. O Popper v1 não funcionará mais, pois o Bootstrap 5 requer @popperjs/core em vez do anterior popper.js.

• Bootstrap 5 agora pode ser utilizado como módulo no navegador usando uma versão do Bootstrap construída como um módulo ECMAScript.

• Como Libsass e Node Sass (que eram utilizados no Bootstrap 4) estão agora obsoletos, o Bootstrap 5 utiliza Dart Sass para compilar os arquivos Sass de origem para CSS.

• Houve uma mudança em alguns valores de variáveis Sass, como $zindex-modal que mudou de 1050 para 1060, $zindex-popover de 1060 para 1070, e outros. Por essa razão, recomenda-se verificar as variáveis Sass de cada componente ou classes de utilitários na documentação do Bootstrap 5.

• Anteriormente, para ocultar um elemento mas mantê-lo visível para tecnologias assistivas, usava-se a classe .sr-only. Essa classe agora foi substituída por .visually-hidden.

• Anteriormente, para ocultar um elemento interativo, mas mantê-lo acessível para tecnologias assistivas, era necessário usar as classes .sr-only e .sr-only-focusable. No Bootstrap 5, basta usar a classe .visually-hidden-focusable sem a classe .visually-hidden.

• Citações com uma fonte nomeada agora são envolvidas por um elemento <figure>.

  Aqui está um exemplo de como as citações estão agora no Bootstrap 5:

• Nas versões anteriores, os estilos de tabela eram herdados. Isso significa que se uma tabela estiver aninhada dentro de outra tabela, a tabela aninhada herdará a tabela pai. No Bootstrap 5, os estilos das tabelas são independentes uns dos outros, mesmo que estejam aninhados.

• Utilitários de borda agora suportam tabelas. Isso significa que agora você pode alterar a cor da borda de uma tabela usando os utilitários de cor de borda.

  Aqui está um exemplo de uso de utilitários de borda com tabelas no Bootstrap 5:

• A formatação padrão dos breadcrumbs foi alterada, removendo o fundo cinza padrão, preenchimento e raio de borda que existia nas versões anteriores.

  Aqui está um exemplo do estilo dos Breadcrumbs no Bootstrap 5:

• A nomenclatura de classes que usavam left e right para se referir à posição foi alterada para usar start e end. Por exemplo, .dropleft e .dropright em dropdowns foram substituídos por .dropstart e .dropend respectivamente.

• De forma semelhante ao ponto anterior, as classes de utilitários que usavam l para left e r para right agora usam s para start e e para end respectivamente. Por exemplo, .mr-* agora é .me-*.

• A classe .form-control-range que era usada para inputs de range agora é .form-range.

• Os gutters agora são definidos em rems em vez dos anteriores px.

• .no-gutters foi renomeado para .g-0 como parte das novas classes de gutter adicionadas (mais informações sobre isso em seções posteriores).

• Os links agora são sublinhados por padrão, mesmo quando não estão em hover.

• Os nomes de classe personalizados para elementos de formulário mudaram de .custom-* para fazerem parte das classes de componentes de formulário. Por exemplo, .custom-check foi substituído por .form-check, .custom-select foi substituído por .form-select, e assim por diante.

• Adicionar .form-label aos rótulos agora é obrigatório.

• Alertas, breadcrumbs, cards, dropdowns, list groups, modals, popovers e tooltips agora usam os mesmos valores de padding usando a variável $spacer.

• O padding padrão em elementos de badge foi alterado de .25em/.5em para .35em/.65em.

• São utilizados wrappers para botões de alternância com caixas de seleção e botões de opção. O código também foi simplificado. No Bootstrap 4, um botão de alternância com caixa de seleção era obtido com o seguinte código:

  <div class="btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
      <input type="checkbox" checked> Marcado
    </label>
  </div>
  

  No Bootstrap 5, isso pode ser feito de maneira mais simples:

  <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
  <label class="btn btn-primary" for="btn-check">Marcado</label>
  

• Os estados ativo e hover dos botões agora têm maior contraste na cor.

• Os ícones de seta do Carousel agora usam SVG do Bootstrap Icons.

• A classe de botão de fechar agora foi renomeada de .close para .btn-close, e usa um ícone SVG em vez de ×.

• As divisórias de dropdown agora são mais escuras para melhor contraste.

• Navbar O conteúdo agora deve estar envolvido por um elemento de container. Por exemplo, no Bootstrap 4:

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    ...
  </nav>
  

  Passa a ser no Bootstrap 5:

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      ...
    </div>
  </nav>
  

• A classe .arrow nos componentes popover agora é substituída por .popover-arrow, e a classe .arrow nos componentes Tooltip agora é substituída por .tooltip-arrow.

• A opção de popover whiteList foi renomeada para allowList.

• A duração padrão do Toast foi alterada para 5 segundos.

• O valor padrão para fallbackPlacements nos componentes tooltip, dropdown e popover foi alterado para o array ['top', 'right', 'bottom', 'left'].

• .text-monospace foi renomeado para .font-monospace.

• .font-weight-* foi renomeado para .fw-* e .font-style-* para .fst-*.

• .rounded-sm e .rounded-lg foram substituídos agora por uma gama de classes arredondadas .rounded-* de 0 a 3.

O Que Foi Descontinuado

Mudanças podem vir a um custo. Com o lançamento de uma nova versão que traz mudanças e melhorias, também são descartadas algumas das antigas funcionalidades que anteriormente eram suportadas. Com essa nova versão, alguns dos componentes, classes de utilitários ou outras funcionalidades do Bootstrap foram descontinuados.

A maioria dos itens removidos do Bootstrap 5 foram descartados porque o mesmo pode ser alcançado usando classes utilitárias em vez de torná-los um componente autônomo. Além disso, alguns itens que foram descartados provaram ser inúteis ou desnecessários.

Aqui está uma lista do que foi removido do Bootstrap 5:

• Como mencionado na seção anterior, o suporte para o IE foi completamente descontinuado.

• As classes de cor de insígnia (por exemplo, .badge-primary) foram descartadas em favor de usar as classes utilitárias de cor (por exemplo, .bg-primary).

• A classe de insígnia .badge-pill, que dava a uma insígnia um estilo de pílula, foi descartada em favor de usar .rounded-pill, que alcança o mesmo resultado.

• O classe de botão .btn-block foi removida, pois o mesmo resultado pode ser alcançado usando classes de utilitário de exibição como .d-block.

• O layout de cartões .card-columns Masonry que estava disponível anteriormente foi descartado, pois apresentava muitos efeitos colaterais.

• A opção flip para componentes de dropdown foi removida, em favor das configurações do Popper.

• O componente Jumbotron foi descartado, pois o mesmo resultado pode ser alcançado usando classes de utilitário.

• Alguns dos utilitários de classe de ordem (.order-*) foram removidos, pois anteriormente variavam de 1 a 12. Agora eles variam de 1 a 5.

• O componente de mídia foi removido, pois o mesmo resultado pode ser alcançado com utilitários de classe.

• As classes .thead-light e .thead-dark foram removidas, pois as classes de variantes .table-* podem ser aplicadas a todos os elementos da tabela.

• A classe .pre-scrollable foi removida, pois não é muito utilizada.

• A classe .text-justify foi removida, devido a problemas de responsividade, assim como a classe .text-hide, porque seu método é antigo e não deve ser usado. E as classes .text-* não adicionam mais estados de hover ou focus aos links. Essas classes .text-* devem ser substituídas pelas classes .link-*.

• Grupos de entrada que possuem múltiplas entradas ou componentes não precisam mais usar .input-group-append e .input-group-prepend. Elementos que devem fazer parte do grupo podem ser adicionados diretamente como filhos do .input-group.

  Aqui está um exemplo de uso de grupos de entrada com múltiplas entradas:

• .form-group, .form-row, e .form-inline foram todos abandonados em favor de classes de layout.

• .form-text não possui mais uma propriedade display definida. A exibição do elemento dependerá de se o próprio elemento é um bloco ou elemento em linha.

• Os ícones de validação foram removidos para elementos <select> com multiple.

• A classe .card-deck foi removida em favor das classes de grade.

• Margens negativas foram desativadas por padrão.

• .embed-responsive-item elementos agora foram removidos em favor da aplicação do estilo em todos os filhos das proporções, que anteriormente eram incorporações responsivas (mais sobre isso na próxima seção).

O que há de novo

Finalmente, o Bootstrap traz muitas adições empolgantes em sua biblioteca na versão 5. Alguns desses mudanças incluem novos recursos, novos conceitos suportados, novos componentes, novas classes de utilitários e muito mais.

Tamanhos de fonte responsivos agora estão habilitados por padrão

Tamanhos de Fonte Responsivos (RFS) estavam em versões anteriores do Bootstrap, mas estavam desabilitados por padrão. O Bootstrap 5 habilita o RFS por padrão, tornando as fontes no Bootstrap mais responsivas. O RFS é um projeto paralelo criado pelo Bootstrap para inicialmente dimensionar e redimensionar os tamanhos das fontes de forma responsiva. Agora, é capaz de fazer o mesmo para propriedades como margem, preenchimento, box-shadow e muito mais.

O que ele faz é basicamente calcular os valores mais adequados com base nas dimensões do navegador, e essas contas são traduzidas para funções calc quando é compilado. Usar o RFS também abandona o uso anterior de px para usar rem, pois ajuda a alcançar uma melhor responsividade.

Se você estiver usando os arquivos Sass para o Bootstrap, agora pode usar mixins criados pelo RFS, incluindo font-size, margin, padding e muito mais, o que permite garantir que seus componentes e estilos sejam responsivos.

Suporte da direita para a esquerda

O Bootstrap 5 adiciona suporte para direção da direita para a esquerda (RTL) usando RTLCSS. Como o Bootstrap é usado em todo o mundo, é um grande e importante passo tornar o suporte RTL disponível por padrão. Por essa razão, o Bootstrap 5 abandonou a nomenclatura específica para direções (por exemplo, uso de left e right) em favor de start e end. Isso torna o Bootstrap flexível o suficiente para funcionar com sites tanto da esquerda para a direita (LTR) quanto da direita para a esquerda (RTL). Por exemplo, .dropleft agora é .dropstart, .ml-* agora é .ms-*, e mais.

Para fazer com que o Bootstrap reconheça e aplique estilos RTL em seu site, você precisa definir o dir de <html> como rtl e adicionar um atributo lang com o idioma RTL do site. Por exemplo, lang="ar".

Finalmente, você precisará incluir o arquivo CSS RTL do Bootstrap:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

E com isso, seu site terá suporte a RTL.

Novo ponto de quebra

O Bootstrap 5 adiciona suporte para o novo ponto de quebra xxl que visa dispositivos com largura maior ou igual a 1400px. Anteriormente, o maior ponto de quebra era xl, que visava dispositivos com largura maior ou igual a 1200px. Essa mudança permite uma melhor responsividade para dispositivos com telas maiores, já que o ponto de quebra xl não era suficiente.

Usar o novo ponto de interrupção é semelhante a todos os outros pontos de interrupção. Por exemplo, para aplicar preenchimento para dispositivos com largura maior ou igual a 1400px, você pode fazer isso usando a classe .p-xxl-2.

Documentação aprimorada

Embora isso não faça parte da biblioteca em si, é bom notar a melhoria na documentação do Bootstrap. A documentação no Bootstrap 5 tem uma organização de conteúdo melhor, já que componentes com detalhes mais extensos agora têm suas próprias seções. Por exemplo, o componente Form no Bootstrap 4 era apenas uma página com todos os componentes apertados dentro dela. No Bootstrap 5, a documentação do componente Form é uma seção própria, com subseções para diferentes subcomponentes, incluindo Form Control, Select, Input Groups e mais.

Além disso, a navegação na documentação agora é mais fácil através da barra lateral, especialmente para telas menores. No Bootstrap 4, a barra lateral do sumário não podia ser vista em dispositivos menores, tornando mais difícil encontrar a seção necessária na página. No Bootstrap 5, o sumário é sempre visto em todas as dimensões de tela.

Além disso, no Bootstrap 5 você pode encontrar todas as variáveis Sass, mixins e funções para cada componente em sua página. Anteriormente, havia apenas uma página Theming com alguns detalhes sobre como alterar as variáveis do tema no Bootstrap. Agora, há uma seção de personalização própria com mais detalhes sobre como personalizar o tema do Bootstrap.

Novos componentes

O Bootstrap 5 introduz alguns novos componentes na biblioteca. Alguns desses componentes faziam parte de outros componentes e agora são componentes autônomos.

Acordeão

Anteriormente, o Acordeão era parte do componente Colapsível, em vez de ser um componente próprio. No Bootstrap 5, Acordeão é um novo componente. Com o Acordeão vem uma nova classe, .accordion, que contém uma lista de itens de acordeão. Além disso, os Acordeões têm um novo estilo em comparação com o estilo anterior no Bootstrap 4. Aqui está um exemplo do componente de acordeão:

O Bootstrap 5 também adiciona algumas classes para alterar o estilo do Acordeão. Por exemplo, .accordion-flush remove alguns dos estilos do Acordeão padrão, como as cores de fundo ou borda. Você também pode deixar um item de acordeão sempre aberto removendo o atributo data-bs-parent de seu elemento .accordion-collapse.

Offcanvas

Outro novo componente é Offcanvas, que permite criar uma barra lateral sobreposta. É a barra lateral geralmente usada em sites para mostrar o menu em dispositivos menores. Você pode colocá-lo em qualquer lado da página usando .offcanvas-start para esquerda em LTR, .offcanvas-top para cima, .offcanvas-end para direita em LTR e .offcanvas-bottom para baixo. Você também pode especificar se o Offcanvas deve ter um fundo ou não. Aqui está um exemplo de uso do componente Offcanvas:

Floating Label

Floating Label é uma nova parte do componente Form. Permite criar um campo de entrada cujo rótulo se parece com um placeholder no início, e quando o campo recebe foco, o rótulo flutua para o topo do campo acima do valor. Também funciona em elementos <select> e <textarea>. Aqui está um exemplo de uso de rótulos flutuantes:

Outras adições

Além dos novos componentes, foram adicionadas novas classes para componentes existentes, novas classes utilitárias, novas classes auxiliares e muito mais. Aqui está uma lista de todas as outras novas adições no Bootstrap 5:

• Foi adicionada a classe .row-cols-auto, que permite que as colunas ocupem sua largura natural.

• A new utility class has been added to justify content called .justify-content-evenly.

• Anteriormente, os gutters entre colunas eram alcançados usando utilitários de espaçamento. Agora, você pode definir o gutter entre colunas usando o novo utilitário de layout Gutter. Para definir um gutter horizontal, use .gx-*. Para definir o gutter vertical, use .gy-*. Para definir o gutter tanto horizontal quanto verticalmente, use .g-*.

• A start script has been added to the Bootstrap package when installed with npm or Yarn. The start script compiles the CSS and JavaScript files, builds the documentation, then starts a local server.

• Classes de utilitário de alinhamento vertical agora podem ser usadas com tabelas.

• A new class .caption-top has been added, which allows placing the caption of a table at the top rather than at the bottom.

• Agora há a opção de alterar o divisor no Breadcrumb usando a variável CSS --bs-breadcrumb-divider.

  Aqui está um exemplo de mudar o divisor para >>:

• Existe uma nova variante escura para carrosséis usando a classe .carousel-dark, e uma nova variante escura para menus suspensos usando .dropdown-menu-dark.

• Existe uma nova opção de fechamento automático no Dropdown que pode alterar o comportamento padrão de quando o menu Dropdown fecha. Por padrão, os menus suspensos fecham quando você clica fora do dropdown ou em um dos itens do dropdown. Você pode alterar isso definindo o atributo de dados data-bs-auto-close como inside, o que faz com que o dropdown feche ao clicar em um dos itens do dropdown, mas não quando clicar fora. Você também pode configurá-lo como outside, que fará o dropdown fechar apenas quando clicar fora do dropdown. Finalmente, você pode configurá-lo como false para fechar apenas quando o botão do dropdown for clicado novamente. Se você estiver inicializando o dropdown com JavaScript, pode usar a opção autoClose em vez do atributo de dados. Aqui está um exemplo de seu uso:

• Agora há uma melhoria no estilo dos campos de entrada de arquivos em formulários.

• A new color input has been added, using the class .form-control-color.

• A new datalists input type has been added, which simulates a typeahead select field. Here’s an example:

• Novas tonalidades e sombras de cor foram adicionadas nas variáveis Sass.

• Existem duas novas dimensões de cabeçalho de exibição .display-5 e .display-6.

• Existe agora uma variante branca para botões de fechamento .btn-close-white.

• Os dropdowns agora podem ter .dropdown-items envoltos em elementos <li>.

• Itens em grupos de listas agora podem ser numerados usando a nova classe .list-group-numbered.

• Existem propriedades transition para links no componente de paginação, o que melhora seu estilo.

• Foi adicionada uma nova classe .bg-body que define a cor de fundo do corpo como branca.

• Foram adicionadas novas classes de utilitário de posição para definir as propriedades top, left, right ou bottom de um elemento. Por exemplo, .top-0.

• Foram adicionadas novas classes .translate-middle-x e .translate-middle-y para centrar facilmente elementos absolutos horizontalmente e verticalmente, respectivamente.

• Foram introduzidas novas classes utilitárias de largura de borda .border-* variando de 1 a 5.

• Foi adicionada uma nova utilidade de exibição .d-grid e uma nova utilidade de espaçamento .gap.

• Foram introduzidas novas utilidades de altura de linha .lh-1, .lh-sm, .lh-base e .lh-lg.

• Foram adicionadas novas ajudas de proporção substituindo o que anteriormente eram ajudas de incorporação responsiva. Os nomes de classe foram renomeados substituindo embed-responsive por ratio e by por x. Por exemplo, o que anteriormente era .embed-responsive-16by9 agora é .ratio-16x9.

• A new option popperConfig has been added to Dropdowns, Popovers and Tooltips. This option can be used to make changes to Popper’s configurations.

• Existem utilitários .fs-* para tamanhos de fonte, uma vez que o RFS agora está habilitado por padrão.

Conclusão

O Bootstrap tem sido uma das principais bibliotecas CSS na maior parte da última década. Permite que os desenvolvedores construam facilmente sites responsivos e forneçam uma boa experiência do usuário. Com as adições e mudanças do Bootstrap 5, esse processo será ainda mais fácil e permitirá melhorar os designs dos sites e fornecer uma boa experiência do usuário. Se você está usando o Bootstrap 4 e está pensando em migrar para o Bootstrap 5, a migração é fácil e provavelmente não será necessário fazer muitas alterações.

Perguntas Frequentes (FAQs) sobre o Bootstrap 5