modal

   <!-- create modal -->
              <div class="modal fade" id="modalForPost" tabindex="-1" aria-labelledby="createModalLabel"
                aria-hidden="true">
                <div class=" modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                    <!-- head -->
                    <div class="modal-header align-items-center">
                      <h5 class="text-dark text-center w-100 m-0" id="exampleModalLabel">
                        Create Post
                      </h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <!-- here form start -->

                      <form action="" method="post">
                        <!-- body -->
                        <div class="modal-body">
                          <div class="my-1 p-1">
                            <div class="d-flex flex-column">
                              <!-- name -->
                              <div class="d-flex align-items-center">
                                <div class="p-2">
                                  <img src="https://source.unsplash.com/collection/happy-people" alt="from fb"
                                    class="rounded-circle" style="
                                        width: 38px;
                                        height: 38px;
                                        object-fit: cover;
                                      " />
                                </div>
                                <div>
                                  <p class="m-0 fw-bold">Rohit</p>
                                </div>
                              </div>
                              <!-- text -->
                              <div>
                                <textarea cols="30" rows="2" placeholder="heading for your news ..."
                                  class="form-control border-1 " required></textarea>
                              </div>

                              <label class="mt-1" >Upload images/videos</label>
                              <!-- drag and drop -->
                              <div
                                class="d-flex my-2 py-4 border rounded d-flex-row align-items-center justify-content-center bg-gray">
                                
                                <div class="d-block align-items-center justify-content-center">
                                  
                                      
                                  <input type="file" multiple>
                                  <!-- media icon -->
                                
                                </div>
                              </div>
                              <!-- location -->
                              <div>
                                  <div class="form-floating">

                                    <input type="text"
                                    class="form-control my-3 "
                                    id="city"
                                    name="dgsh"
                                    placeholder="Select City"
                                    autocomplete="city"
                                    required
                                    >
                                    <label name="djkldsl" for="city">Select City</label>
                                </div>
                              
                              </div>
                            </div>
                          </div>

                          <!-- end -->
                        </div>
                        <!-- footer -->
                        <div class="modal-footer">
                          <button type="submit" class="btn btn-primary w-100">
                            Post
                          </button>
                      </form>
                    </div>
                  </div>
              </div>