Error message not displaying on front-end laravel fortify - laravel

Question

I'm trying to use fortify to create a recovery password page, where it asks for the user email and it should display an error message whenever the user tries to enter an email that is not valid, but the problem here is that the error message is only appearing on the server side and not on the page as it should. If I don't use bootstrap class in the error span it works, but I would like to know if there's any other way to solve this.
Here's the form:
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-50">
<form class="login100-form validate-form" action="{{route('password.request')}}" method="post">
#csrf
<span class="login100-form-title p-b-33">
Reset your password
</span>
#if(session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
#endif
<div class="wrap-input100 validate-input" data-validate = "Valid email is required: ex#abc.xyz">
<input class="input100" type="text" name="email" placeholder="Email">
<span class="focus-input100-1"></span>
<span class="focus-input100-2"></span>
#error('email')
<span class="invalid-feedback is-invalid" role="alert">
<strong>{{$message}}</strong>
</span>
#enderror
</div>
<div class="container-login100-form-btn m-t-20">
<button class="login100-form-btn" type="submit">
Send email
</button>
</div>
</form>
</div>
</div>
</div>
And this is where I think the problem might be:
#error('email')
<span class="invalid-feedback is-invalid" role="alert">
<strong>{{$message}}</strong>
</span>
#enderror