Thumbnail height problem

Thumbnail height problem
0

#1

Hello everyone,

got a problem while building my portfolio page and can’t figure out the solution.

Thumbnail images are of different height and so thumbnails become different height as well. how can i make them same height while keeping images original height and thumbnails responsive to screen width. also make captions aligned at the same height.

i want it to be something like this

as you can see i wat to make all 4 thumbnails the same height. but currently the first on is shorter than the rest.

my code:
div class=“container"
div class=“jumbotron"
div class=“row"
center h4 id=“portfolio” PORTFOLIO /h4 /center
br/
div class=“col-md-3 col-xs-6"
a href=“https://codepen.io/Naglis/pen/xpBzzW” target=’_blank’
div class=“thumbnail"
img src=”…” alt=“no picture” style=“image responsive"
div class=“caption” h6 Tribute page /h6 /div
/div
/a
/div
div class=“col-md-3 col-xs-6"
a href=”” target=’_blank’
div class=“thumbnail"
img src=”…” alt=“no picture” style=“image responsive"
div class=“caption” h6 Lorem ipsum dolor sit /h6 /div
/div
/a
/div
div class=“col-md-3 col-xs-6"
a href=”” target=’_blank’
div class=“thumbnail"
img src=”…” alt=“no picture” style=“image responsive"
div class=“caption” h6 Lorem ipsum dolor sit /h6 /div
/div
/a
/div
div class=“col-md-3 col-xs-6"
a href=”” target=’_blank’
div class=“thumbnail"
img src=”…” alt=“no picture” style="image responsive"
div class=“caption” h6 Lorem ipsum dolor sit /h6 /div
/div
/a
/div
/div
/div
/div

.background {
background-color: #b1d6eb;
}

#navigation {
background-color: #464553;
padding: 20px;
margin-top: 50px;
}

div {
font-family: “lato”, “Verdana”, “Arial”, “sans-serif”;
}

h1 {
font-weight: 300;
}

hr {
width: 70%;
height: 1px;
background-color: black;
}

a {
color: black;
}

p {
font-weight: 400;
}


#2

To enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3
<div class="container">
  <div class="jumbotron">
    <div class="row">
      <center><h4 id="portfolio"> PORTFOLIO </h4> </center>
      <br/>
      <div class="col-md-3 col-xs-6">
        <a href="https://codepen.io/Naglis/pen/xpBzzW" target='_blank'>
          <div class="thumbnail">
          <img src="http://www.ve.lt/forum/uploads/img/catalog/1/466/254/valdas-adamkus-draugystes-su-rusija-nereiketu-siekti-bet-kokia-kaina2.jpg" alt="no picture" style="image responsive"> 
          <div class="caption"> <h6> Tribute page </h6> </div>
          </div>
        </a>
      </div>
      <div class="col-md-3 col-xs-6">
        <a href="" target='_blank'> 
          <div class="thumbnail">
          <img src="https://content.20lines.com/4/ico/nR2AkiKs_vN77_562ffce5782073_65523705.jpg" alt="no picture" style="image responsive"> 
          <div class="caption"> <h6> Lorem ipsum dolor sit  </h6> </div>
          </div> 
        </a>
      </div>
      <div class="col-md-3 col-xs-6">
        <a href="" target='_blank'> 
          <div class="thumbnail">
          <img src="https://content.20lines.com/4/ico/nR2AkiKs_vN77_562ffce5782073_65523705.jpg" alt="no picture" style="image responsive"> 
          <div class="caption"> <h6> Lorem ipsum dolor sit  </h6> </div>
          </div>
        </a>
      </div>
      <div class="col-md-3 col-xs-6">
        <a href="" target='_blank'>
          <div class="thumbnail">
          <img src="https://content.20lines.com/4/ico/nR2AkiKs_vN77_562ffce5782073_65523705.jpg" alt="no picture" style="image responsive"> 
          <div class="caption"> <h6> Lorem ipsum dolor sit  </h6> </div>
          </div> 
        </a>
      </div>     
    </div> 
  </div>
</div>