This release brings support for Bootstrap 4 to Toolset Views, Forms, Types, and Layouts plugins. Bootstrap 4 brings general improvements and useful new features and components.

Use Bootstrap 4 only for new sites

Bootstrap 4 changes some important CSS classes. If you switch an existing site from Bootstrap 3 to Bootstrap 4, parts of your site might change significantly or even look broken.

Because of this, we suggest using Bootstrap 4 only for new sites.

If you want to try anyway, make a test copy of your site and switch to Bootstrap 4 there. You can always switch back to Bootstrap 3 and things will go back to how they were.

For detailed information, check out the official page about migrating from Bootstrap version 3 to 4.

How to activate Bootstrap 4

To activate Bootstrap 4 go to the Toolset -> Settings page and scroll down to the Bootstrap loading section. There, select the Toolset should load Bootstrap 4 option.

Bootstrap loading options in Toolset settings
Bootstrap loading options in Toolset settings

Advantages of using Bootstrap 4

Bootstrap 4 brings a lot of advantages and new components.

When you enable Bootstrap 4 in Toolset it will load the full Bootstrap 4 library, allowing you to use all of the Bootstrap 4 components.

To benefit from the rich library of Bootstrap components, all you need to do is apply relevant Bootstrap 4 classes or copy-paste some code snippets from Bootstrap documentation.

For detailed instructions, check out our tutorial about using Bootstrap 4 components in Toolset-based sites.

The following is an example of using a Card Bootstrap 4 component when listing posts with Views.

Content without card classes
Content with card classes applied
Without using BS4 Card classes
When using BS4 Card classes

Changes in Toolset plugins

If you activate the Bootstrap 4 option, all Bootstrap-based elements will now use Bootstrap 4 classes.:

Views

The Views features got a number of changes:

  • Loop wizard – now uses the “col-md-” column widths
  • Inserting shortcodes in the View editor – when you insert shortcodes into the Filters and Pagination section, the inserted HTML markup is different because of Bootstrap 4 usage.
  • Pagination – new “page-item” and “page-link” classes

Views Bootstrap grid now uses Bootstrap 4
Views Bootstrap grid now uses Bootstrap 4

Forms

All input elements in front-end forms now use the new Bootstrap 4 classes. The HTML markup for input elements is also updated to use Bootstrap 4.

Similar to Views and Layouts, the column widths in the newly created Forms use the Bootstrap 4 default (“col-md-“).

Layouts

Please note that we don’t recommend starting new projects with Layouts anymore. The plugin is in a maintenance mode and will not be extended with new functionality, although we do not have plans to remove or deprecate it in the foreseeable future.

Bootstrap 4 uses the new column widths. To set the default column width for your layouts go to the Toolset -> Settings page and click on the Layouts tab.  Look for the Default Bootstrap Column Width section.

Selecting the default Bootstrap column width for Layouts
Selecting the default Bootstrap column width for Layouts

We also made updated many Layouts cells so that they now use appropriate Bootstrap 4 classes and markup.

Support for Right-To-Left (RTL) languages

The official Bootstrap 4 version does not support RLT language and we do not want to use a fork and forcing it on the majority of clients who will never need RTL support.

However, it is possible to easily add RTL support for your site when using Bootstrap 4:

  1. On the Toolset -> Settings page select The theme or another plugin is already loading Bootstrap 4 option.
  2. Embed the RTL-ready fork of Bootstrap 4 in your theme or plugin and make sure it loads on the front-end.

That’s it! WordPress automatically adds an RTL HTML class to body tag when your site is in RTL language.

The Latest and Greatest Bootstrap Release

This version brings the Bootstrap 4.3.1 version, which is the latest stable one. When there are minor (non-breaking) updates of Bootstrap, we’ll include the new CSS in Toolset.

Other improvements and bugfixes

Besides Bootstrap 4 support, this release packs a number of improvements and bugfixes:

  • General improvement:
    • New design in the dialogs for inserting shortcodes.
  • Types:
    • Fixed an edge case issue where data-dependent field display conditions did not work properly in the “Per Post” editor mode when using the classic WordPress editor.
    • Fixed a wrongly displayed tooltip on the Edit Custom Post Field Group page.
  • Views:
    • Some improvements on certain auxiliary queries related to the post relationship filter.
    • We are not including the front-end scripts for Views anymore unless a View is rendered on the page.
    • Fixed some compatibility issues with The Events Calendar, Relevanssi, and PHP 7.4.
  • Forms:
    • Fixed an issue with validation for usernames in user forms, so characters supported by WordPress are supported correctly.
    • Fixed the message displayed after successfully submitting a form, so it gets data from the just created (or edited) post or user.

WordPress Marketing Podcast

We recently started a new WordPress Marketing podcast where we talk to founders of successful WordPress businesses. Their stories are aimed at helping you learn what successful founders did to get started and how they grew their businesses.

Download and Update

This release includes a big change in the way we work with a dependency called Twig. This means that it is very important to update Types, Forms, Views, and Layouts together to their latest version. Not doing so will not cause a problem on the front-end, but might make some admin pages to not work properly.

Depending on what you are building, you will need to download:

  • Views
  • Forms
  • Layouts

If you registered Toolset on your site, you can get this update automatically from the admin. To download the plugins manually, go to your Toolset account and click on Downloads.

Feedback?

Looking forward to using Bootstrap 4 on your Toolset-powered sites?

Let us know how it goes! Please leave your comments below and we’ll get back to you.