Bootstrap

The Bootstrap Blog

News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons.

Bootstrap v4.6.0

@mdo January 19, 2021

Bootstrap v4.6.0 is here with a couple new features, several bugfixes, and some awesome documentation updates to make v4 more maintainable alongside our development of v5.

Read on for the highlighted changes or head to the v4.6 docs to see the latest in action.

Hugo!

The biggest change in v4.6.0 is under the hood—we’ve overhauled our development environment to match that of v5. Our v4.x docs are now powered by Hugo. That means no more Ruby dependency for v4.x, improved maintainability between major versions, faster development, and incredibly fast build times compared to Jekyll.

Changes

Also available in the v4.6.0 release on GitHub.

Highlights

  • Tooltips and popovers can have custom classes via customClass option.
  • Added new .navbar-nav-scroll class for scrolling expanded navbar contents on mobile devices.
  • For improved accessibiliy, spinners now slow down when prefers-reduced-motion is enabled.
  • v4.x docs are now built on Hugo for easier maintenance and backports from v5.x.
  • Darkened background-color of .dropdown-item for improved hover state contrast, and ligthened the disabled .dropdown-item color.
  • Improved alignment of form validation tooltips.
  • File inputs no longer extend beyond their containers.

CSS

  • #31557: Fix form validation tooltip alignment
  • #31657: Handle the Ubuntu sans-serif case
  • #31700: Suppress flexbox side effects in breadcrumb
  • #31882: Slow down spinners when prefers-reduced-motion
  • #31886: Fixed: Undefined mixin “deprecate” when importing “bootstrap-grid-scss”
  • #32141: Use correct value order
  • #32145: Avoid invisible real file input “spilling” out of container
  • #32160: Add overflow suppression to custom file label
  • #32211: Move negative margin-bottom from .nav-item to .nav-link
  • #32212: Remove needless Stylelint disables
  • #32833: Add .navbar-nav-scroll for vertical scrolling of navbar content
  • Add two new variables for pagination border-radius values; backport of #32423
  • Remove old/unnecessary reboot bug fix; backport of #32631
  • Suppress focus outline for buttons when it shouldn’t be visible in Chromium; backport of #32689
  • Consistently use outline:0 rather than outline:none; backport of #32751
  • Darken dropdown item hover style; backport of #32754
  • Lighten disabled dropdown text to $gray-500

JS

  • #31820: Check for data-interval on the first slide of carousel
  • #31834/#32225: tooltip/popover: add a customClass option
  • #32001: Move js/src/index.js one folder up
  • #32045: tests: fix sanitizer test
  • #32220: Don’t hide modal when config.keyboard is false
  • #32312: build-plugins: switch to “bundled” for babel helpers

Docs

  • #31861: Split up dropdown sizing docs to improve rendering
  • #31892: Remove redundant visually hidden “(current)” from pagination controls
  • #31893: manifest.json: Switch to relative URLs so that we don’t need to change the path with every major/minor release
  • #31898: switch to suggesting jsDelivr as a CDN
  • #31904:
    • docs(forms): use a legend for fieldset instead of aria-label
    • docs(forms): fix incorrect legend nesting in fieldset
  • #31936: forms: change inline custom radio name
  • #31951: Update anchor-js to v4.3.0
  • #31960: Explicitly mention emoji fonts, tweak sentence in typography
  • #31981: list-group.md: fix snippet
  • #32005: Remove bugreport.apple.com since it doesn’t work
  • #32015: Fix redirects
  • #32050: Make docs anchorjs links darker on keyboard focus
  • #32054: Add callouts about using light colors ideally on a dark background
  • #32077: Switch to Hugo
  • #32083: mention “Liberation Sans”
  • #32087: download.md: link to JS files comparison too
  • #32094: Changes to navbar documentation/explanation
  • #32106: Clarify JS bundle docs once more for v4
  • #32137: input-group.md: fix wrong class .visually-hidden
  • #32138: navbar.md: remove loading=lazy from snippets
  • #32147: Fix caniuse.com redirects
  • #32151: Mention user-select-all support in docs
  • #32196: homepage: split snippets and show copy buttons
  • #32203: Switch to jsDelivr for the remaining docs assets
  • #32223: introduction: split comments
  • #32247: Fix typos in tooltip/popover docs
  • #32253: Add Russian translation
  • #32363: Remove useless .text-left in Layout / Overview
  • #32399: Remove duplicated “follow Bootstrap on Twitter” link in Community section
  • #32457: Add mention of the bs-custom-file-input plugin needed for the custom file input
  • #32461: style clipboard button on :focus, not just :hover
  • #32462: Replace Lorem Ipsum placeholder text with more representative (or at least english language) text
  • #32634: Remove incorrect mention of dropdowns for dynamic tab behavior
  • #32639: v4: Add an actual data-touch="false" example in the carousel docs
  • #32728: add v5.0 in versions
  • #32761: Mention stretched-link constraints with table elements
  • #32789: Remove role="button" from CTA links in carousel example
  • #32791: Docs v4: Sass implementation and rounding precision
  • #32809:
    • Clarify Sass import and customize docs for how to modify variable defaults
    • Add an npm starter project callout to a few pages
  • #32827: Add a live toast example to the docs
  • #32759: Mention CSP and embedded SVGs in v4 docs
  • docs(dropdowns): clarify where is .show applied
  • Require .has-validation for input groups with validation
  • Fix mobile menu jump & double border
  • Remove double spaces from homepage SVGs
  • browserconfig.xml: switch to relative image path
  • Tweak the wording for collapse to indicate button is preferred/more semantic; backport of #32632
  • Clarify the $enable-shadows option in our docs; backport of #32685

Examples

  • #31979: v4 Examples/Floating-labels: fix bad behavior with autofill
  • #32198: examples: add the version number in title

Misc

  • #29753: Improve build/generate-sri.js regex
  • #32003: CI: switch to Node.js 14
  • #32008: Update Edge’s Rendering Engine on CONTRIBUTING.md
  • #32486: BrowserStack: test on macOS Catalina instead of High Sierra
  • #32756: Stylelint: disallow some property values
  • Fix for npm 7.x package.json: move version_short variable under the config object; backport of #32737
  • Update build-examples script so that the resulting examples zip file includes only the needed files
  • Various CI tweaks
  • Updated devDependencies

Next up

Our second beta of v5 is coming. We’re working on ironing on some kinks from the update to Popover 2, which has taken longer than expected. This affects our dropdowns, popovers, and tooltips. Once some of the major issues are resolved, we’ll ship our next beta.

Please keep the feedback coming on what we can improve, how our releases are performing, and any other suggestions.

Support the team

Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.

Related posts