Bootstrap form spacing is off

bootstrap button
bootstrap grid
bootstrap 3 input-group
bootstrap form validation
bootstrap form design
bootstrap input width
bootstrap 4 form validation
bootstrap contact form

I am using bootstrap form elements and I want to center all the form elements in the middle. I've tried adding margin: 0 auto !important to the form-control class, but there are still issues with padding/margins. The input fields still have uneven left and right padding/margins. Plus, the text area and button are stuck to the left. Keeping responsive design in mind, what is the best way to approach this problem?

HTML:

   <form class="form">
        <h4 class="form-contactme">Contact Me</h4>
        <div class="form-row">
           <div class="form-group col-sm-6">
              <label for="firstName" class="form-inputlabel">First Name</label>
              <input type="text" class="form-control" id="firstName" placeholder="First Name">
           </div>
           <div class="form-group col-sm-6">
              <label for="lastName" class="form-inputlabel">Last Name</label>
              <input type="text" class="form-control" id="lastName" placeholder="Last Name">
           </div>
        </div>
        <div class="form-row">
           <div class="form-group col-sm-6">
              <label for="email" class="form-inputlabel">Email</label>
              <input type="email" class="form-control" id="email" placeholder="you@example.com">
           </div>
           <div class="form-group col-sm-6">
              <label for="phone" class="form-inputlabel">Phone</label>
              <input type="number" class="form-control" id="phone" placeholder="xxx-xxx-xxxx">
           </div>
        <div class="form-row">
           <div class="form-group">
              <label for="messageBox">Send me a message <i class="far fa-smile-beam"></i></label>
              <textarea type="text" class="form-control" id="messageBox"></textarea>
           </div>
        </div>
        <div class="form-row">
              <button type="submit" class="btn btn-primary">Submit</button>
        </div>
  </form>

Scss:

.form{
padding:3% !important;
background-color:#9fd199;
margin-bottom:5%;
&-contactme{
    font-size:1.8rem;
    font-weight:900;
    text-align:center;
    margin-bottom:15%;
}
&-row{
    width:100%;
}
&-inputlabel{
    display:none;
}
&-control{
    margin-left:0 auto !important;
}

}

It's because of default padding and margin of the form classes.

You have to remove the default paddings and margins in order to center the elements and aligned in a same line.

Add the following lines in you css

.form-group, .form-row > .col, .form-row > [class*="col-"] {
  padding-left:0; 
  padding-right:0;
}
.form-row{
  margin:0;
}

A working codepen link: https://codepen.io/Ev1tw1n/pen/xmdjeL

Top 10 Bootstrap 4 Answers - WDstack, 4 includes a no-gutters class that can be applied to the entire row . bootstrap form-group spacing. Ask Question Asked 6 years, Twitter Bootstrap Form File Element Upload Button. 1148. Center a column using Twitter Bootstrap 3. 712.

You missed a closing div. Now check

<form class="form">
            <h4 class="form-contactme">Contact Me</h4>
            <div class="form-row">
               <div class="form-group col-sm-6">
                  <label for="firstName" class="form-inputlabel">First Name</label>
                  <input type="text" class="form-control" id="firstName" placeholder="First Name">
               </div>
               <div class="form-group col-sm-6">
                  <label for="lastName" class="form-inputlabel">Last Name</label>
                  <input type="text" class="form-control" id="lastName" placeholder="Last Name">
               </div>
            </div>
            <div class="form-row">
               <div class="form-group col-sm-6">
                  <label for="email" class="form-inputlabel">Email</label>
                  <input type="email" class="form-control" id="email" placeholder="you@example.com">
               </div>
               <div class="form-group col-sm-6">
                  <label for="phone" class="form-inputlabel">Phone</label>
                  <input type="number" class="form-control" id="phone" placeholder="xxx-xxx-xxxx">
               </div>
            </div> 
            <div class="form-row">
               <div class="form-group">
                  <label for="messageBox">Send me a message <i class="far fa-smile-beam"></i></label>
                  <textarea type="text" class="form-control" id="messageBox"></textarea>
               </div>
            </div>
            <div class="form-row">
                  <button type="submit" class="btn btn-primary">Submit</button>
            </div>
      </form>

Remove padding from columns in Bootstrap 3, 4 has added . no-gutters class. If you want to only target the child columns you can use the child selector (Thanks John Wu). Spacing. Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance. How it works. Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and

Add display flex to the container, then you can align all the items to the center using align-items: center

.form-group, .form-row {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form {
  padding: 3% !important;
  background-color: #9fd199;
  margin-bottom: 5%;
}

.form-group,
.form-row {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-contactme {
  font-size: 1.8rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 15%;
}

.form-row {
  width: 100%;
}

.form-inputlabel {
  display: none;
}

.form-control {
  margin-left: 0 auto !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<form class="form">
  <h4 class="form-contactme">Contact Me</h4>
  <div class="form-row">
    <div class="form-group col-sm-6">
      <label for="firstName" class="form-inputlabel">First Name</label>
      <input type="text" class="form-control" id="firstName" placeholder="First Name">
    </div>
    <div class="form-group col-sm-6">
      <label for="lastName" class="form-inputlabel">Last Name</label>
      <input type="text" class="form-control" id="lastName" placeholder="Last Name">
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-sm-6">
      <label for="email" class="form-inputlabel">Email</label>
      <input type="email" class="form-control" id="email" placeholder="you@example.com">
    </div>
    <div class="form-group col-sm-6">
      <label for="phone" class="form-inputlabel">Phone</label>
      <input type="number" class="form-control" id="phone" placeholder="xxx-xxx-xxxx">
    </div>
    <div class="form-row">
      <div class="form-group">
        <label for="messageBox">Send me a message <i class="far fa-smile-beam"></i></label>
        <textarea type="text" class="form-control" id="messageBox"></textarea>
      </div>
    </div>
    <div class="form-row">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Bootstrap 4 Utilities, How do you put a space between two rows in bootstrap? Bootstrap has many facility of classes to easily style elements in HTML. It include a various responsive padding and margin classes for modification of the appearance of element. Spacing utilities have no breakpoints symbols to apply to the breakpoints. Following Syntax are used in the Various Classes for adding spacing:

Twitter Bootstrap - add top space between rows, Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance. Spacing Bootstrap spacing. Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance. You can easily assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. They include support for individual properties, all

Forms · Bootstrap, We'll go over the basics of Bootstrap form types here. Bootstrap also supplies preformatted form elements that you can easily swap in or out of your Using form-group classes in your form will automatically add spacing for  Bootstrap Add Space Between Rows | Margin Example. For Bootstrap version > 4 you can use the spacer class mt-n, where n can be 1 or 2. Here is simple example-

Spacing · Bootstrap, Bootstrap forms support the following form controls: input, textarea, button, Read-only inputs appear lighter (just like disabled inputs), but retain the the default form field styling and preserve the right margin and padding. The spacing classes in Bootstrap 4 The margin property adds spacing between the elements while CSS padding between the content and container boundary. The Bootstrap 4 has built-in utility responsive classes for margin and padding that you may use easily in various elements to manage the spacing.

Comments
  • Thank you! I forgot that bootstrap .row and .col classes have preset padding and margins
  • Happy to help you anytime :)
  • How's that answer your question? It doesn't center the textarea and the submit button...