Boostrap 4 has some issues with bugs. I recommend replacing the following code:

 <div class="invalid-feedback">
 Text here
 </div>

With:

<div class="text-danger">
Text here
</div>

The second option looks almost identical but is more reliable.

For a better visual appearance, consider using:

<div class="text-danger">
<small>Text here</small>
</div>

To solve this issue, I simply included the d-block class:

@error('terms')
    <div class="invalid-feedback d-block" role="alert">
         <strong>{{ $message }}</strong>
    </div>
@enderror

Keep on coding!

If you need more information about the d-block class in Bootstrap, check out their documentationDisplay property

When it comes to Bootstrap, the method for overriding the display property from none to block involves first checking for a previous is-invalid class. Take a look at this CSS:

https://i.sstatic.net/Krv3W.png

This means that in case of an error, the is-invalid class should be applied to one element first, followed by the invalid-feedback on another! This can be seen in actions within Laravel, as shown below:

{{-- Either following an input --}}

<input type="password" id="registerPassword"
       class="form-control @error('register_password') is-invalid @enderror"
       name="register_password" required autocomplete="new-password"
>

@error('register_password')
    <span class="invalid-feedback" role="alert">
        <strong>{{ $message }}</strong>
    </span>
@enderror

{{-- Or separately in DOM --}}

@error('register_password')
    <div class="is-invalid">...</div>

    <span class="invalid-feedback" role="alert">
        <strong>{{ $message }}</strong>
    </span>
@enderror

Include the class .is-invalid in the .input-group element.

When the invalid-feedback element comes after an element with the class .is-invalid, it will show up -- this is how server-side validation is enabled.

Here is a practical illustration featuring a clever usage of flex-wrap and w-100:

<div class="form-group">
    <label class="form-control-label">Name</label>
    <div class="input-group flex-wrap">
        <span class="input-group-addon"><span class="fa fa-lock"></span></span>
        <input name="name" class="form-control is-invalid" type="text">
        <div class="invalid-feedback w-100">Custom error</div>
    </div>
</div>

I stumbled upon this particular fix

<div class="input-group ">
    <div class="input-group-prepend">
        <div class="input-group-text">Commencement Date</div>
    </div>
    <input type="text" class="form-control is-invalid" placeholder="Enter Date">
    <div class="invalid-feedback order-last ">
        Displaying an error message here
    </div>
    <div class="input-group-append">
        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
    </div>
</div>

Upon examination of the .invalid-feedback class, I have discovered the following definition in Bootstrap 4.3:

.invalid-feedback {
    /*display: none;*/
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #dc3545;
}

You have the option to duplicate and customize this class to evade any inherent restrictions.

Here's my take on a do-it-yourself solution:

HTML

<div class="container">
<div class="row p-3">
    <div class="col-md-6 mb-3">
        <label class="sr-only">End Date/Time</label>
        <div class="input-group">
            <div class="input-group-prepend ">
                <div class="input-group-text error-feedback">Start Date</div>
            </div>
            <input type="text" class="form-control error-feedback" placeholder="Date Input">
            <div class="invalid-feedback order-last ">
                Error Message
            </div>
            <div class="input-group-append error-feedback">
                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
            </div>
        </div>
    </div>
</div>

CSS

.error-feedback{
    border:1px red solid;
}

https://i.sstatic.net/iT4r0.png

It may not be perfect, but I think it's pretty good compared to this example

<div class="input-section">
<p class="input-label">Full Name</p>
<div class="input-area">
    <span class="icon-lock"></span>
    <input name="full_name" class="error-input" type="text">
    <div class="error-message visible">Custom error message</div>
</div>

If you prefer, you have the option of applying the .is-valid/.is-invalid class directly to the parent element .input-group. With this setup, you can then adjust the CSS to incorporate a red border for the child elements in the following manner:

.input-group.is-invalid .form-control,
        .input-group.is-invalid .custom-select {
            border-color: #FA5252;
        }

        .input-group.is-invalid .input-group-prepend .input-group-text {
            border: 1px solid #FA5252;
        }

        .input-group.is-valid .form-control,
        .input-group.is-valid .custom-select {
            border-color: #05A677;
        }

        .input-group.is-valid .input-group-prepend .input-group-text {
            border: 1px solid #05A677;
        }

I've successfully implemented this solution using Bootstrap 4.3. To make it work, I added the "validated" class to the "form-group" and placed the error message within the input-group.

<div class="form-group validated">
    <label class="form-control-label">Name</label>
    <div class="input-group">
        <span class="input-group-addon"><span class="fa fa-lock"></span></span>
        <input name="name" class="form-control is-invalid" type="text">
        <div class="invalid-feedback">Custom error</div>
    </div>
</div>

Within my application, I have implemented a technique to encapsulate Bootstrap's styles in order to prevent them from affecting styles outside of my app:

.my-app {
  @import '~bootstrap/scss/bootstrap.scss';
}

Upon inspecting the rendered styles, I discovered that the validation css was being overridden due to the mixin responsible for its generation transforming it into:

.was-validated .my-app:invalid ~ .invalid-feedback,
.was-validated .my-app:invalid ~ .invalid-tooltip, 
.my-app.is-invalid ~ .invalid-feedback, 
.my-app.is-invalid ~ .invalid-tooltip {
  display: block;
}

It is important to note that the correct syntax is .my-app.is-invalid, not .my-app .is-invalid. This behavior seems to be related to the form-validation-state-selector mixin, which addresses compatibility issues with dart-sass as indicated by a comment in the code referencing a specific GitHub issue.

To address this issue, I modified my namespace selector by using a wildcard character:

.my-app * {
  @import '~bootstrap/scss/bootstrap.scss';
}

When working with Django and django-crispy-form, I typically implement the following CSS code:

.is-invalid .form-group{
    .invalid-feedback {
        display: block;
    }
}