Sunday, 8 September 2013

Creating a shopping cart page for multiple devices with Bootstrap 3.0

Creating a shopping cart page for multiple devices with Bootstrap 3.0

I was hoping that somebody with much better Bootstrap skills than me can
look at the following html and perhaps help me get the input field which
is located on the far right to make it flush with the upper division.
(This only happens when using xsmall columns)
The html basically allows me to display a shopping cart in multiple
devices the way I'm looking for however, It seems like an awful lot of
code.
Here is a picture of the result in three different screens: click here
If someone can take a look and perhaps reduce the current html by perhaps
cleaning anything not needed.
<div class="row show-grid">
<div class="col-sm-12 visible-xs">subtotal
</div>
<div class="col-sm-12 visible-xs">checkout</div>
</div>
<div class="row show-grid">
<div class="col-md-9 col-sm-12">
<div class="col-md-6 col-sm-6 col-xs-10">heading</div>
<div class="col-md-2 col-sm-2 hidden-xs">unit</div>
<div class="col-md-2 col-sm-2 col-xs-2">qty</div>
<div class="col-md-2 col-sm-2 hidden-xs">total</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-3"><img
src="images/women/71pBCLRtOlL.jpg" width="62" height="80"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-7
col-xs-offset-3">Item Name</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-7
col-xs-offset-3">$318.40</div>
<div class="col-lg-2 col-md-2 col-sm-2 pull-right
hidden-xs">$636.80</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> <input
type="number" value="2"> </div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-7 col-xs-offset-3">
<ul><li>small</li><li>black</li></ul></div>
<div class="col-lg-2 col-md-2 col-md-offset-0 col-sm-2
col-sm-offset-0 col-xs-2"> <button type="button" class="btn
btn-default btn-xs">Update</button> </div>
<div class="col-lg-2 col-lg-offset-0 col-md-2 col-md-offset-0
col-sm-2 col-sm-offset-0 "></div>
<div class="col-lg-2 col-lg-offset-0 col-md-2 col-md-offset-0
col-sm-2 col-sm-offset-0 "></div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-3 visible-xs"></div>
<div class="col-lg-2 col-lg-offset-0 col-md-2 col-md-offset-0
col-sm-2 col-sm-offset-0 col-xs-3"> <button type="button"
class="btn btn-default btn-xs">Delete</button> </div>
<div class="col-xs-4 visible-xs"></div>
<div class="clearfix visible-sm visible-xs"></div>
<div class="col-md-5 col-md-offset-7 col-sm-5 col-sm-offset-7
col-xs-12 text-right"> subtotal </div>
</div>
<div class="clearfix visible-sm visible-xs"></div>
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="col-md-12 col-sm-6 col-xs-6 hidden-xs pull-right">
checkout </div>
<div class="col-md-12 col-sm-6 col-xs-6"> continue shopping </div>
</div>
</div>

No comments:

Post a Comment