Bootstrap formatting is not making sense - html

Question

I'm VERY new to boot strap. So I figured I would setup a small "form" to see if I could get it to flow and I did an absolute horrible job. I am trying to get things to group into 2's and no more than 5 text boxes per row even in the largest of settings. When I try to set it properly I get TONS of space between the left and right columns.
I tried setting the header but this wrapped strangely and when I tried doing text boxes I got TONS of space between the two columns
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3>Quick Survey for Professional Research!</h3>
</div>
. I ended up getting something kind of close using
<div class="row">
<div class="input-group text-center">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
But that doesn't seem like its the proper way to handle groups of text boxes and it certainly doesn't get me my grouping that I was looking for. I have set a mockup in jsfiddle from my ASP.net code and it can be found at https://jsfiddle.net/5ckoapng/9/
Any help would be greatly appreciated in understanding what i'm missing here. I'm sure its really stupid but I've spent about 2 hours researching different forms or formatting and couldn't figure this out.

Answer 1

Bootstrap is mobile first - if an element is going to span 12 columns on all resolutions then all you need is the single class:
<div class="container">
<div class="row">
<div class="col-xs-12">
<h3>Quick Survey for Professional Research!</h3>
</div>
</div>
</div>
To show form elements in groups of 2, then you need to nest columns: http://getbootstrap.com/css/#grid-nesting
For example:
<div class="container">
<div class="row">
<div class="col-xs-12">
<form>
<div class="row">
<div class="col-xs-6">
#form input
</div>
<div class="col-xs-6">
#form input
</div>
</div>
</form>
</div>
</div>
</div>
That way there will be 2x 50% (col-xs-6) width columns nested within the main 100% (col-xs-12) column. I have not added form styling or classes, as these are all readily available in the documentation: http://getbootstrap.com/css/#forms
If you wish to use 5 nested columns, then you can utilise the offset class to push 5x col-xs-2 columns over by 1 so they appear to be centred within the main col-xs-12 column: http://getbootstrap.com/css/#grid-offsetting