Converting jQuery Mobile to Bootstrap 4

jQuery Mobile hasn’t been updated in years - since 2014. From a technical and design viewpoint, it's obsolete. From a security view, it's also a problem. It relies on jQuery 2.2, which is considered a security risk.

The Framework Converter can be used to convert the jQuery Mobile controls in your project to their equivalents in Bootstrap 4.

In most cases, the converter will update your controls properly, especially the most commonly used ones. However, there are some fix ups you will need to do to your controls and code.

Here are hints for each of the controls. Feel free to edit this document and add tips for others!

General

• Sizing of controls will have to be checked. You may need to adjust bounds.
• Appearance of controls will be a bit different. This is modern Bootstrap styling, not 2014. Controls have been simplified, extra styling removed and generally made cleaner. See Material Design.

Button converts to BS4 Button

• Icon names are different between jQM and Bootstrap. In most cases, you will need to look up the new icon name and fill it in.

Checkbox converts to BS4 Checkbox

• setValue and getValue: jQM starts with an index of 1, while BS starts with 0. You will need to modify your getValue and setValue statements.

Collapsible

• No equivalent in BS. The conversion will put up a Container with the same dimensions. The rest is up to you.

Fliptoggle converts to BS4 Switch

• In jQuery Mobile, use FlipToggle1.value() to get the value. In BS, it is simply FlipToggle1.value.
• In jQuery Mobile, you set the value to the text of the FlipToggle. In BS, it is true or false.

FooterBar converts to BS4 Navs

• You'll need to update the names of the icons.
• Setting and getting the value is much easier: FlipToggle1.value = 0 sets the first item.

HeaderBar converts to Header

• converts without issues

List converts to BS4 Listgroup

• Methods and events are different - fixups needed to your code

NavBar converts to BS4 Navs

• You'll need to update the names of any icons.
• Setting and getting the value is much easier: NavBar1.value = 0 sets the first item.

Panel

• No equivalent in BS. The conversion will put up a Container with the same dimensions. The rest is up to you.

PopUp

• No equivalent in BS. The conversion will put up a Container with the same dimensions. The rest is up to you.

RadioButton converts to BS4 Radiobutton

• .getValue() and .setValue are gone. .value() is replaced by BS RadioButton.value.

Select converts to BS4 Select

• Icon names are different between jQM and Bootstrap. In most cases, you will need to look up the new icon name and fill it in.
• Names of functions have changed. For example, .selectedItem() becomes simply .item.
• No groups of Select controls.

Slider converts to BS4 Slider

• Only the slider displays - the value does not
• Check the Slider_input.onslide event instead of Slider.onchange
• Use .getValue() instead of .value

TextArea converts to BS4 Textarea

• converts without issues

TextBox converts to BS4 Input

• converts without issues

ToolTip converts to BS4 Button

• Icon names are different between jQM and Bootstrap. In most cases, you will need to look up the new icon name and fill it in.