Extended WC Asia Special Offer 30% OFF! Use coupon WC30

Bootstrap Framework

Bootstrap is a popular, free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. Many popular WordPress themes use Bootstrap.

If your WordPress theme uses the Bootstrap framework, WS Form can output forms that contain  HTML markup that is native to that framework. This means that WS Form physically changes the HTML so that your form dovetails seamlessly into your theme.

In addition to output native markup, WS Form will also change the breakpoint selector to match the available breakpoints in Bootstrap. This feature is only available in WS Form PRO.

All of the available WS Form field types are fully compatible with Bootstrap.

Demo

To view a demo of a WS Form outputting a form for the Bootstrap framework, click here.

WS Form Frameworks - Bootstrap 5

Supported Versions

WS Form supports the following versions of Bootstrap:

Configuring WS Form to Use Bootstrap Framework

Automatic

When you first install WS Form, it will scan your theme files and if Bootstrap is detected it will automatically output your form using Bootstrap markup.

Manual

To manually select Bootstrap as your framework:

WS Form Frameworks - Bootstrap - Settings

  1. Click on WS Form in the WordPress administration menu.
  2. Click on ‘Settings‘.
  3. Click on the Advanced tab.
  4. Select Bootstrap under the Framework dropdown.
  5. Click Save.

Sample Output

An example of the HTML output for a tel field is shown below (includes some additional markup required by WS Form).

<div class="col-6 col-md-3 form-group" id="wsf-1-field-wrapper-6" data-id="6" data-type="tel">
	<label id="wsf-1-label-6" for="wsf-1-field-6">Phone</label>
	<input type="tel" id="wsf-1-field-6" name="field_6" class="form-control" aria-labelledby="wsf-1-label-6">
	<div id="wsf-1-invalid-feedback-6" class="invalid-feedback">Please provide a valid phone number.</div>
</div>