Need to keep an image at the right bottom of a div

I need to show number of items in a row. Each item would have two texts that need to be in the top middle of the item, an image in middle of the item and another one at the right bottom of the item. I have following code, and the main issue is I cannot keep the second images at the right bottom of their respective items.

I do not know how to put the code in codeSnippet, please let me know if anyone can help. Thanks.

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<style>
.item { */
  position: relative;
  margin-bottom: 7px;
  margin-left: 7px;
  margin-right: 0px;
  text-align: left;
  background-color: red;
  border-top-left-radius: 20px;
  padding-left: 1%;
}

div.item {
  position: relative;
}
</style>
</head>


<body>

  <div class="wrapper">



    <div class="container-fluid">
      <div class="row">

        <div class="col-md-3 item">

          <div class="col-md-12 text-center">
            <h4>Text1</h4>
          </div>
          <div class="col-md-12 text-center">
            <h5>Text2</h5>
          </div>
          <div class="col-md-12 row text-center">
            <img id="imageresource"
              src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSrbEjSOC9UfaZW-TOYCfsYStvyZwieyFl1NU0XV-jCOg-Gy18XZ0ia55U"
              class="img-thumbnail" width="90%" style="margin-left: 30px;" />


          </div>
          <div class="col-md-12 col-xs-12 moreBtn">
            <img
              src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2j6jUF8YWMzGMHA0FEy6T8VAaqejhmQYLluBKzVwrHoclSS3v" />
          </div>
        </div>

        <div class="col-md-3 item">

          <div class="col-md-12 text-center">
            <h4>Text1</h4>
          </div>
          <div class="col-md-12 text-center">
            <h5>Text2</h5>
          </div>
          <div class="col-md-12 row text-center">
            <img id="imageresource"
              src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSrbEjSOC9UfaZW-TOYCfsYStvyZwieyFl1NU0XV-jCOg-Gy18XZ0ia55U"
              class="img-thumbnail" width="90%" style="margin-left: 30px;" />


          </div>
          <div class="col-md-12 col-xs-12 moreBtn">
            <img
              src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2j6jUF8YWMzGMHA0FEy6T8VAaqejhmQYLluBKzVwrHoclSS3v" />
          </div>
        </div>




      </div>
    </div>
</body>


</html>


Source: css3

Leave a Reply