Need help with layout on Bootstrap page
Hi, I have it working pretty much as I like here:
http://dev2.magickitchen.com/cartv7.html
But I need to add other elements, like this, except not exactly like this:
http://dev2.magickitchen.com/cartv8.html
attached is how I want this to look, and I'm having a lot of trouble. Thanks for any help.
http://dev2.magickitchen.com/cartv7.html
But I need to add other elements, like this, except not exactly like this:
http://dev2.magickitchen.com/cartv8.html
attached is how I want this to look, and I'm having a lot of trouble. Thanks for any help.
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Try this layout (includes the main div class="row", not the page header)
<div class="row">
<div class=" col-lg-12 col-md-12 col-xs-12">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-12">
<button type="button" style="background-color:#b05ccf; color:#FFF; float:left;" class="btn btn-sm btn-block">
<span class="glyphicon glyphicon-circle-arrow-left"></span> Continue shopping
</button>
</div>
</div>
</div>
</div>
<div class="panel-body">
<div class="row hidden-xs hidden-sm">
<div class="col-xs-4">
Product name
</div>
<div class="col-xs-8">
<div class="col-xs-3">
Price
</div>
<div class="col-xs-3">
Quantity
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-4">
Update
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-xs-offset-1">
Delete
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<h6 class="product-name"><strong>Bad Boy Shrimp Burrito </strong></h6>
</div>
<div class="col-xs-8">
<div class="col-lg-3 col-md-3 col-xs-5">
<h6><strong>$12.00 </strong></h6>
</div>
<div class="col-lg-3 col-md-3 col-xs-5">
<select class="selectpicker">
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-3">
<button type="button" class="btn btn-link btn-xs">
Update</span>
</button>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-xs-offset-1">
<button type="button" class="btn btn-link btn-xs">
<span class="glyphicon glyphicon-trash"> </span>
</button>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<h6 class="product-name"><strong>Beef Pot Roast with Mushroom Gravy, Family Size </strong></h6>
</div>
<div class="col-xs-8">
<div class="col-lg-3 col-md-3 col-xs-5">
<h6><strong>$12.00 </strong></h6>
</div>
<div class="col-lg-3 col-md-3 col-xs-5">
<select class="selectpicker">
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-3">
<button type="button" class="btn btn-link btn-xs">
Update</span>
</button>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-xs-offset-1">
<button type="button" class="btn btn-link btn-xs">
<span class="glyphicon glyphicon-trash"> </span>
</button>
</div>
</div>
</div>
<hr>
<div class="panel-footer">
<div class="row text-center">
<div class="col-md-6 col-xs-12">
<div class="offers">
<div class="col-xs-12">
<label><img src="images/getCetificate.jpg" /></label>
<div class="hidden-sm hidden-lg "></div>
<input name="" type="text" />
<div class="hidden-sm hidden-md hidden-lg "></div>
<input name="" type="submit" class="cartBtn yllw enter" value="Enter" /><input name="" type="submit" class="cartBtn" value="Remove" />
</div>
</div>
<div class="offers">
<div class="col-xs-12">
<label><img src="images/promocode.jpg" /></label>
<div class="hidden-sm hidden-lg "></div>
<input name="" type="text" />
<div class="hidden-sm hidden-md hidden-lg "></div>
<input name="" type="submit" class="cartBtn yllw enter" value="Enter"><input name="" type="submit" class="cartBtn" value="Remove" />
</div>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="expectedDelivery">
<h5><strong>Expected Delivery Date:</strong></h5>
<ul>
<li class="clearfix"><input name="" type="radio" value="">Sat May 16 - Priority_Overnight ($138.34)</li>
<li class="clearfix"><input name="" type="radio" value="">Tue May 19 - STD OVERNIGHT ($119.54)</li>
<li class="clearfix"><input name="" type="radio" value="">Wed May 20 - 2 DAY AIR ($95.71)</li>
<li class="clearfix active"><input name="" type="radio" value="">Thu May 21 - FEDEX GROUND ($31.02)</li>
</ul>
</div>
<p>[Next Shipping Day : <strong>TODAY (6hr 10min left)</strong>]</p>
<div class="alterDate">Pick New Date: <input type="text" id="datepicker" size="10" /></div>
</div>
<div class="col-md-2 col-xs-12">
<div class="additionalText">
<div class="col-xs-9 col-md-10 col-lg-11">
<h5 class="text-right">SubTotal <strong>$24.00</strong></h5>
</div>
<div class="col-xs-9 col-md-10 col-lg-11">
<h5 class="text-right">Shipping <strong>$20.00</strong></h5>
</div>
<div class="col-xs-9 col-md-10 col-lg-11">
<h5 class="text-right">Total <strong>$44.00</strong></h5>
</div>
<div class="col-xs-9 col-md-12" style="padding-right:0px;margin-top:20px;">
<a style="background-color:#770098; color:#FF8800; font-weight:bold; float:right;width:130px;" type="button" class="btn btn-block">
Checkout
</a>
<a style="background-color:#770098; color:#FFFFFF; font-weight:bold; float:right;width:130px;" type="button" class="btn btn-block">
Clear Cart
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Premium Content
You need an Expert Office subscription to comment.Start Free Trial