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

• 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

• This control is called Switch in BS4.
• 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

• This is done by the Navs control in BS4.
• 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 without issues

List

• Called ListGroup in BS4
• Methods and events are different - fixups needed to your code

NavBar

• This is done by the Navs control in BS4.
• 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

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

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

• Only the slider displays - the value does not

TextArea

• converts without issues

TextBox

• converts without issues

ToolTip

• 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.