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"
/>

score 9 · Answer 1 · answered Jan 24 '21 at 15:40

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'
    }
})

nabais · Accepted Answer · 2020-09-22T13:28:06.407

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"

thanks. I will investigate and report back to you if all is well! — redshift, Sep 23 '20 at 13:09
That works great, however, adding the validation bootstrap classes seems to cause an issue that hides the input field. But other than that, thank you! helps me. — redshift, Sep 29 '20 at 12:35

score 0 · Answer 3 · answered Sep 22 '20 at 11:43

0

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.

answered Sep 22 '20 at 11:43

Liel Fridman

1,019
7
11

How to implement Bootstrap classes to Vue-Formulate?

3 Answers3

Form controls