O que há de novo 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 utilizados 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 a navegadores, remoção de alguns componentes antigos e muito mais.

Neste artigo, abordaremos o que mudou no Bootstrap 5, o que foi descartado e, o mais emocionante, o que é novo.

Quando Usar o Bootstrap (e quando não)

O Bootstrap se autodefine como “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 afirmação não está muito distante da realidade. Especialmente para iniciantes, o Bootstrap é uma excelente 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 compilaçã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 executor de tarefas.

Você também deve estar ciente de que o Bootstrap não é uma solução milagrosa. Para os desavisados, 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 com 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. O principal foco ao migrar é verificar se as classes ou componentes que você está usando foram descartados. Se foram descartados, há 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 dos atributos data-* para data-bs-* em componentes que requerem JavaScript como parte de suas funcionalidades. (Vamos abordar isso mais na próxima seção.)

Se você usa os arquivos Sass do Bootstrap, algumas variáveis e mixins foram renomeados. O Bootstrap 5 possui uma seção detalhada e extensa sobre personalização, bem como informações 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 quando se usa 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 o 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)
})

Isso simplesmente utiliza o Vanilla JavaScript 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().

Mudança de suporte ao navegador

Até a versão 4, o Bootstrap costumava suportar o Internet Explorer (IE) 10 e 11. A partir do Bootstrap 5, o suporte para o IE foi totalmente descontinuado. Portanto, se você precisa suportar o 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

Mudança em atributos de dados

O Bootstrap 5 alterou os nomes dos atributos de dados que são 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.
• Usar .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:

• 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.

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

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

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

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

• Anteriormente, para ocultar um elemento interativo mas mantê-lo detectável por tecnologias assistivas, você precisava usar as classes .sr-only e .sr-only-focusable. No Bootstrap 5, basta usar a classe .visually-hidden-focusable sem a .visually-hidden.

• Citações com 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 de tabela 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.

• Da mesma forma que no ponto anterior, as classes utilitárias 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 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 rádio. O marcado também foi simplificado. No Bootstrap 4, um botão de alternância com caixa de seleção era obtido com o seguinte marcado:

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

  No Bootstrap 5, 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">Checked</label>
  

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

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

• A classe do 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.

• A barra de navegação agora deve estar envolta 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>
  

  Transforma-se 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 de 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 agora foram substituídos por uma série de classes arredondadas .rounded-* de 0 a 3.

O Que Foi Excluído

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

A maioria dos itens que foram removidos do Bootstrap 5 foram descartados porque o mesmo pode ser alcançado usando classes de utilitários 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 descartado.

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

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

• A 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.

• Algumas das classes de utilitário de ordem (.order-*) foram removidas, pois anteriormente variavam de 1 a 12. Agora elas variam de 1 a 5.

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

• As classes .thead-light e .thead-dark foram removidas, pois as classes de variantes .table-* podem ser aplicadas a todos os elementos de 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 descartados 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 elemento em bloco ou em linha.

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

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

• Margens negativas foram desativadas por padrão.

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

Novidades

Finalmente, o Bootstrap traz muitas adições empolgantes à sua biblioteca na versão 5. Algumas dessas 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 ativados por padrão

Tamanhos de fonte responsivos (RFS) estavam em versões anteriores do Bootstrap, mas eram desativados por padrão. O Bootstrap 5 ativa 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 mais.

O que 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ê está usando os arquivos Sass para o Bootstrap, agora pode usar mixins criados pelo RFS, incluindo font-size, margin, padding, e mais, o que permite garantir que seus componentes e estilos sejam responsivos.

Suporte da direita para a esquerda

Bootstrap 5 adiciona suporte direcional direito-para-esquerda (RTL) usando RTLCSS. Como o Bootstrap é utilizado em todo o mundo, é um grande e importante passo disponibilizar o suporte RTL pronto para uso. 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 de esquerda para direita (LTR) quanto de direita para 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".

Por fim, 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 traz suporte para o novo ponto de quebra xxl direcionado a 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 quebra é semelhante a todos os outros pontos de quebra. Por exemplo, para aplicar preenchimento em 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 possui 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 empacotados dentro. 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 da tabela de conteúdo não podia ser vista em dispositivos menores, dificultando encontrar a seção necessária na página. No Bootstrap 5, a tabela de conteúdo é sempre visível 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 de Tema 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 seu próprio componente. No Bootstrap 5, Acordeão é um novo componente. Com o Acordeão vem uma nova classe, .accordion, que contém dentro de si 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 acordeão:

O Bootstrap 5 também adiciona algumas classes para alterar o estilo do Acordeão. Por exemplo, .accordion-flush remove parte do estilo do Acordeão padrão, como as cores de fundo ou bordas. Você também pode fazer com que um item de acordeão fique 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á-la 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 plano de 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 uma entrada cujo rótulo se parece com um marcador de posição inicialmente, e quando a entrada recebe o foco, o rótulo flutua para o topo da entrada acima do valor. Também funciona em elementos <select> e elementos <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 gutter vertical, use .gy-*. Para definir 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.

• As 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 mudar 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 fosca para carrosséis usando a classe .carousel-dark, e uma nova variante fosca para dropdowns usando .dropdown-menu-dark.

• Existe uma nova opção de fecho automático em Dropdown que pode alterar o comportamento padrão de quando o menu Dropdown fecha. Por padrão, os menus dropdown fecham quando se clica fora do dropdown ou em um dos itens do dropdown. Você pode alterar isso definindo o atributo de dados data-bs-auto-close para inside, o que faz com que o dropdown feche ao clicar em um dos itens do dropdown, mas não ao clicar fora. Você também pode defini-lo para outside, que fará o dropdown fechar apenas ao clicar fora do dropdown. Por fim, você pode defini-lo para false para fazê-lo 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 estilização melhorada para os inputs de arquivo 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 em 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 os botões de fechar .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 facilmente centralizar elementos absolutos horizontalmente e verticalmente, respectivamente.

• Foram adicionadas 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 adicionadas 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 das classes 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 precisará fazer muitas alterações.

Perguntas Frequentes (FAQs) sobre o Bootstrap 5