Bootstrap grid inside re-sizable panels - html

Question

I'm adding some new content to an old page that uses the Dojo library to create 2 panels, with a spacer in between that can be dragged left/right to expand/contract the panels. Think of it like a code editor with a split view between 2 files.
I was trying to put a form in one of the panels, and have it such that the form elements and labels stack when the panel gets small enough:
<form>
<div class="container">
<div class="form-group">
<div class="row">
<div class="col-md-1">
<label for="ID">Identifier</label>
</div>
<div class="col-md-5">
<select name="ID" id="ID">
<option value="1">1</option>
</select>
</div>
<div class="col-md-1">
<label for="Direction">Direction</label>
</div>
<div class="col-md-5">
<select name="Direction" id="Direction">
<option value="ASCENDING">ASCENDING</option>
<option value="DESCENDING">DESCENDING</option>
</select>
</div>
</div>
</div>
</div>
</form>
I noticed however that when resizing the panels, the grid behaviour wouldn't apply. It only applied when I actually resized the entire window.
Does bootstrap only use the size of the window for its grid, or can it be made such that it responds to a dynamically changing size of its parent component?

Answer 1

Yes, bootstap's grid system of 12 columns is based on the device or viewport size (i.e. Window size, or the visible page area inside window).
Here is for your reference
.col-xs- : Extra small devices Phones (<768px)
.col-sm- : Small devices Tablets (≥768px)
.col-md- : Medium devices Desktops (≥992px)
.col-lg- : Large devices Desktops (≥1200px)
if you are using v.3, here is the doc to refer link