I am trying to get a vertical tab menu using bootstrap. I would like to get the background for the tabs so that it differs from the contents of the tab on the right. When I try to use the background color for navigation, the tabs look incompatible with the background color of the navigation
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div id="TABBEDLOCATEPANEL" ng-show="locate.toggleCheck()" class="container"> <div id=locatePanel class="row"> <div class="col-md-4 col-sm-3"> <div class="tabs-left"> <ul id=locateTabs class="nav form-tabs nav-pills nav-stacked"> <li class="active" title="Locate By Address"><a data-toggle="pill" href="#locateTab1" target='_self'><img src="images/Address.png" height="30" width="30"></img></a></li> <li title="Locate By Existing Record"><a data-toggle="pill" href="#locateTab2" target='_self'><img src="images/entity.png" height="30" width="30"></img></a></li> <li title="Locate By Coordinate"><a data-toggle="pill" href="#locateTab3" target='_self'><img src="images/coordinator.png" height="30" width="30"></img></a></li> <li title="Geography" ng-show="locate.getJSON().geographyTab" ng-click="locate.showGeographyData();"><a data-toggle="pill" href="#locateTab4" target='_self'><img src="images/geography.png" height="30" width="30"></img></a></li> <li title="Results" id="ltab5" ng-show="locate.resultsTab"><a data-toggle="pill" href="#locateTab5" target='_self'><img src="images/Result.png" height="30" width="30"></img></a></li> </ul> <div class="tab-content"> <div id="locateTab1" class="tab-pane active"> <table id=locateAddress style="border-collapse: separate; border-spacing: 5px;"> <div class="field-container"> <input type='text' class="field" name=locatebyaddress_address ng-model="locate.locatebyaddress_address" required placeholder="Address" init-from-form> <label class="floating-label">Address:</label> <div class="field-underline"></div> </div> <div class="field-container"> <input type='text' class="field" name=locatebyaddress_city ng-model="locate.locatebyaddress_city" required placeholder="City" init-from-form> <label class="floating-label">City:</label> <div class="field-underline"></div> </div> <div class="field-container"> <input type='text' class="field" name=locatebyaddress_state ng-model="locate.locatebyaddress_state" required placeholder="State" init-from-form> <label class="floating-label">State:</label> <div class="field-underline"></div> </div> <div class="field-container"> <input type='text' class="field" name=locatebyaddress_zip ng-model="locate.locatebyaddress_zip" required placeholder="Zip" init-from-form> <label class="floating-label">Zip:</label> <div class="field-underline"></div> </div> <div class="field-container"> <input type='text' class="field" name=locatebyaddress_longitude disabled=disabled ng-model="locate.locatebyaddress_longitude" required placeholder="Longitude" init-from-form> <label class="floating-label">Longitude:</label> <div class="field-underline"></div> </div> <div class="field-container"> <input type='text' class="field" name=locatebyaddress_latitude disabled=disabled ng-model="locate.locatebyaddress_latitude" required placeholder="Latitude" init-from-form> <label class="floating-label">Latitude:</label> <div class="field-underline"></div> </div> </table> <br> <input type=submit value=Find id=locateByAddress ng-click="locate.locateByAddress();"></input> <input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation></input> <input type=reset value=Cancel ng-click="locate.destroyLocatePanel();" id=cancelLocate></input> </div> <div id="locateTab2" class="tab-pane"> <table id=locateRecord style="border-collapse: separate; border-spacing: 5px;"> <tr> <td>Entity Type</td> <td> <select id=locateEntityType ng-change="locate.entityChanged();" ng-model="locate.entityType"> <option></option> <option ng-repeat="(key, value) in locate.getJSON().dropdown" value="{{key}}">{{ value }}</option> </select> </td> </tr> <tr><td>Record Number</td><td><input id=recordNumberExistingRecord ng-model="locate.recordNumber" type=text name=recordNumber></td></tr> </table> <br> <input type=submit value=Find id=locateByExistingRecord ng-click="locate.getLocationByEntity();"></input> <input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation></input> <input type=reset value=Cancel ng-click="locate.destroyLocatePanel();" id=cancelLocate></input> </div> <div id="locateTab3" class="tab-pane"> <table id=locateCoordinates style="border-collapse: separate; border-spacing: 5px;"> <tr><td>Longitude</td><td><input type=text ng-model=locate.locateByCoordinatelongitude></td></tr> <tr><td>Latitude</td><td><input type=text ng-model=locate.locateByCoordinatelatitude></td></tr> <tr><td></td><td><input type=button ng-click="locate.pickCoordinate();" id=coordinatePick name=locatePick value=PICK></td></tr> </table> <br> <input type=submit value=Find id=locateByCoordinate ng-click="locate.locateByCoordinate();"></input> <input type=button ng-click="locate.zoomToLocation();" ng-disabled="locate.entityDisabledCheck" ng-class="{'disabledButton':locate.isDisabledActive}" value="Zoom" id=zoomtolocation></input> <input type=reset value=Cancel ng-click="locate.destroyLocatePanel();" id=cancelLocate></input> <input type=button ng-click="locate.streetView();" ng-show="locate.streetViewCheck" value="Street View" id=streetView></input> </div> <div id="locateTab4" class="tab-pane" ng-show="locate.getJSON().geographyTab"> <div ng-html-compile="locate.getGeographyHTML()" | trust></div> </div> <div id="locateTab5" class="tab-pane" ng-show="locate.resultsTab"> <ul class="listAddress"> <li ng-repeat="list in locate.addressList" ng-click="locate.addressListClick($index);"> {{ list.formatted_address }} </li> </ul> </div> </div> </div> </div> </div> </div>
When I want the text box to be on the side of these tabs, but for some reason they keep going below the tabs. How can I fix this.
html css twitter-bootstrap
SNT
source share