Center a form using Bootstrap

Question

Center a form using Bootstrap

Struggling to center my form using bootstrap as a beginner. I've tried different methods without success. Hoping for some guidance on how to center it while keeping the same size. Any assistance would be appreciated!

This is the HTML code:

<div class="container">
  <div class="row">
    <form name="sentMessage" id="contactForm" novalidate>
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
            <p class="help-block text-danger"></p>
          </div>
          <div class="form-group">
            <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
            <p class="help-block text-danger"></p>
          </div>
          <div class="form-group">
            <input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
            <p class="help-block text-danger"></p>
          </div>
          <div class="form-group">
            <textarea rows="6" class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
            <p class="help-block text-danger"></p>
          </div>
        </div>

        <div class="clearfix"></div>
        <div class="col-lg-12 text-center">
          <div id="success"></div>
          <button type="submit" class="btn btn-xl">Send Message</button>
        </div>
      </div>
    </form>
  </div>
</div>

html css twitter-bootstrap

Answer 1

Answer №1

To ensure your form stays centered, you can utilize additional Bootstrap classes that will also make the design responsive based on screen width.

Simply include offset-3 classes for each size you are working with, and insert extra sm and xs sizes right after your row division. No extra CSS required.

VIEW FIDDLE

HTML:

<div class="container">
    <div class="row">
        <form name="sentMessage" id="contactForm" novalidate>
            <div class="row">
                <div class="col-md-offset-3 col-sm-offset-3 col-xs-offset-3 col-md-6 col-sm-6 col-xs-6">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
                        <p class="help-block text-danger"></p>
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
                        <p class="help-block text-danger"></p>
                    </div>
                    <div class="form-group">
                        <input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
                        <p class="help-block text-danger"></p>
                    </div>
                    <div class="form-group">
                        <textarea rows="6" class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
                        <p class="help-block text-danger"></p>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="col-lg-12 text-center">
                    <div id="success"></div>
                    <button type="submit" class="btn btn-xl">Send Message</button>
                </div>
            </div>
        </form>
    </div>
</div>

Answer 2

To ensure your form stays centered, you can utilize additional Bootstrap classes that will also make the design responsive based on screen width.

Simply include offset-3 classes for each size you are working with, and insert extra sm and xs sizes right after your row division. No extra CSS required.

VIEW FIDDLE

HTML:

<div class="container">
    <div class="row">
        <form name="sentMessage" id="contactForm" novalidate>
            <div class="row">
                <div class="col-md-offset-3 col-sm-offset-3 col-xs-offset-3 col-md-6 col-sm-6 col-xs-6">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
                        <p class="help-block text-danger"></p>
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
                        <p class="help-block text-danger"></p>
                    </div>
                    <div class="form-group">
                        <input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
                        <p class="help-block text-danger"></p>
                    </div>
                    <div class="form-group">
                        <textarea rows="6" class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
                        <p class="help-block text-danger"></p>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="col-lg-12 text-center">
                    <div id="success"></div>
                    <button type="submit" class="btn btn-xl">Send Message</button>
                </div>
            </div>
        </form>
    </div>
</div>

Answer 3

Answer №2

To resolve the issue, I made a simple fix using a BootStrap "helper class" and one Bootstrap class edit.

Firstly, I removed an extra row and changed the "col-md-6" to "col-md-12" to occupy the entire width of the container. To adjust for size, I added a max-width to the "form-group" class and applied the Bootstrap helper class "center-block" to all three "form-group" classes.

This temporary solution addresses the problem. Although it remains uncertain if using paragraph tags within a form will function correctly, that is not the primary concern at this time.

For further assistance and demonstration, you can view the FIDDLE HERE.

<div class="container">
 <div class="row">
   <form name="sentMessage" id="contactForm" novalidate>
    <div class="col-md-12">
      <div class="form-group center-block">
        <input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
         <p class="help-block text-danger"></p>
      </div>
      <div class="form-group center-block">
        <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
        <p class="help-block text-danger"></p>
      </div>
      <div class="form-group center-block">
        <input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
        <p class="help-block text-danger"></p>
      </div>
      <div class="form-group center-block">
        <textarea rows="6" class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
        <p class="help-block text-danger"></p>
      </div>
    </div>

    <div class="clearfix"></div>
    <div class="col-lg-12 text-center">
      <div id="success"></div>
      <button type="submit" class="btn btn-xl">Send Message</button>
    </div>
  </div>
</form>

</div>

In addition to the code adjustments, I implemented a CSS class edit:

.form-group {
 max-width: 300px;
}

If you prefer not to override a Bootstrap class, you have the option to create your own class, like so:

<div class="form-group center-block myclassname">
  <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
      <p class="help-block text-danger"></p>
</div>

You can then define the CSS properties in your external stylesheet:

.myclassname {
   max-width: 300px;
}

Both approaches are suitable for resolving the issue accordingly.

Answer 4

To resolve the issue, I made a simple fix using a BootStrap "helper class" and one Bootstrap class edit.

Firstly, I removed an extra row and changed the "col-md-6" to "col-md-12" to occupy the entire width of the container. To adjust for size, I added a max-width to the "form-group" class and applied the Bootstrap helper class "center-block" to all three "form-group" classes.

This temporary solution addresses the problem. Although it remains uncertain if using paragraph tags within a form will function correctly, that is not the primary concern at this time.

For further assistance and demonstration, you can view the FIDDLE HERE.

<div class="container">
 <div class="row">
   <form name="sentMessage" id="contactForm" novalidate>
    <div class="col-md-12">
      <div class="form-group center-block">
        <input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
         <p class="help-block text-danger"></p>
      </div>
      <div class="form-group center-block">
        <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
        <p class="help-block text-danger"></p>
      </div>
      <div class="form-group center-block">
        <input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
        <p class="help-block text-danger"></p>
      </div>
      <div class="form-group center-block">
        <textarea rows="6" class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
        <p class="help-block text-danger"></p>
      </div>
    </div>

    <div class="clearfix"></div>
    <div class="col-lg-12 text-center">
      <div id="success"></div>
      <button type="submit" class="btn btn-xl">Send Message</button>
    </div>
  </div>
</form>

</div>

In addition to the code adjustments, I implemented a CSS class edit:

.form-group {
 max-width: 300px;
}

If you prefer not to override a Bootstrap class, you have the option to create your own class, like so:

<div class="form-group center-block myclassname">
  <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
      <p class="help-block text-danger"></p>
</div>

You can then define the CSS properties in your external stylesheet:

.myclassname {
   max-width: 300px;
}

Both approaches are suitable for resolving the issue accordingly.

Center a form using Bootstrap

Answer №1

Answer №2

Similar questions

JavaScript code that deletes text from a document - Script eradication

The dropdown menu failed to display properly as intended

The submission feature for the textarea in Javascript is not functioning properly

Building an HTML Form for Requests

What is the best way to utilize a color picker to apply CSS color to a parent element?

What is the best way to apply a png overlay to each img tag when hovered over?

Utilizing inappropriate HTML attributes

Acquiring the content of elements contained within a div container

Utilize the ng-controller directive with unique aliases across various sections of HTML code

A technique for postponing the addition of a class to a div

Template for PHP website including code

Tips for customizing the transparency of a Bootstrap dropdown menu

Horizontal Screen Sharing on iPad

Guide on extracting the ID within a for loop and incorporating it into a Vue.js function

Trouble with integrating HTML5 canvas from an external JavaScript file

Having trouble getting my <a> tags to function properly on my GitHub webpage, even though they work perfectly fine on Codepen

Choose all of the IDs from various sections using Jquery

Color of Bootstrap tooltip arrow outline and fill

The word-break CSS property is ineffective in this situation

Button background must be grayscale, while the text should remain unaffected