bootstrap from <div className="col-md-12"> for tablet and laptop

<div className="container">
      <h5 className="w-100 d-flex justify-content-center p-3 ">Add New Department</h5>
      <div className="row">
        <div className="col-md-12">
          {/* <h6>Add Your Detail</h6> */}
          <form onSubmit={onSubmitChange}>
            <div className="w-100 d-flex justify">
              {/* <label className="form-label">Student Name</label> */}
              {/* <input

                type="text"
                className="form-control"
                id="name"
                placeholder="Enter Your Name"
                name="ad_name"
                onChange={(e) => changeUserFieldHandler(e)}
                required
              /> */}





<input
  type="text"
  className="form-control col"
  id="name"
  placeholder="Enter Your Name"
  name="ad_name"
  onChange={(e) => changeUserFieldHandler(e)}
  required
/>



            </div>

         
            <div className="mb-3 mt-3">
              {/* <label className="form-label">Class Coordinator(s) Name</label> */}
              <input
                type="text"
                className="form-control"
                id="password"
                placeholder="Enter Name"
                name="ad_username"
                onChange={(e) => changeUserFieldHandler(e)}
                required
              />
            </div>

            <div className="mb-3 mt-3">
              {/* <label className="form-label">Leave Date From</label> */}
              <input
                type="email"
                className="form-control"
                id="date_from"
                name="ad_email_id"
                onChange={(e) => changeUserFieldHandler(e)}
                required
              />
            </div>

            <div className="mb-3 mt-3">
              {/* <label className="form-label">Leave Time From</label> */}
              <input
                type="number"
                className="form-control"
                id="time_from"
                name="ad_phone_number"
                onChange={(e) => changeUserFieldHandler(e)}
                required
              />
            </div>

            <div className="mb-3 mt-3">
              {/* <label className="form-label">Leave Date Up to</label> */}
              <input
                type="password"
                className="form-control"
                id="date_up_to"
                name="ad_password"
                onChange={(e) => changeUserFieldHandler(e)}
                required
              />
            </div>

       

            {/* Add some space */}
            <div style={{ marginTop: "20px" }}>
              <button type="submit" className="btn btn-primary">
                Submit
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>