Although I have some familiarity with Bootstrap, my experience with it is limited. While attempting to create a static form using Bootstrap, I encountered difficulties getting panels to align side by side using the "col-md-6" class within rows.
Despite my efforts to consult Bootstrap documentation and examples, I have been unsuccessful so far. I've spent time modifying classes, altering divs, adding divs, and making various adjustments without success.
Below, I have included the problematic code extracted from my form:
<div class="container">
<div class="form-group col-md-6">
<div class="panel panel-default">
<div class="row col-xs-3">
<label for="strategy" class="control-label">Strategy</label>
<input type="text" class="form-control" id="strategy" placeholder="Strategy" />
</div>
<br/>
<br/>
<br/>
<br/>
<div class="row col-md-6">
<label>Type of Service:</label>
<ul>
<li class="checkbox">
<input type="checkbox" value="" />
Transport
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Storage
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Balancing
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Park/Lend
</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="row col-xs-3">
<label for="internalBusinessUnit" class="control-label">Internal Business Unit</label>
<input type="text" class="form-control" id="internalBusinessUnit" placeholder="Internal Business Unit" />
</div>
<br/>
<br/>
<br/>
<div class="row col-md-6">
<ul>
<li class="checkbox">
<input type="checkbox" value="" />
Hub/Wheel
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Exchange
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Pooling
</li>
<li class="checkbox">
Other:
<input type="checkbox" value="" />
<div class="col-xs-2">
<input type="text" class="form-control" id="other" placeholder="" />
</div>
</li>
</ul>
</div>
</div>
</div>
I have attempted using form tags, form-inline, and form-horizontal, but my main goal is to align each panel side by side. Additionally, I am experiencing issues with the "Other" label appearing after the input box.
For reference, here is a Fiddle: Fiddle
*I acknowledge that there may be a better approach to positioning elements on the next line instead of using break lines, but as a beginner in Bootstrap, I am learning through trial and error. I assumed that using the "row" class would stack the elements vertically.