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="user@university.edu"
/>

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="user@university.edu"
/>

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

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