Bootstrap - spacing between form-inline elements

Question

In Bootstrap 3, inline forms (http://getbootstrap.com/css/#forms-inline) - I cannot seem to find the reason for the spacing between .form-group classes.

fiddle: https://jsfiddle.net/6ek1oa3s/1/

The reason I'm asking is because on my dev environment I have this spacing, but after I build with gulp, in the deployment version - the spacing is gone.

Answer 1

That space is generated by the property inline-block is compared to treating the elements as text, if you have on your markup each element on a new line this generates a space and each element is a "new word".

Check the Snippet

section {
  background:white;
  margin:20px auto;
}
div {
  display:inline-block;
  height:50px;
  width:30%;
  margin:20px auto;
  background:red;
  border:thin solid orange
}

<section>
  <div></div>
  <div></div>
  <div></div>
</section>

I guess when you build with gulp you minify your html making your html with no spaces between items and then has no space making all elements "one word".

Check the Snippet

section {
  background:white;
  margin:20px auto;
}
div {
  display:inline-block;
  height:50px;
  width:30%;
  margin:20px auto;
  background:red;
  border:thin solid orange
}

<section>
  <div></div><div></div><div></div>
</section>

---

To solve this you can add on your style a margin-right value like:

.form-inline .form-group {
  margin-right:4px;
}

Answer 2

Add margin-right or left to your form-group inside your form