Is there a way to move my (bootstrap) elements to the bottom of the columns without using position absolute?

I'm currently working on 3 columns with icons at the bottom, as seen on the bottom of this website:

I'm trying to align the icons directly to the bottom of each grey box without relying on position absolute which is what I'm currently using. However, without using absolute, I'm struggling to push all 3 icons to the bottom. Currently, they are all dependent on the height of the parent container.

I attempted to use flex, but I'm unsure how to implement it in this scenario. Using position absolute with a min-height is causing issues on mobile devices.

The layout is a bootstrap row containing 3 of these HTML elements...

.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>

csstwitter-bootstrapbootstrap-4position

Answer №1

In order to ensure the parent element (specifically the card-body) behaves as a flexbox, you should use the display: flex property. Additionally, you can apply the mt-auto class to automatically set the margin-top within the container.

The following code snippet is a segment from a previous project that may be helpful in your current situation:

.card-body {
  display: flex;
  flex-direction: column;
  text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-4 d-flex">

      <div class="card">
        <img class="card-img-top img-fluid" src="http://via.placeholder.com/400x300" alt="Card image">
        <div class="card-body d-flex flex-colum">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <a href="#" class="btn customBtn mt-auto">Read More</a>
        </div>
      </div>

    </div>
    <div class="col-12 col-sm-4 d-flex">

      <div class="card">
        <img class="card-img-top img-fluid" src="http://via.placeholder.com/400x300" alt="Card image">
        <div class="card-body d-flex flex-colum">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a href="#" class="btn customBtn mt-auto">Read More</a>
        </div>
      </div>

    </div>
    <div class="col-12 col-sm-4 d-flex">

      <div class="card">
        <img class="card-img-top img-fluid" src="http://via.placeholder.com/400x300" alt="Card image">
        <div class="card-body d-flex flex-colum text-center">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
          <a href="#" class="btn customBtn mt-auto">Read More</a>
        </div>
      </div>

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

Answer №2

.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;
  margin-top: auto; /* Add this line */
}

.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>

include margin-top: auto in .gallery .app-box .icons OR apply mt-auto bootstrap class to icons div

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing the Position of HTML Scripts in React

I am facing an issue where I need to relocate an external script within a specific section of my page. However, I am unable to access the CSS attributes associated with this item. It seems that it is displayed as an iFrame, making it difficult to modify th ...

javascripthtmlcssreactjs

What steps can I take to bring this idea to life in my gallery?

Currently, I am facing a roadblock while transitioning my design concept into actual code. My main concern lies with creating this art piece. Although the gallery is up and running with all the images in place, I'm encountering difficulties with the s ...

javascripthtmlcss

Enable vertical scrolling on a container of undetermined height

Can a vertical scroll be implemented on a container with an unknown height using flexbox? The use of max-height is not feasible, as it would limit the height to a specific number that may not work for all screen sizes. Here is a basic example of what is ...

htmlcssflexbox

Display toolbar title on small screens in separate lines

Recently, I encountered an issue while using v-toolbar in my vue app. Despite my efforts, I couldn't find a way to split the title into multiple lines on small screens. Currently, it displays as "Secti...." on smaller devices. Can anyone assist me wit ...

javascriptcssvue.js

Modifying canvas border colors using AngularJS

Currently, I am in the process of learning AngularJS and have developed a website that includes a canvas element. My main objective is to change the border color after clicking on a checkbox. Here is the code snippet for canvas.html : <!DOCTYPE html&g ...

javascripthtmlcssangularjs

Will my JavaScript function be triggered when the page is resized while printing?

I have a simple HTML layout where I am using the TextFill jQuery library to automatically adjust the text size based on available space. Everything looks good on screen, but when printed, it seems like the page is resized and the JavaScript needs to be re ...

javascriptjquerycss

Adjusting containers for optimal display during browser zoom and resize operations

Currently, I have designed a banner using a triangle and rectangle to overlay an image. However, when the browser is zoomed in, there seems to be a gap between these two shapes. I am looking for suggestions on how to better connect or approach this banner ...

htmlcss

The Final Div Fluttering in the Midst of a jQuery Hover Effect

Check out my code snippet here: http://jsfiddle.net/ZspZT/ The issue I'm facing is that the fourth div block in my example is flickering quite noticeably, especially when hovering over it. The problem also occurs occasionally with the other divs. Ap ...

javascriptjquerycss

The box-shadow is evenly distributed on the top and bottom as well as on the right and left sides

.box { background: blue; width: 500px; height: 550px; margin: 25px 0 25px 25px; border-width: 30px; border-style: solid; border-color: blue grey yellow green; box-shadow: 20px 20px 0 10px purple, -20px 20px 0 10px purple, 20 ...

htmlcss

Switching images upon hovering in AngularJS

Looking to change images on hover in my Angular app, encountered site peculiarities making CSS solution impractical. Resorted to using ng-mouseenter and ng-mouseleave for image swapping instead. landing.jade img.share-button(src='images/btn_share.p ...

htmlcssangularjs

Resizing the elements within an iframe: Troubleshooting problems with embedding Bandcamp players

My goal is to embed a Bandcamp music player on my WordPress blog page, but I'm facing a challenge. The maximum width of the current player is 700px and I need it to be 900px. After consulting with someone at Bandcamp, they directed me to the old versi ...

htmlcssjsoniframe

I am puzzled as to why my text and div boxes are displaying in my navbar/hamburger menu instead of at the bottom of the page

Greetings, everyone! This is my debut post here so bear with me if it's not presented in the correct format. Currently, I am deep into creating a website using HTML, CSS, and just a hint of JavaScript. My primary focus right now is on building the ho ...

javascripthtmlcssstyles

Placing the navigation bar on the right side of the section

.middle-site-content-container { width: auto; height: auto; border: 2px red solid; display: flex; /*Le pot pozitiona in line*/ flex-wrap: wrap; justify-content: center; flex-direction: row; margin: auto; } .middle-site-content-1, .middle ...

htmlcssflexbox

I am looking to include a popover within my modal using Bootstrap version 3.0.2

Hey there, I'm having an issue where the popover that should be inside the modal is actually appearing outside of it in the top left corner, not visible within the modal itself. Below is my index code: <button type="button" id="example" class="bt ...

javascriptjquerycsstwitter-bootstrap

Display a modal following a successful HTTP request

As I reflect on this code, I can't help but cringe at its ugliness. Forgive me for what you are about to see! The goal is to make an HTTP request using Axios and then display a modal confirming that an email has been successfully sent. Currently, th ...

twitter-bootstrapvue.js

Unable to show the company logo in the navigation bar

Working on a pizza site and encountering an issue - trying to add the logo of the place to the navbar (which also links to the main page) but it's not displaying. Using Twitter Bootstrap for this project. Here is the code snippet: /*#557c3e green*/ ...

htmlcsstwitter-bootstrap

Placing HTML text on top of a three.js renderer

I have been attempting to overlay HTML text onto my three.js sketch, but adjusting the z-index does not seem to be working. While I know that I could utilize innerHTML, the issue arises when I need to also use the onclick attribute, which is not the main f ...

htmlcssthree.js

How can we use withStyles to customize the styling of a selected ListItem in ReactJS and Material UI?

I am seeking assistance in changing the style of a specific ListItem, similar to what is demonstrated in this Codesandbox. In the Codesandbox example, a global CSS stylesheet is utilized, but I prefer to implement the changes using the withStyle techniqu ...

cssreactjsmaterial-uijsshigher-order-components

Why does the lazy loading feature keep moving the background image around?

While trying to incorporate lazy loading on my website, I encountered an issue where the image position would change after it was fully loaded and made visible. I experimented with rearranging the order in which my JavaScript and CSS files were called, bu ...

javascripthtmlcsslazy-loading

Ensure that the user's browser cache is cleared after deploying a new version on Firebase hosting

Utilizing create-react-app for my front end scripts and firebase hosting for deployment has been smooth overall. However, I've encountered an issue where updates to CSS and HTML files don't always reflect on the domain until I manually clear the ...

htmlcssreactjsfirebasefirebase-hosting