CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapuser-interface
Sourajit
Sourajit

Reputation: 193

Adjust position of panels in bootstrap

I am told to make a shopping cart website using bootstrap with the images of products positioned in two rows and with three panels in each row
Although here i have coded for only one panel with the image within it,the main problem that I am facing is to adjust the position of panel which is always appearing on the top of the page.
I tried to enclose it in a div with id posi and then tried to position it using but it didn't work so please help.Further the image is appearing too big so what is the best method to re-size it so that the image responsiveness remains intact.I also have another question which is written in my code snippet(as a comment) if anybody knows the answer of that kindly help. 

<!DOCTYPE HTML>
<html>
	<head>
		<title>
		Web page
		</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		<style>
			#posi
			{
				position=absolute;
				top=100px;
				right=50px;
			}
		</style>
	</head>
	<body>
	<div id="posi">
	<div class="container">
		<div class="row" >
			<div class="col-md-3 col-md-6" ><!--Although I have used this col-md-3 col-md-6 but I also want to know 
			what happens when we specify two column definitions in a single class like this-->
				<div class="panel panel-default" >
					<div class="panel-heading panel-primary">
						Iphone 6
					</div>
					<div class="panel-body">
						<img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923" class="img-responsive" />
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
</body>
</html>

Upvotes: 0

Views: 2452

Answers (1)

vanburen
vanburen

Reputation: 21663

You need to set the position for top to take effect.

body,
html {
  background: grey;
}
#wrapper {
  top: 100px;
  right: 50px;
  position: absolute;
  background: lightblue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading panel-primary">Iphone 6</div>
          <div class="panel-body">
            <img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923"
            class="img-responsive" />
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading panel-primary">Iphone 6</div>
          <div class="panel-body">
            <img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923"
            class="img-responsive" />
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading panel-primary">Iphone 6</div>
          <div class="panel-body">
            <img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923"
            class="img-responsive" />
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading panel-primary">Iphone 6</div>
          <div class="panel-body">
            <img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923"
            class="img-responsive" />
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading panel-primary">Iphone 6</div>
          <div class="panel-body">
            <img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923"
            class="img-responsive" />
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading panel-primary">Iphone 6</div>
          <div class="panel-body">
            <img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923"
            class="img-responsive" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions