How to center the div horizontally elements having container and row class in Bootstrap 5?-CodePudding

The section cannot align properly in the center and neither does the div have a container class. If there is any bootstrap class for alignment or do I have to create CSS code for aligning the items in the div tag.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<section >
        <div >
            <div >
                <h1 >Contact Us</h1>
                <br>
                <div >
                    <form>
                        <div >
                      <div >
                        <label  for="name">Name</label>
                        <input  id="name" type="text" placeholder="Name" />
                      </div>
                      <div >
                        <label  for="place">Place</label>
                        <input  id="place" type="text" placeholder="Place" />
                      </div>
                    </div>
                    <div >
                      <div >
                        <label  for="emailAddress">Email Address</label>
                        <input  id="emailAddress" type="email" placeholder="Email Address" />
                      </div>
                      <div >
                        <label  for="mobNumber">Mobile Number</label>
                        <input  id="mobNumber" type="tel" placeholder="Mobile Number" />
                      </div>
                    </div>
                    <div >
                      <div >
                        <label  for="message">Message</label>
                        <textarea  id="message" type="text" placeholder="Type your Message here..." style="height: 10rem;"></textarea>
                      </div>
                    </div>
                      <br>
                        <button  type="submit">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

CodePudding user response：

Can you try this ? I have assigned a col-md-6 to cover all the elements under the row and I converted col-md-6 in the form-group classes to col-12.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<section >
  <div >
    <div >
      <div >
        <h1 >Contact Us</h1>
      <br>
      <div >
        <form>
          <div >
            <div >
              <label  for="name">Name</label>
              <input  id="name" type="text" placeholder="Name" />
            </div>
            <div >
              <label  for="place">Place</label>
              <input  id="place" type="text" placeholder="Place" />
            </div>
          </div>
          <div >
            <div >
              <label  for="emailAddress">Email Address</label>
              <input  id="emailAddress" type="email" placeholder="Email Address" />
            </div>
            <div >
              <label  for="mobNumber">Mobile Number</label>
              <input  id="mobNumber" type="tel" placeholder="Mobile Number" />
            </div>
          </div>
          <div >
            <div >
              <label  for="message">Message</label>
              <textarea  id="message" type="text" placeholder="Type your Message here..." style="height: 10rem;"></textarea>
            </div>
          </div>
          <br>
          <button  type="submit">Submit</button>
        </form>
      </div>
    </div>
      </div>
  </div>
</section>