How to implement Bootstrap classes to Vue-Formulate?

Question

According to Vue Formulate, you can add Bootstrap to it:

With provided class props you can add your own set of style classes globally or on a case-by-case basis. Tailwind? No problem. Bootstrap? You're covered. Roll your own? Right on, it’s supported.

OK, so how do you do it?

I tried like so and it did not work:

<FormulateInput
  type="email"
  class="form-control" <------bootstrap class
  label="What is your school email address?"
  validation="bail|required|email|ends_with:.edu"
  validation-name="School email"
  placeholder="[email protected]"
/>

Answer 1

As it says in the Vue Formulate documentation:

Changing classes on a given input is easy. Simply target the class key you’d like to change with a prop named [element class key]-class. To target a state use [element class key]-[state class key]-class. ` And having the

In the Bootstrap documentation:

Form controls

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

This means what you are targeting there is the input.

This way you should try:

<FormulateInput
  type="email"
  input-class="form-control"
  label="What is your school email address?"
  validation="bail|required|email|ends_with:.edu"
  validation-name="School email"
  placeholder="[email protected]"
/>

You can also add the validation bootstrap classes by adding properties:

input-is-valid-class="valid-feedback"
input-has-errors-class="invalid-feedback"

Answer 2

Try using input-class or element-class instead of the class attribute. You can also customize the classes globally. For more information, please read the chapter about customizing classes in the Vue Formulate documentation.

Answer 3

I used the following to globally match Vue Formulate (2.5) applied styles to Bootstrap 4:

Vue.use(VueFormulate, {
    classes: {
        outer: 'form-group',
        input: 'form-control',
        inputHasErrors: 'is-invalid',
        help: 'form-text text-muted',
        errors: 'list-unstyled text-danger'
    }
})