How to Style Gravity Forms with Bootstrap 5

---

Gravity Forms Settings

Navigate to Forms > Settings from the WordPress admin screen.

• Change Output CSS to No
• Change Output HTML5 to Yes

This helps to clean up some of the wonky stuff Gravity Forms includes in their CSS and makes it match Bootstrap 5 form styling.

I’ve included support for the gravity forms css ready classes gf_left_half and gf_right_half which really serves to make forms visually shorter. We find these two useful.

SCSS

//important! include bootstrap.
@import bootstrap.scss;

//OR Better yet, include only the parts of Bootstrap that we need: 
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/utilities";
@import "bootstrap/tables"; //only for the datepicker and it's a load of stuff, remove if you don'y need
@import "bootstrap/forms"; //:-)
@import "bootstrap/buttons";
@import "bootstrap/alert";
@import "bootstrap/progress"; //only for pagination in gravity forms.


.gform_wrapper {
  .validation_error {
    @extend .mt-3;
    @extend .alert;
    @extend .alert-danger;
  }
  .gform_heading {
    @extend .mb-3;
    .gform_description {
      @extend .lead;
    }
  }
  .gform_body {
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      li {
        margin: 0;
        padding: 20px 0 0 0;
        float: left;
        width: 100%;

        .gfield_description {
          font-size: .8em;
          margin-bottom: 15px;
        }
        label {
          text-transform: uppercase;
          color: lighten($dark, 20%);
          font-size: .7em;
          line-height: 1.8em;
          padding-left: 0;
          margin: 0;
        }
        &.hidden_label {
          label {
            @extend .visually-hidden;
          }
        }
        &.gf_left_half {
          float: left;
          width: calc(50% - 10px);
        }
        &.gf_right_half {
          float: right;
          width: 50%;
        }
        label.gfield_label {
          text-transform: unset;
          font-size: .9em;
          line-height: 1.3em;
          color: $dark;
          font-weight: bold;
        }
        select {
          @extend .form-select;
        }
        &.checkbox, &.radio {
          label {
            display: block;
          }
        }

        .ginput_container_fileupload,
        .ginput_container_list,
        .ginput_container_date,
        .ginput_container_textarea,
        .ginput_container_post_excerpt,
        .ginput_container_post_tags {
          input, textarea {
            @extend .form-control;
          }
        }

        .clear-multi {
          display: flex;
          .ginput_container_time {
            @extend .input-group;
            margin-right: 1%;
            &:last-child {
              margin-right: 0;
            }
            i, label {
              @extend .input-group-text;
            }
            i {
              font-style: normal;
            }
            input {
              @extend .form-control;
            }
          }


        }
        .gfield_creditcard_warning_message {
          @extend .alert;
          @extend .alert-danger;
        }
      }
    }
    .ginput_complex {
      @extend .input-group;
      input {
        @extend .form-control;
      }
      &.gf_name_has_2 {
        span {
          display: block;
          width: 50%;
          &:first-child {
            padding-right: 10px;
          }
        }
      }
      .ginput_full {
        width: 100%;
      }
      .ginput_left {
        width: 50%;
        padding-right: 1%;
      }
      .ginput_right {
        width: 50%;
      }
    }
    .gform_page_footer {
      margin-top: 30px;
      input.gform_button {
        @extend .btn;
        @extend .btn-primary;
        @extend .btn-lg;
      }
      input.gform_previous_button, input.gform_next_button {
        @extend .btn;
        @extend .btn-dark;
        @extend .btn-lg;
      }
      input.gform_previous_button {
        @extend .btn-sm;
      }
    }
    .gfield_error {
      label.gfield_label {
        color: $danger;
      }
      input, select, textarea {
        border-color: $danger;
      }
      .validation_message {
        color: $danger;
        font-weight: bold;
      }
    }
    .gfield_radio, .gfield_checkbox {
      li {
        @extend .form-check;
        padding: 0;
        margin-left: 20px;
        font-size: 1.1em;
        input {
          width: .8em;
          height: .8em;
          @extend .form-check-input;
          margin-top: 4px;

        }
        label {
          @extend .form-check-label;
          margin: 3px;
          padding: 0 0 0 25px;
        }
      }

    }
  }
  .gform_footer {
    text-align: right;
    input.button {
      @extend .btn;
      @extend .btn-primary;
      @extend .mt-2;
    }
  }
  .gf_progressbar_wrapper {
    .gf_progressbar {
      @extend .progress;
      .gf_progressbar_percentage {
        @extend .progress-bar;
        @extend .bg-success;
      }
    }

  }
  .screen-reader-text {
    @extend .visually-hidden;
  }
}


#ui-datepicker-div {
  background: #fff;
  padding: 10px;
  font-size: .9em;
  -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,.5);
  box-shadow: 0 0 6px 0 rgba(0,0,0,.5);
  .ui-datepicker-header {
    display: flex;
    flex-wrap: wrap;
    font-size: .8em;
    .ui-datepicker-prev {
      display: block;
      width: 50%;
    }
    .ui-datepicker-next {
      display: block;
      width: 50%;
      text-align: right;
    }
  }
  .ui-datepicker-title {
    width: 100%;
    display: flex;
    select {
      @extend .form-select;
      width: 50%;
      &:first-child {
        width: 49%;
        margin-right: 1%;
      }
    }
  }
  table.ui-datepicker-calendar {
    @extend .table;
    @extend .table-sm;
  }
}




@media (max-width: 576px) {
  .gform_wrapper {

    .gform_body {
      ul {
        li {
          &.gf_left_half {
            float: unset;
            width: 100%;
          }
          &.gf_right_half {
            float: unset;
            width: 100%;
          }
        }
      }
    }
  }
}

Note: The download below includes everything that would normally be included bootstrap.css. It’s WAY better to compile the .scss on your own. Adding this to a project with bootstrap included will add more css than needed.