CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Alex Wang
Alex Wang

Reputation: 358

Bootstrap 3.3.7 images overlapping

I currently have images displayed like thisideal result When I reduce the width of the window to about col-md level, I want bootstrap to collapse it into the two puppy images on the first row and the Blue pacman in the second row. Finally, when the window width is that of a smartphone, it should collapse into one image below another.

However, as my window height reaches col-md level, I get this result instead. layout problem How can I fix this issue?

Here's my code for that area of my HTML 

<div id="content" class="container">
      <div class="row">
        <div class="col-sm-1 col-lg-4">
          <figure>
            <img src="../media/img/puppy.jpg">
            <figcaption>Original picture of a puppy.</figcaption>
          </figure>
        </div>
        <div class="col-sm-1 col-lg-4">
          <figure>
            <img src="../media/img/modified.png">
            <figcaption>A picture of the puppy with a jungle background</figcaption>
          </figure>
        </div>
        <div class="col-sm-1 col-lg-4">
          <figure>
            <img src="../media/img/pacman_blue.png">
            <figcaption>Blue Pacman</figcaption>
          </figure>
        </div>
        </div>
      </div>
      <p>
        some text
      </p>
    </div>
  </div>

Upvotes: 0

Views: 1299

Answers (5)

Lakindu Gunasekara
Lakindu Gunasekara

Reputation: 4271

First of all, you need to close the tags properly in your snippet. Assuming you are using bootstrap 3, I have added some inline styling in order to display as in the picture. Also add img-responsive class to all images

img{
    margin:10;
    vertical-align:top;
    display: inline-block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<body style="background-color:grey;">
<div id="content" class="container">
      <div class="row">
        <div class="col-sm-1 col-lg-4">
          <figure>
            <img src="http://worldseriesdreaming.com/wp-content/uploads/2014/08/blog11.jpg"  class="img-responsive">
            <figcaption>Original picture of a puppy.</figcaption>
          </figure>
        </div>
        <div class="col-sm-1 col-lg-4">
          <figure>
            <img src="http://worldseriesdreaming.com/wp-content/uploads/2014/08/blog11.jpg" class="img-responsive">
            <figcaption>A picture of the puppy with a jungle background</figcaption>
          </figure>
        </div>
        <div class="col-sm-1 col-lg-4">
          <figure>
            <img src="http://worldseriesdreaming.com/wp-content/uploads/2014/08/blog11.jpg" class="img-responsive">
            <figcaption>Blue Pacman</figcaption>
          </figure>
        </div>
        </div>
      </div>
      <p>
        some text
      </p>
</body>

Bootstrap 4

Add class="img-fluid" class to images with the same css 

img {
  margin: 10;
  vertical-align: top;
  display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<body style="background-color:grey;">
  <div id="content" class="container">
    <div class="row">
      <div class="col-sm-1 col-lg-4">
        <figure>
          <img src="http://worldseriesdreaming.com/wp-content/uploads/2014/08/blog11.jpg" class="img-fluid">
          <figcaption>Original picture of a puppy.</figcaption>
        </figure>
      </div>
      <div class="col-sm-1 col-lg-4">
        <figure>
          <img src="http://worldseriesdreaming.com/wp-content/uploads/2014/08/blog11.jpg" class="img-fluid">
          <figcaption>A picture of the puppy with a jungle background</figcaption>
        </figure>
      </div>
      <div class="col-sm-1 col-lg-4">
        <figure>
          <img src="http://worldseriesdreaming.com/wp-content/uploads/2014/08/blog11.jpg" class="img-fluid">
          <figcaption>Blue Pacman</figcaption>
        </figure>
      </div>
    </div>
  </div>
  <p>
    some text
  </p>
</body>

Upvotes: 1

Prasiddh Rajgor
Prasiddh Rajgor

Reputation: 1

<div class="col-md-2 hidden-xs">
 <figure>
  <img src="../media/img/modified.png" class="img-responsive">
  <figcaption>A picture of the puppy with a jungle</figcaption>
 </figure>
</div>

Upvotes: 0

Daniel Netzer
Daniel Netzer

Reputation: 2232

col-md-6 and col-sm-12, imagine theres 12 slices of the window width and you define each div how to behave and how many slices to take.

Upvotes: 0

Chintan Amrutia
Chintan Amrutia

Reputation: 311

need apply css code below 

img {
    max-width: 100%;
}

OR

img {
    width: 100%;
}

Upvotes: 2

Shaik
Shaik

Reputation: 378

<div id="content" class="container">
      <div class="row">
        <div class="col-sm-1 col-lg-4">
          <figure>
            <img src="../media/img/puppy.jpg" class="img-responsive">
            <figcaption>Original picture of a puppy.</figcaption>
          </figure>
        </div>
        <div class="col-sm-1 col-lg-4">
          <figure>
            <img src="../media/img/modified.png" class="img-responsive">
            <figcaption>A picture of the puppy with a jungle background</figcaption>
          </figure>
        </div>
        <div class="col-sm-1 col-lg-4">
          <figure>
            <img src="../media/img/pacman_blue.png" class="img-responsive">
            <figcaption>Blue Pacman</figcaption>
          </figure>
        </div>
        </div>
      </div>
      <p>
        some text
      </p>
    </div>
  </div>

Add img-responsive class to the image

Upvotes: 2

Related Questions