Bootstrap 4 and 5

Responsive pages are built with Bootstrap, with Bootstrap 4 as the default version. With the release of Natural for Ajax 9.3.3, Bootstrap 5 is now available. Bootstrap 5 offers key enhancements, particularly for forms and responsive rendering. It also introduces new controls such as BMOBILE:ACCORDION,BMOBILE:THEMESWITCH, BMOBILE:FTEXT, and modern sidebar controls. For creating new pages, we recommend using Bootstrap 5.

Important
Bootstrap 4 and Bootstrap 5 require different CSS themes. If you are using the default CSS themes for Natural for Ajax, no action is needed. However, if you are using a custom theme, you must create separate themes for Bootstrap 4 and Bootstrap 5 respectively.

Browser Support for Bootstrap 5

Bootstrap 5 does NOT support Microsoft Internet Explorer 11. Take note that in NaturalONE you need to set Edge as the internal browser.

How to set Edge as internal browser in NaturalONE:

  • Close Designer.

  • Open the <installation directory>Designer/eclipse/eclipse.ini file in a text editor.

  • Add -Dorg.eclipse.swt.browser.DefaultType=edge after the line -vmargs.

  • Save the file and restart Designer.

Developing and Running Pages with Bootstrap 4

If you have existing pages built with Bootstrap 4, they will continue to function without any changes, and no action is required. You can continue developing new pages with Bootstrap 4 in the same way as before. However, some of the new features in Natural for Ajax 9.3.3 are only supported in pages using Bootstrap 5.

Developing and Running Pages with Bootstrap 5

To develop and run a single page with Bootstrap 5, select the template for Bootstrap 5 (=BS5) in the New Ajax Page Layout wizard. The key difference is that in the created page layout, the bootstrapversion="5" property is configured in the NATPAGE control.

Changing Single Pages from Bootstrap 4 to 5 or from Bootstrap 5 to 4

To change the Bootstrap version for a single page, set the bootstrapversion property in the NATPAGE control to 4 or 5 accordingly. Then, regenerate the html for the layout(s).

Upgrading Complete Applications from Bootstrap 4 to 5

For pages where the bootstrapversion property has not been set, the default installation of Natural for Ajax 9.3.3 uses Bootstrap 4. To fully switch to Bootstrap 5, follow these steps:

  • Ensure that the bootstrapversion property is not set in your pages. If it is set, remove the value.

  • In the cisconfig.xml file, set the attribute bootstrapversion="5". Use the Ajax Configuration Editor to update the cisconfig.xml for your development and/or runtime environment.

Mixed Applications with Bootstrap 4 and 5 Pages

You can use mixed applications. First, determine the default Bootstrap version for your application and set the attribute bootstrapversion in cisconfig.xml to 4 or 5. For pages that require a different version, set the bootstrapversion property directly in the NATPAGE control. This will overwrite the setting in cisconfig.xml.

On this page