CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
MK-DK
MK-DK

Reputation: 1085

Bootstrap panel on top of image

I am working with Bootstrap 3 and need to make a banner inspired of this page.

I have made this until now: Codepen.

The picture is not responsive. I can make the picture responsive if i add the class img-responsive to the img src tag, but then this happens.

How can I make the picture responsive, and make the box float on top of the picture on all screensizes?

 <div class="container">
    <div class="row">
     <!-- Picture Column -->
     <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
        <div>
            <img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" ></img>
         </div>
     </div>
     <!-- Contact Column-->
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 pull-right-sm" style="padding-top: 80px;">
        <div>
            <div class="panel panel-default">
             <div class="panel-heading">Contact</div>
             <div class="panel-body">Here is the contact information gonna be. There will be a telephone number, open/closing times and an e-mail.</div>
            </div>
        </div>
     </div>
  </div><!--/row-->
</div><!--/container-->

Upvotes: 1

Views: 1357

Answers (2)

Nandita Sharma
Nandita Sharma

Reputation: 13417

Added a new relative (container for image) and absolute(container for panel) div div and removed unnecessary classes.

 
.abc {
  position: relative;
}
.def {
  position: absolute;
  top: 30px;
  right: 20px;
  max-width: 300px;
}
<head>
   <title>Bootstrap Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
  <div class="row">
     <!-- Picture Column -->
     <div class="col-sm-12">
        <div class="abc">
           <img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" ></img>
           <div class="def">
              <div class="panel panel-default">
                 <div class="panel-heading">Contact</div>
                 <div class="panel-body">Here is the contact information gonna be. There will be a telephone number, open/closing times and an e-mail.</div>
              </div>
           </div>
        </div>
     </div>
     <!-- Contact Column-->
  </div>
  <!--/row-->
   </div>
   <!--/container-->
</body>

 
.abc {
  position: relative;
}
.def {
  position: absolute;
  top: 10px;
  right: 20px;
  max-width: 300px;
}

@media screen and (max-width: 480px) {
.def {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 480px;
    width: 95%;
    height: 85%;
}
.panel.panel-default .panel-heading { 
padding: 5px 15px;
}
.panel.panel-default .panel-body {
  padding: 5px;
}
img.img-responsive {
  height: 200px;
}

}
<head>
   <title>Bootstrap Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
  <div class="row">
 <!-- Picture Column -->
 <div class="col-sm-12">
<div class="abc">
   <img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" />
   <div class="def">
      <div class="panel panel-default">
         <div class="panel-heading">Contact</div>
         <div class="panel-body">Here is the contact information gonna be. There will be a telephone number, open/closing times and an e-mail.</div>
      </div>
   </div>
</div>
 </div>
 <!-- Contact Column-->
  </div>
  <!--/row-->
   </div>
   <!--/container-->
</body>

Upvotes: 1

Parth Shah
Parth Shah

Reputation: 411

add this css to your div "col-lg-3 col-md-3 col-sm-4 col-xs-12 pull-right-sm"

padding-top: 40px;
position: absolute;
top: 0;
right: 5%;

and place it like this

 <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
    <div>
        <img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" ></img>
     </div>
     <!-- Contact Column-->
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 pull-right-sm" style="padding-top: 80px;">
        <div>
            <div class="panel panel-default">
             <div class="panel-heading">Contact</div>
             <div class="panel-body">Here is the contact information gonna be. There will be a telephone number, open/closing times and an e-mail.</div>
            </div>
        </div>
     </div>
 </div>

Upvotes: 0

Related Questions