Headline Change: Bootstrap 5 Support, including “offcanvas” style mobile menu.
Bootstrap 5 support has been added to Understrap. As of now, Bootstrap 5 is opt-in, meaning all sites will still default to Bootstrap 4. Understrap will continue to support Bootstrap 4, as we know many sites have been built on Bootstrap 4 and are running child themes.
Customizer Settings
There are two new settings in the Customizer.
The first option lets you choose between Bootstrap 4 or 5. (We don’t recommend switching to Bootstrap 5 if you’re using a child theme that was built using Bootstrap 4. You’ll be changing the theme’s markup without properly updating the JS/CSS).
The second setting introduces the offcanvas mobile menu: If you’re running Bootstrap 5, you can choose the new offcanvas-style menu for mobile or stick with the current collapsible menu design.
Template files
• There are now three variations of the navbar that require separate HTML markup, so we’ve added a few template files to /global-templates and separated the navbar out of header.php .
• The navwalker class and the widget hero carousel remain pretty much the same. The WooCommerce templates stayed mostly the same as well. In places where the class names were slightly updated for Bootstrap 5, we tried to keep both class names in place instead of duplicating entire template files.
Node/Build process
Because the parent theme is supporting both Bootstrap 4 and 5, the main npm build tasks will actually compile two separate versions of the CSS/JS files in the parent theme. The main theme.css and theme.js will now include Bootstrap 5, but we’re still compiling legacy versions as theme-bootstrap4.css and theme-bootstrap4.js . Then users can easily switch between either in the Customizer or via child theme.
Child Theme Update
The child theme starter will now default to Bootstrap 5 for new builds. (This assumes you’re using Understrap 1.1+ and Bootstrap 5). In fact, in the functions.php file, this child theme overrides the parent theme’s customizer settings. (If someone wants to start a child theme with Bootstrap 4, they totally can: we’ll have a link to the previous stable release. Since the parent theme will supports both for a long time going forward, you can develop with either).
How to test
• Pull the develop branch of the parent and child theme to a testing environment.
• Delete your /node_modules folder (if you have it). Then run npm install and npm run dist to see if you have any weirdness.
• Activate the parent theme and turn Bootstrap 5 on in the Customizer
• Activate the new child theme
• Try out the offcanvas menu in the Customizer
• Try editing a post in Gutenberg or clicking through various templates.
How to provide feedback
We will be thoroughly testing with the community for several weeks, with the goal of publicly releasing the new Bootstrap 5 version in late October.