announcement something

<!-- Announcements -->
                            <div class="col-7 border border-2 shadow" style="background-color: white;">
                                <div class="mb-12 mx-2 my-2 text-end">
                                    <br><br>
                                    <h3 class="fw-normal text-start">Announcements List</h3>
                                </div><br><br>
                                <div class="mb-2">
                                    <div class="container responsive overflow-auto" style="height: 500px;">
                                    <!-- Card -->
                                    <div class="card" style="width: 25rem;height: 18rem;">
                                        <div class="card-body">
                                            <h5 class="card-title fw-bold" style="font-size:18px">Announcement Test 1</h5>
                                            <h6 class="card-subtitle mb-2 text-muted">Date Test 1</h6>
                                            <p class="sizelimiter card-text" style="display:inline-block;" id="testing1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fermentum enim at justo iaculis, eu pulvinar purus lacinia. Cras hendrerit ornare lectus, non tristique sapien volutpat vitae. Duis eget dolor a diam imperdiet aliquet mattis quis lacus. Vestibulum in cursus urna, id consequat mauris. Nulla at quam tempus dolor convallis.</p>
                                            <br><br>
                                            <div class="d-flex mt-auto">
                                            <a href="#" class="col-3 card-link btn btn-primary">View</a>
                                            </div>
                                        </div>
                                    </div>
                                    <br><br>
                                        <div class="text-center mt-5">
                                            <!-- Button trigger modal -->
                                            <button type="button" class="col-8 btn btn-primary text-white" data-bs-toggle="modal" data-bs-target="#allAnnouncement">Check All Announcement</button>
                                            <!-- Modal -->
                                            <div class="modal fade" id="allAnnouncement" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-scrollable modal-lg">
                                                <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="exampleModalLabel">Announcements</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                        <!-- Card -->
                                                      <div class="card border-0 text-start">
                                                                <div class="card-body mx-2 my-2 border-bottom border-2">
                                                                    <h6>
                                                                    <b>Test Title:</b>
                                                                    <span id="subjectmo"> This is a test description (80 characters max) test test test test test test...</span>
                                                                    </h6>
                                                                    <div class="row">
                                                                        <div class="col">
                                                                        <span>October 12, 2021</span>
                                                                        </div>
                                                                        <div class="col text-end">
                                                                        <button class="btn btn-primary">View</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="card-body mx-2 my-2 border-bottom border-2">
                                                                    <h6>
                                                                    <b>Test Title:</b>
                                                                    <span id="subjectmo"> This is a test description (80 characters max) test test test test test test...</span>
                                                                    </h6>
                                                                    <div class="row">
                                                                        <div class="col">
                                                                        <span>October 12, 2021</span>
                                                                        </div>
                                                                        <div class="col text-end">
                                                                        <button class="btn btn-primary">View</button>
                                                                        </div>
                                                                    </div>
                                                                </div><div class="card-body mx-2 my-2 border-bottom border-2">
                                                                    <h6>
                                                                    <b>Test Title:</b>
                                                                    <span id="subjectmo"> This is a test description (80 characters max) test test test test test test...</span>
                                                                    </h6>
                                                                    <div class="row">
                                                                        <div class="col">
                                                                        <span>October 12, 2021</span>
                                                                        </div>
                                                                        <div class="col text-end">
                                                                        <button class="btn btn-primary">View</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="card-body mx-2 my-2 border-bottom border-2">
                                                                    <h6>
                                                                    <b>Test Title:</b>
                                                                    <span id="subjectmo"> This is a test description (80 characters max) test test test test test test...</span>
                                                                    </h6>
                                                                    <div class="row">
                                                                        <div class="col">
                                                                        <span>October 12, 2021</span>
                                                                        </div>
                                                                        <div class="col text-end">
                                                                        <button class="btn btn-primary">View</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="card-body mx-2 my-2 border-bottom border-2">
                                                                    <h6>
                                                                    <b>Test Title:</b>
                                                                    <span id="subjectmo"> This is a test description (80 characters max) test test test test test test...</span>
                                                                    </h6>
                                                                    <div class="row">
                                                                        <div class="col">
                                                                        <span>October 12, 2021</span>
                                                                        </div>
                                                                        <div class="col text-end">
                                                                        <button class="btn btn-primary">View</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="card-body mx-2 my-2 border-bottom border-2">
                                                                    <h6>
                                                                    <b>Test Title:</b>
                                                                    <span id="subjectmo"> This is a test description (80 characters max) test test test test test test...</span>
                                                                    </h6>
                                                                    <div class="row">
                                                                        <div class="col">
                                                                        <span>October 12, 2021</span>
                                                                        </div>
                                                                        <div class="col text-end">
                                                                        <button class="btn btn-primary">View</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                    

                                                        <div class="card-footer text-center py-3">
                                                            <!-- footer -->
                                                        </div>
                                                        </div>
                                                </div>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <script>
                                var subject = "This is a test description (80 characters max) test test test test test test...";
                                var limitedText = (subject.substring(0,80) + "...");
                                document.getElementById("subjectmo").innerHTML = limitedText;
                                </script>
                        </div>