How to Style Gravity Forms with Bootstrap 4

---

Adjust Gravity Forms Settings

Once logged into WordPress admin, navigate to Forms > Settings:

• Set Output CSS to No
• Set Output HTML5 to Yes

Below is the SASS code to include AFTER Bootstrap. This includes styling for credit card fields, address fields and name fields! Should be a solid starting point (or maybe complete)!

/** Gravity Forms */
.gform_wrapper{
  margin-bottom: 20px;
  ul.gform_fields {
    list-style: none;
    margin: 0;
    padding: 0;
    .gfield {
      float: left;
      width: 100%;
      margin-top: 25px;
    }
    .gf_left_half {
      width: 50%;
      float: left;
      padding-right: 7.5px;
    }
    .gf_right_half {
      width: 50%;
      float: right;
      padding-left: 7.5px;
    }
  }
  .hidden_label {
    label {display: none;}
  }
  .gform_wrapper ul {
    @extend .list-unstyled;
  }
  label.gfield_label {
    font-size: 1.2em;
    font-weight: bold;
  }
  .gform_validation_container {
    display: none;
  }
  table.gfield_list_container {
    width: 100%;
  }
  .gfield_consent_description {
    margin-left: 15px;
    margin-bottom: 10px;
    border-left: 1px solid $danger;
    padding: 0 10px;
    ol {

    }
  }
  .ginput_container_list {
    tr.gfield_list_group {
      .gfield_list_icons {
        text-align: center;
      }
    }
  }
  .ginput_container_checkbox {
    li {
      flex-grow: 1;
      width: 33%;
    }

  }
  .ginput_container_address {
    display: flex;
    flex-wrap: wrap;
    label {
      margin-top: -2px;
      display: block;
    }
    & > span {
      flex-grow: 1;
      display: block;
      &.address_line_1, &.address_line_2 {
        width: 100%;
      }
      &.address_city {
        width: 50%;
        padding-right: 1%;
      }
      &.address_state {
        width: 25%;
        padding-right: 1%;
      }
      &.address_zip {
        width: 25%;
      }
    }

  }
  .clear-multi {
    display: flex;
    & > div {
      flex-grow: 1;
      flex-grow: 1;
      display: flex;
      padding-right: 10px;
      label.ginput_container_time {
        margin-bottom: 0;
        margin-top: 5px;
      }
      i {
        padding: 0 5px;
      }
      &:last-child {
        padding-right: 0;
      }
    }
  }


  .gfield_visibility_hidden {
    display: none;
  }
  .gform_card_icon_container {
    display: none;
  }
  .ginput_cardinfo_left {
    display: block;
    float: left;
    width: 79%;
    margin-right: 1%;
  }
  .ginput_cardinfo_right {
    display: block;
    float: left;
    width: 20%;
  }
  .ginput_card_expiration_container {
    .ginput_card_expiration {
      float: left;
    }
    .ginput_card_expiration_month {
      width: 74%;
      margin-right: 1%;
    }
    .ginput_card_expiration_year {
      width: 25%;
    }
    label {
      clear: both;
      width: 100%;
    }
  }
  .ginput_container_textarea {
    textarea.small{
      height: 125px;
    }
  }
  .ginput_container_name {
    @extend .input-group;
    justify-content: space-between;
    span {
      display: flex;
      flex-direction: column;
    }
    span.name_prefix {
      @extend .input-group-prepend;
    }
    span.name_suffix {
      @extend .input-group-append;
    }
    label{
      font-size: .8em;
    }
  }

  li {
    ul.gform_fields {
      @extend .form-group;
      label {
        font-size: 1.2em;
        font-weight: bold;
      }
    }
  }

  .ginput_full.ginput_cardextras {
    display: block;
    margin-top: 4px;
  }
  ul.gfield_checkbox, ul.gfield_radio {
    display: flex;
    flex-wrap: wrap;
    li {
      @extend .form-check;
      margin-bottom: 0;
      padding-left: 10px;
      padding-right: 10px;
      input{
        margin-right: 3px;
      }
    }
  }

  .gfield.gsection {
    border-left: 10px solid $info;
    border-top: 1px solid $info;
    padding: 10px;
    margin-top: 40px;
  }

  .gfield_required {
    padding-left: 1px;
    color: $danger;
  }

  input[type="email"],
  input[type="date"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="time"],
  input[type="week"],
  input[type="url"],
  select,
  textarea {
    @extend .form-control;
  }

  .button {
    @extend .btn;
    @extend .btn-lg;
    background-color: $primary;
    color: #fff;
  }

  .gfield_error {
    .gfield_label {
      @extend .alert-danger;
    }

    input,
    select,
    textarea {
      @extend .alert-danger;
    }
  }

  .validation_error {
    @extend .alert;
    @extend .alert-danger;
  }

  .validation_message {
    display: none;
  }


  .gf_progressbar {
    @extend .progress;
    height: 30px;
    margin-bottom: 15px;
    .gf_progressbar_percentage {
      @extend .progress-bar;
      font-size: 18px;
      span {
        display: block;
        padding: 10px;
      }
    }
  }

  .gform_footer, .gform_page_footer {
    clear: both;
    padding-top: 15px;
    width: 100%;
  }

}


#ui-datepicker-div {
  background: #FFF;
  border: 1px solid #ddd;
  border-radius:$border-radius;
  box-shadow: $box-shadow;
  display:none;
  padding:15px;
  width:300px;

  .ui-icon {
    color: transparent;
    cursor: pointer;
    font-size: 0px;
  }


  .ui-datepicker-prev {
    float: left;
    width: 10%;

    .ui-icon:before {
      content:'\f060';
    }

    &.ui-state-disabled {
      display:none;
    }
  }

  .ui-datepicker-next {
    float: right;
    width: 10%;
    .ui-icon:before {
      content:'\f061';
      float: right;
    }

    &.ui-state-disabled {
      display:none;
    }
  }

  .ui-datepicker-title {
    select {
      float: left;
      width: 70%;
    }

    .ui-datepicker-month {
      margin: 0px 5% 6px;
    }

    .ui-datepicker-year {
      margin: 0px 15% 6px;
    }
  }

  .ui-datepicker-today {
    background-color: $primary;
    border-radius: 4px;

    a {
      color: #FFF;
    }
  }

  table {
    width: 100%;

    td, th {
      text-align: center;
    }

    td {
      a {
        display: block;
        padding: 5px;
      }
    }
  }
}