Jody Stocks Jody Stocks - 15 days ago 5
HTML Question

Bootstrap 3 col-xs and col-md Is not Responding

I am having issues with my Col-xs and my col-md.

So before I continue ill explain my use.
Im Trying to create a user Form where they can enter their details and then enter a quantity for a piece of furniture. The furniture section is within a Tab-Content as there are separate sections within a house.

So id like for col-xs to span 2 columns, a column for label and one for the Quantity input, And then ill slowly increase by 2 columns, so sm will display, label, quantity, label quantity, and so on.

The col-sm and col-lg work Perfectly, but the col-xs and the col-md are not working, Its almost as if they are being skiped. Please help.

This is my code...



<div class="container">

<h3>Houseold Inventory</h3>

<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#lounge" data-toggle="tab">Lounge</a></li>
<li><a href="#dinning" data-toggle="tab">Dinning Room</a></li>
<li><a href="#householdKitchen" data-toggle="tab">Kitchen</a></li>
<li><a href="#bed" data-toggle="tab">Bed Room</a></li>
<li><a href="#study" data-toggle="tab">Study</a></li>
<li><a href="#householdGarden" data-toggle="tab">Garden</a></li>
<li><a href="#domestic" data-toggle="tab">Domestic</a></li>
<li><a href="#householdGarage" data-toggle="tab">Garage</a></li>
<li><a href="#householdGym" data-toggle="tab">Gym Equipment</a></li>
<li><a href="#householdMisc" data-toggle="tab">Miscellaneous</a></li>
<li><a href="#householdBoxes" data-toggle="tab">Boxes</a></li>
<li><a href="#householdExtra" data-toggle="tab">Extras</a></li>
</ul> <!-- nav-tabs END-->

<div class="tab-content">
<div class="tab-pane active" id="lounge">
<h4>Lounge</h4>

<form role="form" class="form-inline">

<div class="row">
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>

</div><!--end row-->
</form>
<div>
</div> <!--tab-content end-->
</div> <!--tabbable end-->
<!-- col-sm-6 END-->

</div>





I am very new to Bootstrap and Web layout, but criticism is welcome.

ps. Please Excuse the Layout issues i cannot figure out why the Code insert is doing this

pps. Check this Similer question For layout example : Unanswered Question

ppss. Here is an image of my Mobile issue....
enter image description here

Answer

I have figured it out.
Some how my Bootstrap css file was not being read correctly, once I installed the NuGet Package, all was good and well, now my xs and md are working perfectly and as expected.

Thanks everyone who helped.