Roots Discourse

How to Style Gravity Forms with Bootstrap 4

Originally published at: https://roots.io/guides/style-gravity-forms-with-bootstrap-4/

Gravity Forms settings Navigate to Forms > Settings from the WordPress admin: Set Output CSS to No Set Output HTML5 to Yes The included Gravity Forms CSS includes too many styles (their minified styles are still 135 KB) you’d need to override, so it’s easier to start from scratch. General styling for Gravity Forms /**…

9 Likes

I need this regularly. Thank you!

Great guide!

I turned to HTML Forms lately and can only recommend that, still somewhat BETA-y but I love the bloat-free approach.

1 Like

Definitely prefer HTML Forms! This is all I end up needing in that instance since you’re able to use your own markup:

.hf-message {
  @extend .alert;
}

.hf-message-success {
  @extend .alert-success;
}
2 Likes

I have created a complete replacement for the Gravityforms styling using Bootstrap: https://github.com/MoshCat/bootstrap-gravityforms/

3 Likes

@benword brilliant! thank you very much for this.