CODEWITHSUNDEEP
csstwitter-bootstrap
nadavelyashiv
nadavelyashiv

Reputation: 309

Bootstrap - spacing between form-inline elements

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.

Upvotes: 8

Views: 12722

Answers (3)

DaniP
DaniP

Reputation: 38262

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;
}

Upvotes: 13

Onix
Onix

Reputation: 2179

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

Upvotes: 2

Andy Taylor
Andy Taylor

Reputation: 102

You can see on the developer tools where the spacing comes from.

.form-group {
    margin-bottom: 15px;
}

Upvotes: -1

Related Questions