Required form label for horizontal forms (#1161)

* added required class to showcase in horizontal form

* support for required label class in horizontal form

src/pages/_includes/cards/form/layout.html

@@ -6,7 +6,7 @@
 	<div class="card-body">
 		<form>
 			<div class="form-group mb-3 {% if horizontal %}row{% endif %}">
-				<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">Email address</label>
+				<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %} required">Email address</label>
 				<div {% if horizontal %}class="col"{% endif %}>
 					<input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
 					<small class="form-hint">We'll never share your email with anyone else.</small>
@@ -14,7 +14,7 @@
 			</div>
 
 			<div class="form-group mb-3 {% if horizontal %}row{% endif %}">
-				<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">Password</label>
+				<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %} required">Password</label>
 				<div {% if horizontal %}class="col"{% endif %}>
 					<input type="password" class="form-control" placeholder="Password">
 					<small class="form-hint">
@@ -25,7 +25,7 @@
 			</div>
 
 			<div class="form-group mb-3 {% if horizontal %}row{% endif %}">
-				<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">Select</label>
+				<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %}">Select</label>
 				<div {% if horizontal %}class="col"{% endif %}>
 					<select class="form-select">
 						<option>Option 1</option>
@@ -49,7 +49,7 @@
 			</div>
 
 			<div class="form-group {% if horizontal %}row{% else %}mb-3{% endif %}">
-				<label class="form-label{% if horizontal %} col-3 col-form-label pt-0{% endif %}">Checkboxes</label>
+				<label class="{% if horizontal %}col-3 col-form-label pt-0{% else %}form-label{% endif %}">Checkboxes</label>
 				<div {% if horizontal %}class="col"{% endif %}>
 					<label class="form-check">
 						<input class="form-check-input" type="checkbox" checked="">

src/scss/ui/_forms.scss

@@ -7,6 +7,7 @@ textarea {
 /**
 Form label
  */
+.col-form-label,
 .form-label {
   display: block;
   font-weight: $font-weight-medium;