Bootstrap v3.1 - Side by side input panels in IE8

Question

Hello I am familiar with Bootstrap, but not very experienced with it. I am using it to create a static form, but I can't seem to get these panels to sit side by side with the "col-md-6" class tag inside of the rows.

I've been trying to read the Bootstrap documentation as well as look at other examples, but so far no luck. I've been spinning my wheels modifying classes, changing divs, adding divs, and just having no luck what so ever.

Below is the code I have extracted from my form which is the probelmatic area.

<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>

Now I have had form tags in here and tried form-inline as well as form-horizontal, but I am basically trying to have each panel sit side by side with one another. I also seem to be having an issue with the "Other" label appearing after the input box.

Fiddle for good measure : Fiddle

*There is probably a better way for me to position the elements on the next line as opposed to the break lines that I used, but like I said, I am new to Bootstrap and will only learn by doing. I assumed using the "row" would stack them vertically.

Answer 1

I had a quick fiddle with it. I think you should be able to use this to work with.

JSFiddle here

Note: I used

form-group

and tidied up the col's to help layout the form elements.