Search code examples
csstwitter-bootstrapbootstrap-4

Bootstrap 4.6.0 update to 4.6.2 results in larger small fonts and removes coloring from tabs. What can I do?

The subject should say it all, but I have attempted to update Bootstrap in a few codebases from version 4.6.0 to 4.6.2. It generally works as far as overall layout goes, but I have noticed a few show stoppers that prevents me from upgrading.

  1. The <small> tag and .small CSS class is now larger.
  2. Tabs set via .nav-tabs .nav-link now only are shaded when active and no longer shaded when inactive.

What gives? A 4.6.0 to 4.6.2 is considered a patch level change that shouldn’t change major functionality and only address sundry underlying coding issues? It should allow for backwards compatible bug fixes; not changes like this.

I tried an update to Bootstrap 4.6.1 and all worked fine; the issue is only when updating to Bootstrap 4.6.2.

What can I do to fix this?

Solution

  • The solution is to override the CSS for small, .small and .nav-tabs .nav-link.

    The only solution I have found is to override the charged CSS in my custom CSS file. The changes I had to make are follows:

    small, .small {
  font-size: 80% !important;
}

.nav-tabs .nav-link {
  background-color: revert;
}

    Just set that CSS for small, .small and .nav-tabs .nav-link, reload/refresh the browser cache and it should look/behave the way it does in Bootstrap 4.6.0 or Bootstrap 4.6.1.