Need help with layout on Bootstrap page

Melody Scott
Melody Scott used Ask the Experts™
on
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.

cart8-desktop.jpg  cart8-phone.jpg
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2015

Commented:
The links require login credentials.

Author

Commented:
Oh, I am SO sorry! I will take the log in off the site.  Please try now.
Top Expert 2015
Commented:
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&nbsp;<strong>$24.00</strong></h5>
	                      </div>
	                      <div class="col-xs-9 col-md-10 col-lg-11">
		                      <h5 class="text-right">Shipping&nbsp;<strong>$20.00</strong></h5>
	                      </div>
                          <div class="col-xs-9 col-md-10 col-lg-11">
		                      <h5 class="text-right">Total&nbsp;<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>

Open in new window

Author

Commented:
Thanks, I will!

Author

Commented:
It works beautifully, thanks very much!!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial