Bootstrap - Spacing Between Form-Inline Elements

Bootstrap - spacing between form-inline elements

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>

No space between the elements in inline form bootstrap (dynamic form)

I think there are a few problems..

1) Just append the form inline, not the container and group.

2) form-inline elements are display: inline-block which means any whitespace in the HTML markup will create a space between elements. Therefore, the original static form looks correct with space. However the dynamically added form has no HTML whitespace between elements because it's generated from a concatenated string array. Update the complex string with a space after each form input.

http://www.codeply.com/go/kVWFHnAjiG

function getHTMLString() {
    var complex_html = [
              '<div class="form-inline">',
                '<select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]">',
                  '<option value=" " disabled selected>primitive</option>',
                  '<option value="sphere">sphere</option>',
                  '<option value="triangle">triangle</option>',
                '</select> ',
                '<input type="number" class="input-small form-control" id="diameter"  name="Diameter[]" step="any" placeholder="diameter(D)"> ',

                '<input type="text" class="input-small form-control"  id="sphere-position" name="SpherePosition[]"  placeholder="(x, y, z)"> ',

                '<select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]">',
                  '<option value=" " disabled selected>color</option>',
                  '<option value="red">red</option>',
                  '<option value="blue">blue</option>',
                  '<option value="green">green</option>',
                  '<option value="yellow">yellow</option>',    
                '</select> ', 
                '<button type="button" class="btn btn-success btn-add" id="remove_more"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>',
                '</button>',  
            '</div>',
    ].join('');
    return complex_html;
}

Also note: The dynamically built HTML is invalid becuse there are multple elements with the same ID attribute.

Bootstrap form spacing issues with form-inline and form-group?

.form-group has margin-bottom: 15px; defined, but if the .form-group element is defined inside the .form-inline, it has no margin applied.

Demonstration:

<div class="form-group"></div> <!-- margin-bottom: 15px -->

<div class="form-inline">
  <div class="form-group"></div> <!-- margin-bottom: 0 -->
</div>

So use .form-group inside .form-inline

<div class="form-inline">
  <div class="form-group"></div>
</div>

Hope this helps!

Twitter Bootstrap inline form spacing

You can try with margin to all direct childrens of .form-inline:

.form-inline > * {
   margin:5px 3px;
}

View this fiddle http://jsfiddle.net/MFKBj/10/

PD: I only add !important in the fiddle to make me sure it's over the bootstrap CSS you don't need this.

Where does Bootstrap inline form gap between label and input element come from?

This space is coming from inline-block property, it's adding some space between elements which is inlined by default,

See This Example with no libraries added

 div {       display: inline-block;      font-size: 2rem;    }    div:nth-child(odd) {       background-color: lightblue    }    div:nth-child(even) {       background-color: lightcoral;    }

    <div>abc</div>    <div>abc</div>    <div>abc</div>    <div>abc</div>

Reduce spacing between bootstrap horizontal form controls

I solved it by adding

label {
margin-bottom: 0;
}

It works fine now.

Bootstrap form-group elements spacing

Basic overview of Bootstrap is very important for this. col-xs-2 is getting the horizontal space of 1/12, and that's going to be fix untill you change the main .css files of bootstrap. But, that is not recommended.

Solution: Remove the text-right.

---

Related Topics