updates utility classes for form-groups

css/theme-bootstrap4.css

@@ -12985,7 +12985,7 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
 }
 
 /*
-* Use existing Bootstrap 4 classes and
+* Use existing Bootstrap 4/5 classes and
 * variables to extend - override CF7 style
 *
 * Useful CF7 classes:
@@ -13001,6 +13001,9 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
   max-width: 600px;
   margin: 0 auto !important;
 }
+.wpcf7 .wpcf7-form p {
+  margin-bottom: 1rem;
+}
 .wpcf7 .wpcf7-form label {
   width: 100%;
 }

css/theme.css

@@ -14095,7 +14095,7 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
 }
 
 /*
-* Use existing Bootstrap 4 classes and
+* Use existing Bootstrap 4/5 classes and
 * variables to extend - override CF7 style
 *
 * Useful CF7 classes:
@@ -14111,6 +14111,9 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
   max-width: 600px;
   margin: 0 auto !important;
 }
+.wpcf7 .wpcf7-form p {
+  margin-bottom: 1rem;
+}
 .wpcf7 .wpcf7-form label {
   width: 100%;
 }

inc/custom-comments.php

@@ -29,7 +29,7 @@ if ( ! function_exists( 'understrap_bootstrap_comment_form_fields' ) ) {
 	function understrap_bootstrap_comment_form_fields( $fields ) {
 
 		$replace = array(
-			'<p class="' => '<div class="form-group ',
+			'<p class="' => '<div class="form-group mb-3',
 			'<input'     => '<input class="form-control" ',
 			'</p>'       => '</div>',
 		);
@@ -45,7 +45,7 @@ if ( ! function_exists( 'understrap_bootstrap_comment_form_fields' ) ) {
 		}
 
 		$replace = array(
-			'<p class="' => '<div class="form-group form-check ',
+			'<p class="' => '<div class="form-group mb-3 form-check ',
 			'<input'     => '<input class="form-check-input" ',
 			'<label'     => '<label class="form-check-label" ',
 			'</p>'       => '</div>',
@@ -71,7 +71,7 @@ if ( ! function_exists( 'understrap_bootstrap_comment_form' ) ) {
 	 */
 	function understrap_bootstrap_comment_form( $args ) {
 		$replace = array(
-			'<p class="' => '<div class="form-group ',
+			'<p class="' => '<div class="form-group mb-3 ',
 			'<textarea'  => '<textarea class="form-control" ',
 			'</p>'       => '</div>',
 		);

inc/woocommerce.php

@@ -82,7 +82,7 @@ if ( ! function_exists( 'understrap_wc_form_field_args' ) ) {
 				 * Add a class to the field's html element wrapper - woocommerce
 				 * input types (fields) are often wrapped within a <p></p> tag.
 				 */
-				$args['class'][] = 'form-group';
+				$args['class'][] = 'form-group mb-3';
 				// Add a class to the form input itself.
 				$args['input_class'][] = 'form-control';
 				// Add custom data attributes to the form input itself.
@@ -98,7 +98,7 @@ if ( ! function_exists( 'understrap_wc_form_field_args' ) ) {
 			 * defined for this specific input type targets only the country select element.
 			 */
 			case 'country':
-				$args['class'][] = 'form-group single-country';
+				$args['class'][] = 'form-group mb-3 single-country';
 				break;
 
 			/*
@@ -106,7 +106,7 @@ if ( ! function_exists( 'understrap_wc_form_field_args' ) ) {
 			 * for this specific input type targets only the country select element.
 			 */
 			case 'state':
-				$args['class'][]           = 'form-group';
+				$args['class'][]           = 'form-group mb-3';
 				$args['custom_attributes'] = array(
 					'data-plugin'      => 'select2',
 					'data-allow-clear' => 'true',
@@ -117,7 +117,7 @@ if ( ! function_exists( 'understrap_wc_form_field_args' ) ) {
 				$args['input_class'][] = 'form-control';
 				break;
 			case 'checkbox':
-					$args['class'][] = 'form-group';
+					$args['class'][] = 'form-group mb-3';
 					// Wrap the label in <span> tag.
 					$args['label'] = isset( $args['label'] ) ? '<span class="custom-control-label">' . $args['label'] . '<span>' : '';
 					// Add a class to the form input's <label> tag.
@@ -129,7 +129,7 @@ if ( ! function_exists( 'understrap_wc_form_field_args' ) ) {
 				$args['input_class'][] = 'custom-control-input';
 				break;
 			default:
-				$args['class'][]       = 'form-group';
+				$args['class'][]       = 'form-group mb-3';
 				$args['input_class'][] = 'form-control';
 				break;
 		} // End of switch ( $args ).

src/sass/theme/_contact-form7.scss

@@ -1,5 +1,5 @@
 /*
-* Use existing Bootstrap 4 classes and
+* Use existing Bootstrap 4/5 classes and
 * variables to extend - override CF7 style
 *
 * Useful CF7 classes:
@@ -51,6 +51,7 @@
     // set paragraphs to behave like divs with class .form-group
     p {
       @extend .form-group !optional;
+	  margin-bottom: $spacer; // Replicates the .form-group functionality in BS5.
     }
 
     // let labels be 100%

woocommerce/loop/orderby.php

@@ -21,7 +21,7 @@ if ( ! defined( 'ABSPATH' ) ) {
 
 ?>
 <form class="woocommerce-ordering" method="get">
-	<select name="orderby" class="orderby custom-select" aria-label="<?php esc_attr_e( 'Shop order', 'woocommerce' ); ?>">
+	<select name="orderby" class="orderby custom-select form-select" aria-label="<?php esc_attr_e( 'Shop order', 'woocommerce' ); ?>">
 		<?php foreach ( $catalog_orderby_options as $option_id => $name ) : ?>
 			<option value="<?php echo esc_attr( $option_id ); ?>" <?php selected( $orderby, $option_id ); ?>><?php echo esc_html( $name ); ?></option>
 		<?php endforeach; ?>