In a previous post I showed you how to use Boostrap css to create horizontal forms. I will also be writing a post on how to use Bootstrap to create multicolumn forms. But, one trick that really comes in handy with both of these layout template techniques is the ability to overwrite the submit button's css on a form-by-form basis.
Here is the the submit button code that I replaced the out-of-the-box submit button code with:
The btn-primary class gives me a blue submit button. Here is the bootstrap guide to all of their button classes.
However, if I was creating a form and wanted to use this template, but also wanted a red button, I would theoretically have to clone the template, update the class for the button and then use the new template for the new form.
Or, I can overwrite the bootstrap css in the Above the Form section of the form.
Navigate to the Look and Feel section of the form:
In the Above the Form section, flip over to the HTML editor:
Here you can add css that overwrites the bootstrap css:
Here is the original form followed by the form with the css overwrite:
Comments