How can I align images of varying sizes to the bottom using Bootstrap 4 or CSS?

I'm having an issue with CSS align-xxxx:bottom not working. I want to align images of different heights at the bottom. 

.width-book{
  width: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
     <div class="container">
        <div class="row">
        <div class="col-xs-4 text-center">
        <a href="">
        <figcaption class="figure-caption color-primary">A caption for image</figcaption> 
        <img class="a width-book" src="http://shakespeareandcompany.com/files/isbn/9780007448036.jpg" data-holder-rendered="true">
        </a>
        </div>
        <div class="col-xs-4 text-center">
        <a href="">
        <figcaption class="figure-caption color-primary">A caption for image</figcaption> 
        <img class="a width-book" src="http://prodimage.images-bn.com/pimages/9780553805444_p0_v5_s1200x630.jpg" data-holder-rendered="true">
        </a>
        </div>
        <div class="col-xs-4 text-center">
        <a href="">
        <figcaption class="figure-caption color-primary">A caption for image</figcaption> 
        <img class="a width-book" src="http://shakespeareandcompany.com/files/isbn/9780007448036.jpg" data-holder-rendered="true">
        </a>
        </div>
        </div>
        </div>

I need the desired outcome to look like this: displaying the image

csstwitter-bootstrapbootstrap-4

Answer №1

To achieve a flexible layout, consider using flexbox CSS:

.container {
  position: relative;
  height: 600px;
  width: 1200px;
  display: flex;
  align-items: center;
}

For an example, check out this link: https://codepen.io/exampleuser/pen/abc123

Answer №2

Create a new class called col-xs-4 and apply the following CSS:

.book{
  align-self:end;
}


.width-book{
  width: 100px;
}
.book{
  align-self:end;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
     <div class="container">
        <div class="row">
        <div class="col-xs-4 text-center book">
        <a href="">
        <figcaption class="figure-caption color-primary">A caption for image</figcaption> 
        <img class="a width-book" src="http://shakespeareandcompany.com/files/isbn/9780007448036.jpg" data-holder-rendered="true">
        </a>
        </div>
        <div class="col-xs-4 text-center book">
        <a href="">
        <figcaption class="figure-caption color-primary">A caption for image</figcaption> 
        <img class="a width-book" src="http://prodimage.images-bn.com/pimages/9780553805444_p0_v5_s1200x630.jpg" data-holder-rendered="true">
        </a>
        </div>
        <div class="col-xs-4 text-center book">
        <a href="">
        <figcaption class="figure-caption color-primary">A caption for image</figcaption> 
        <img class="a width-book" src="http://shakespeareandcompany.com/files/isbn/9780007448036.jpg" data-holder-rendered="true">
        </a>
        </div>
        </div>
        </div>

Answer №3

An issue arises when your content is enclosed within an "a" tag, as this is the element you should be targeting for styling purposes. To resolve this, a quick fix is to assign the "book" class to all "a" tags and include the following CSS code:

a.book {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    align-items: center;
}

By implementing the above changes, you will achieve the desired outcome.

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

How to eliminate the space between text and list-style-image in CSS

My ul list items have an image added using the list-style-image property. Here is an example of what I have done: JSFiddle ul { list-style-image: url('http://placehold.it/50x40'); } <ul> <li>Coffee</li&g ...

htmlcss

What are effective ways to design a dialogue or conversation with CSS styling?

Looking to create a design similar to this one, but unsure of the terminology: https://i.sstatic.net/4QRcw.png I am open to different approaches for the layout, but possibly something along these lines: https://codepen.io/nachocab/pen/LaBwzw .containe ...

css

Having trouble with the flexbox flex-direction: column property not functioning properly with the textarea element in Firefox?

Inconsistencies between Chrome and Firefox have been noticed in the following example. While the footer height is set to height:40px and appears fine in Chrome, it seems smaller in Firefox, around 35px. Any specific reasons for this difference? Link to t ...

htmlcssflexbox

Creating various styles for cards using ngFor within Angular

I have been working on applying different styles to cards created using ngFor in Angular. Here's how it currently looks: https://i.sstatic.net/UhbSp.png My aim is to set unique styles for each card. Due to the ngFor loop used in creating them, I ini ...

htmlcssangular

Align the pseudo-element in the center of the parent element using the display property set to table

Can anyone provide guidance on how to center a pseudo-element specifically on an element that utilizes display: table-cell? I have tried various methods but it keeps getting centered only to the parent element with display: table. ...

htmlcssnext.js

What is the best way to include an arrow in a dropdown menu?

I've been working on restyling a Select box and I want to add a CSS arrow that rotates as the Select box expands. However, I'm struggling to align the arrow properly with the Select box. I've tried using code from the internet, but it hasn&a ...

csshtmlhtml-selectcss-shapes

Is there a way to assign a specific color to individual users in a chat?

I have successfully implemented a chat feature using Pusher, but now I want to customize the appearance by changing the color of the username for the logged-in user when they are active in the conversation. Currently, both my username and another user&apos ...

javascripthtmlcsslaravelvue.js

Generating Unique CSS Class Names with Django

I am looking to have the background color change randomly each time on a Django website. For example, I want it to be bg-success, bg-primary, bg-light, bg-dark... etc. Is there a way to achieve this? <div class="bg-success"> </div> ...

pythondjangobootstrap-4

How can you determine the dimensions of an image in HTML using Python?

Is there a way to extract image size information from source code using Python? tree = etree.HTML(source_page_text) image_list = tree.xpath('//img[@src]') The 'img' tags with 'src' attributes can be found using xpath as show ...

pythonhtmlcssimagexpath

Can you provide the keycodes for the numpad keys: "/" and "." specifically for the libraries I am utilizing or any other library that does not overlook them?

I've hit a roadblock with my Chrome Extension development. Despite using two different methods to add keyboard functionality, the keys "/" for divide and "." for decimal on the keypad are just not registering. I've attempted to tackle this issue ...

javascriptjqueryhtmlcss

Creating a Unique CSS Grid Border with Custom Images

I have a client project using nextjs and the design calls for a component with a custom border on a responsive CSS grid. I've successfully created the CSS grid with all the necessary content, but I'm struggling to add the required border as per t ...

htmlcssnext.jscss-grid

tips for efficiently using keyboard to navigate through tabs in an unordered list

Utilizing unordered lists in this web application. I am looking to implement tab navigation with keyboard functionality. How can I achieve this? The first tab should contain text boxes, and when the user fills out a text box and presses the tab key, they s ...

javascriptjqueryhtmlcssjquery-ui

The CSS is getting overridden by the a:-webkit-any-link user agent stylesheet

I've found myself faced with a page full of lists and links that I need to style individually. No matter what I try, the fonts and colors keep getting overridden by an unknown user agent stylesheet. I've experimented with styling the divs using c ...

htmlcsswebkit

HTML/CSS - How to make an element wider than its containing element while staying visible

I am currently working on a web page that generates a table with a green background labeled by an h2 element. The challenge I'm facing is ensuring that the h2 element extends horizontally as far as the user scrolls so that there is always a green bar ...

htmlcsslayout

Is the button not aligned properly with the email input field?

<div class="subscribe__form--action--btn"> <form action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32545b5e5b5746545C5B5356477F54585850"> </a>" meth ...

htmlcssbutton

Target the select element with a specific style applied, but restrict it to only be selected when nested within a div that shares the same style

Not quite sure about the effectiveness of the title, but here's what I'm attempting to accomplish. <div class="mystyle"> <select name="somename" id="somename"> <option value="Value1"> <option value="Value2" ...

css

JQuery animations not functioning as expected

I've been attempting to create a functionality where list items can scroll up and down upon clicking a link. Unfortunately, I haven't been able to achieve the desired outcome. UPDATE: Included a JSFiddle jQuery Code: $(document).ready(function ...

javascriptjquerycss

Placing two texts alongside a logo in a Bootstrap Navbar: Step-by-step guide

As I venture into the world of Bootstrap, I am on a quest to create a Navbar Component similar to this design: https://i.stack.imgur.com/NidKQ.png I attempted to use the Navbar Image and Text code, but encountered an issue where the text would only displ ...

htmlcssbootstrap-4bootstrap-5nav

Update the CSS styling of a parent div based on the active state of specific child divs

I have a class with 4 distinct columns. div class="mainContent"> <div class="left-Col-1" *ngIf="data-1"> </div> <div class="left-Col-2" *ngIf="!data-1"> ...

javascripthtmlcssangulartypescript

Solving the default font problem in Laravel

I've been working on a project using Laravel and Bootstrap 4. Recently, I decided to switch from the default Laravel font, Nunito, to Lato. So, I made the necessary changes in my app.css file: @import url(https://fonts.googleapis.com/css?family=Nun ...

phpcsslaravelbootstrap-4fonts