Bootstrap 4 and 5

#### Search Results

Search

# 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

- Developing and Running Pages with Bootstrap 4

- Developing and Running Pages with Bootstrap 5

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

- Upgrading Complete Applications from Bootstrap 4 to 5

- Mixed Applications with Bootstrap 4 and 5 Pages

## 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

- Browser Support for Bootstrap 5
- Developing and Running Pages with Bootstrap 4
- Developing and Running Pages with Bootstrap 5
- Changing Single Pages from Bootstrap 4 to 5 or from Bootstrap 5 to 4
- Upgrading Complete Applications from Bootstrap 4 to 5
- Mixed Applications with Bootstrap 4 and 5 Pages