How to use boostrap alert without javascript?

Question

Hi Team

I need help my form is not submitting, but i dont have any errors and want to use bootsrap alerts when form is submitted successfully and required is not displaying.

 

// html

<section>
        <div class="container com-sp pad-bot-70" style="padding-top: 0;">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-body">
                            <h1 class="card-title text-center">Student Refund Form</h1>
                            <div id="alertMessage" class="alert alert-danger" style="display: none;">
                            <!-- This is where alert messages will appear -->
                            <span id="alertText"></span>
                        </div>
                            <form id="myform" class="needs-validation" method="POST" action="submit_refund.php">
                                <div class="form-group">
                                    <label for="studentName">Student Name</label>
                                    <input type="text" id="student-name" name="studentName" required>
                                    <div id="student_err" class="invalid-feedback"></div>
                                </div>
                                <div class="form-group">
                                    <label for="studentID">Student ID</label>
                                    <input type="text" id="studentId" name="studentID" required>
                                    <div id="studentId_err" class="invalid-feedback"></div>
                                </div>
                                <div class="form-group">
                                    <label for="courseName">Course Name</label>
                                    <input type="text" id="course-name" name="courseName" required>
                                    <div id="course_err" class="invalid-feedback"></div>
                                </div>
                                <div class="form-group">
                                    <label for="reason">Reason for Refund</label>
                                    <select id="reason" name="reason" required>
                                        <option value="">Select a reason</option>
                                        <option value="course_cancelled">Course Cancelled</option>
                                        <option value="schedule_conflict">Schedule Conflict</option>
                                        <option value="personal_reasons">Personal Reasons</option>
                                        <option value="other">Other</option>
                                    </select>
                                    <div id="reason_err" class="invalid-feedback"></div>
                                </div>
                                <div class="form-group">
                                    <label for="details">Details</label>
                                    <textarea id="details" name="details" rows="4" required></textarea>
                                    <div id="details_err" class="invalid-feedback"></div>
                                </div>
                                <div class="input-field col s12" style="margin-top: 20px;">
                                  <input type="submit" value="Submit" class="waves-effect waves-light light-btn" 
                                   style="width: 100%; background-color: #4CAF50; color: black; padding: 10px; border: none; cursor: pointer; border-radius: 4px; font-size: 16px;">
                                   </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>