How to correctly apply CSS styles to HTML element Clearance templates? (Ruby On Rails)

Question

I'm using bootstrap 5 for fastest applying styles, but when I trying to apply styles for HTML element template, I have this:

Before applying

After applying

Code (.html.erb):

<div class="submit-field">
  <button type="button" class="btn btn-primary"><%= form.submit %></button>
</div>

Under <%= form.submit%> hides as I understand a simple button template, but I can not find the source code of this template in any way, as if it works "out of thin air". Maybe there is a way how to find it or correctly apply CSS?

Answer 1

submit form helper creates button for you. You should apply class to the element like so:

<div class="submit-field">
 <%= form.submit class: 'btn btn-primary'%>
</div>

Your code created a button inside a button like

<button type="button" class="btn btn-primary"><button>Submit</button></button>