Try to search your question here, if you can't find : Ask Any Question Now ?

How can I bring my (bootstrap) elements to the bottom of the columns without position absolute?

HomeCategory: stackoverflowHow can I bring my (bootstrap) elements to the bottom of the columns without position absolute?
Avatarbhawya asked 2 weeks ago

I have 3 columns I’m working on with icons on the bottom. You can see them at the bottom of this site: https://matiny.github.io/

I want to bring the icons straight to the bottom of each grey box without using position absolute (which is what I’m currently using). However, without absolute, I don’t know how to push all 3 to the bottom. They are all by default dependent on the height of the parent.

I’ve tried to use flex, but I’m not sure how to apply it here. Position absolute with a min-height causes issues on mobile.

It’s a bootstrap row with 3 of these HTML elements inside…

.gallery {
  padding: 2.5rem 0;
}

.gallery h1 {
  font-size: 3rem;
  padding: 1.5% 0;
}

.gallery .app-box {
  position: relative;
  min-height: 31rem;
  background-color: #ebedf0;
}

.gallery .app-box img {
  width: 100%;
}

.gallery .app-box .caption {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.gallery .app-box .name,
.gallery .app-box .description {
  padding: 1rem;
  color: #0f1a30;
  font-weight: 700;
}

.gallery .app-box .name {
  font-size: 1.5rem;
  padding-bottom: 0;
}

.gallery .app-box .description {
  opacity: 0.5;
}

.gallery .app-box .icons {
  height: 100%;
  width: 100%;
  opacity: 0.5;
  padding-bottom: 1rem;
}

.gallery .app-box .icons img {
  width: 15%;
  margin: 0 0.25rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="gallery">
  <div class="col-md-4 col-12">
    <a href="https://matiny.github.io/gta6/">
      <figure class="app-box">
        <img src="https://matiny.github.io/images/jpgs/gallery-gta.jpg" alt="">
        <figcaption class="name">
          GTA UI UPGRADES
        </figcaption>
        <div class="caption">
          <figcaption class="description">GTA Online is very detailed, but the details are presented in a confusing way. <br> I came up with various menus which are simpler to use, while maintaining the same complex functions.
          </figcaption>
          <div class="icons">
            <img src="https://matiny.github.io/images/svgs/icon-js.svg" alt="">
            <img src="https://matiny.github.io/images/svgs/icon-react.svg" alt="">
            <img src="https://matiny.github.io/images/svgs/icon-sass.svg" alt="">
          </div>
        </div>

      </figure>
    </a>
  </div>
</section>
1 Answers
Best Answer
Avatarnaveen answered 2 weeks ago
Your Answer

1 + 16 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com