How to center align a form in Bootstrap 4?-CodePudding

I'm new to Bootstrap and I'm trying to center the form below but currently it is left justified. How can I do this?

Code example:

<div >
  <div >
    <!-- START CONTACT FROM -->
    <div >
      <form action="assets/php/contact.php" method="post">
        <div >
          <input type="text" name="name"  id="name" placeholder="Enter Your Name" required />
        </div>
        <div >
          <input type="email" name="email"  id="email" placeholder="Enter Your Email" required />
          <small id="emailHelp" >We'll never share your email with anyone else.</small>
        </div>
        <div >
          <input type="text" name="subject"  id="subject" placeholder="Enter Your Subject" />
        </div>
        <div >
          <textarea rows="6" name="message"  id="message" placeholder="Enter Your Message" required></textarea>
        </div>
        <div >
          <button>send message</button>
        </div>
      </form>
    </div>
    <!-- END CONTACT FROM -->
  </div>
</div>

CodePudding user response：

if i understand you correctly, you want your form in the center of the div. i believe you have tried entering the bootstrap center class or even the html <center></center> tag but didn't do much. this is probably because you have your form in a <div > and then a <div >. what this does already is keep the form to the left side of your page. if you wish to retain the row class , write it as

<div >
    <div >
        <!-- START CONTACT FROM -->
        <div >
            <form action="assets/php/contact.php" method="post">
                <div >
                    <div >
                        <input type="text" name="name"  id="name" placeholder="Enter Your Name" required />
                    </div>
                    <div >
                        <input type="email" name="email"  id="email" placeholder="Enter Your Email" required />
                        <small id="emailHelp" >We'll never share your email with anyone else.</small>
                    </div>
                </div>
                <div >
                    <input type="text" name="subject"  id="subject" placeholder="Enter Your Subject">
                </div>
                <div >
                    <textarea rows="6" name="message"  id="message" placeholder="Enter Your Message" required></textarea>
                </div>
                <div >
                    <button>send message</button>
                </div>
            </form>
        </div>
        <!-- END CONTACT FROM -->
    </div>
</div>

CodePudding user response：

You can use Bootstrap's flex box classes to center your container by adding only these three classes to your row div container:

d-flex justify-content-center

example:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div >      
  <div >
  <!-- START CONTACT FROM -->
  <div >
      <form action="assets/php/contact.php" method="post">
          <div >
              <input type="text" name="name"  id="name" placeholder="Enter Your Name" required />
          </div>
          <div >
              <input type="email" name="email"  id="email" placeholder="Enter Your Email" required />
              <small id="emailHelp" >We'll never share your email with anyone else.</small>
          </div>
          <div >
              <input type="text" name="subject"  id="subject" placeholder="Enter Your Subject">
          </div>
          <div >
              <textarea rows="6" name="message"  id="message" placeholder="Enter Your Message" required></textarea>
          </div>
          <div >
              <button>send message</button>
          </div>
      </form>
  </div>
  <!-- END CONTACT FROM -->
  </div>
</div>