Modals

Information Boxes


                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

                 <div class="modal-dialog">

                   <div class="modal-content">

                     <div class="modal-header">

                     <h1 class="modal-title fs-5" id="exampleModalLabel"> Modal Titl</h1>

                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                     </div>

                     <div class="modal-body">


                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.
                     </div>

                     <div class="modal-footer">

                     <button type="button" class="btn btn-info btn-slim" data-bs-dismiss="modal">Close</button>

                     <button type="button" class="btn btn-primary btn-slim">OK</button>

                     </div>

                   </div>

                 </div>

                </div>



                <div class="modal fade" id="inputModal" tabindex="-1" aria-labelledby="inputModalLabel" aria-hidden="true">

                 <div class="modal-dialog modal-xl">

                    <div class="modal-content">

                      <div class="modal-header">

                        <h1 class="modal-title fs-5" id="inputModalLabel">
Modal with form </h1>

                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                      </div>

                      <div class="modal-body">

                        <form class=" needs-validation" novalidate>

                          <div class="row">

                            <div class="form-group">

                              <input type="text" class="form-control" id="validationCustom03" value="TEXT FIELD" required />

                            </div>

                          </div>

                          <div class="row">

                           <div class="form-group">

                             <input type="text" class="form-control" id="validationCustom04" value="TEXT FIELD"required />

                           </div>

                          </div>

                          <div class="row">

                            <div class="form-group">

                              <select class="form-select" id="validationCustom04" required>

                                <option selected disabled value="">Choose...</option>

                                <option>option 1</option>

                                <option>option 2</option>

                                <option>option 3</option>

                                <option>option 4</option>

                              </select>

                            </div>

                          </div>

                        </form>

                      </div>

                      <div class="modal-footer">

                        <button type="button" class="btn btn-info btn-slim" data-bs-dismiss="modal">Cancel</button>

                        <button type="button" class="btn btn-primary btn-slim">OK</button>

                      </div>

                    </div>

                  </div>

                </div>