How to Style Gravity Forms with Bootstrap 4

sage
1

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 /**…

10 Likes
2

I need this regularly. Thank you!

3

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
4

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
5

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

3 Likes
6

@ben brilliant! thank you very much for this.

7

Amazing work! Very useful

8

I have updated the Gravity Forms Bootstrap styling to use Bootstrap 5 and Gravity Forms 2.5:
Use the filters and hooks: https://github.com/basmiddelham/gravityforms-bootstrap-hooks/ together with the SCSS https://github.com/basmiddelham/gravityforms-bootstrap-styling/ for a complete Bootstrap 5 replacement of the Gravity Forms CSS.

2 Likes