Bootstrap4::Submit - default CSS classes take precedence over the defined classes

[anton-yordanov]

= form.submit content: "SIgn In", class: ["btn-lg", "btn-block", "mt-3", "btn-primary"]

Returns

<div class="form-group">
  <button class="btn-lg btn-block mt-3 btn-primary btn btn-secondary" type="submit">Sign in</button>
</div>

The side effect is that btn-secondary class take precedence over my btn-primary class. I expect the custom CSS classes to be appended to the defaults and to take precedence over them.

<div class="form-group">
  <button class="btn btn-secondary btn-lg btn-block mt-3 btn-primary" type="submit">Sign in</button>
</div>

[fran-worley]

When dealing with css the order in which the classes appears in your html makes no difference. The bootstrap css declares btn-secondary after btn-primary so it will always take precedence.

The only fix here is to either provide a way for you to override the default classes, or provide some bootstrap friendly options for setting these classes (size, color, block etc.).

I'm leaning to the latter as I don't really want to add a load of array mutating options into the underlying element class

[fran-worley]

@anton-yordanov I've just added something to master which should work for you.

[anton-yordanov]

Yes, the order of the css classes makes no difference, sorry about that. Thanks for the fix.