Bootstrap stacking inputs on div resize

Question

I would like to know how to use Bootstrap responsive columns when resizing a containing div, and not just the viewport size.

I would like the inputs inside the form to stack side by side as I make the modal wider.

Html :

<button>open
</button>
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog" id="pesquisa_modal" style="pointer-events: none">
    <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header bg-primary text-white" id="header" style="cursor: move">
            Modal
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
          <form>
            <div class="form-row">
              <div class="form-group col-auto">
                <label for="Form1">Form1</label>
                <input type="text" class="form-control" id="Form1">
              </div>
              <div class="form-group col-auto">
                <label for="Form2">Form2</label>
                <input type="text" class="form-control" id="Form2" >
              </div>
              <div class="form-group col-auto">
                <label for="Form3">Form3</label>
                <input type="text" class="form-control" id="Form3">
              </div>
              <div class="form-group col-auto">
                <label for="Form4">Form4</label>
                <input type="text" class="form-control" id="Form4">
              </div>
            </div>
         </form>
        </div>
    </div>
</div>

Fiddle : https://jsfiddle.net/p204kwjz/6/

Can I make the inputs continue to stack horizontally as I enlarge the containing div? The problem is that that the inputs are not "fluid" when I enlarge the div wide enough to fit them all in a row. Also, when the containing div is too small they overflow the div horizontally.

The context here is that the forms will be created dynamically, so I need some kind of smart layouting.

Answer 1

If you want your columns to take up the full width (stack horizontally) in bootstrap use col-md-12 on your form and wrap it in a div with class form-row. Basically bootstrap assumes each row is composed of 12 columns.

<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog" id="pesquisa_modal" style="pointer-events: none">
    <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header bg-primary text-white" id="header" style="cursor: move">
            Modal
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
          <form>
            <div class="form-row">
              <div class="form-group col-md-12">
                <label for="Form1">Form1</label>
                <input type="text" class="form-control" id="Form1">
              </div>
              </div>
              <div class="form-row">              
              <div class="form-group col-md-12">
                <label for="Form2">Form2</label>
                <input type="text" class="form-control" id="Form2" >
              </div>
              </div>
              <div class="form-row">              
              <div class="form-group col-md-12">
                <label for="Form3">Form3</label>
                <input type="text" class="form-control" id="Form3">
              </div>
              </div>
              <div class="form-row">              
              <div class="form-group col-md-12">
                <label for="Form4">Form4</label>
                <input type="text" class="form-control" id="Form4">
              </div>
            </div>
         </form>
        </div>
    </div>
</div>

Here is a fiddle.