Tips for positioning an element at the bottom of columns using bootstrap

I'm having trouble aligning an image to the bottom of the page. Despite the column being the same height, the image just won't align all the way to the bottom.

https://i.sstatic.net/0u9LH.jpg

Check out the Codepen demo for reference: https://codepen.io/monsmado/pen/WNvmdOL

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

    <div class="col-sm">
        <img src="https://via.placeholder.com/557x347" class="img-fluid">
        <h2>Lorum Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <div class="d-sm-flex align-self-end">
            <a href="#">
                <img src="https://via.placeholder.com/31x36">
            </a>
        </div>
    </div>

    <div class="col-sm">
        <img src="https://via.placeholder.com/557x347" class="img-fluid">
        <h2>Lorem ipsum dolor sit amet consectetur</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="d-sm-flex align-self-end">
            <a href="#">
                <img src="https://via.placeholder.com/31x36">
            </a>
        </div>
    </div>

    <div class="col-sm">
        <img src="https://via.placeholder.com/557x347" class="img-fluid">
        <h2>Lorem ipsum dolor sit amet consectetur</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="d-sm-flex align-self-end">
            <a href="#">
                <img src="https://via.placeholder.com/31x36"">
            </a>
        </div>
    </div>

    </div>
</div>
htmlcssbootstrap-4

Answer №1

To achieve the desired layout, ensure you include display: flex and flex-direction: column in the .col-sm class. Additionally, add margin-top: auto to the div containing your bottom item:

For a demonstration, you can visit this CodePen link.

If you are working with bootstrap 4, consider utilizing the class d-flex flex-column for the .col-sm div, and mt-auto for the bottom item div:

Check out this CodePen example for more details.

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

Trouble Viewing Fonts on Mobile Devices like iPhones

I am experiencing a frustrating issue on my website. While using Agency FB and Calibri fonts, they appear correctly on all desktop browsers. However, when accessed from my iPhone, a different standard font is displayed instead. Both the logo and text with ...

htmlcssiphonemobilebrowser

Modifying the .textcontent attribute to showcase an image using JavaScript

I am working on a website and I want to change editButton.textContent = 'Edit'; so that it displays an image instead of text. var editButton = document.createElement('button'); editButton.textContent = 'Edit'; After exploring ...

javascripthtmlcss

Is it possible to detach keyboard events from mat-chip components?

Is there a way to allow editing of content within a mat-chip component? The process seems simple in HTML: <mat-chip contenteditable="true">Editable content</mat-chip> Check out the StackBlitz demo here While you can edit the content within ...

htmlangulartypescriptangular-material

Incorporating an SVG Element into a design while ensuring its responsive functionality

I tried adding an SVG wave type picture to my background and making it responsive, but encountered some issues. I wanted to enhance the look of my existing background image by incorporating a wave design. However, when I zoomed in on the website, the new a ...

htmlcsssvgresponsive-design

The image source is not functioning properly to display the image, even though it is working perfectly on

I'm currently attempting to retrieve an image from Instagram. Everything seems to be in order with the image link on Instagram. However, when I try to use it within an img tag, it fails to fetch. One thing worth noting is that this particular image d ...

htmlcssimagesrc

What is the best method for placing an element above all other elements on a page, regardless of the layout or styles being used?

I want to create a sticky button that remains fixed on the page regardless of its content and styles. The button should always be displayed on top of other elements, without relying on specific z-index values or pre-existing structures. This solution must ...

javascripthtmlcss

When using CKEditor, pressing the Enter key results in the insertion of <br /> tags

Whenever I use ckeditor, I find that pressing enter results in two <br /> tags being inserted. While I want to keep the line break tags, having them appear twice is not ideal. In my config.js file, I have set the configuration for the enter key as f ...

javascripthtmlcssckeditor

Obtain the numerical value of the vertical position of the mouse (

Currently, I am coding a JavaScript game and my objective is to designate a variable specifically for the Y axis of the mouse. I kindly request that the code be kept as simple and straightforward as possible, avoiding unnecessary complexity. That conclud ...

javascripthtmlvariablesyaxis

Using HTML Select field to make ajax calls to web services

When working with modals that contain forms to create objects for database storage, there is a Select field included. This is the code snippet for the Select field: <div class="form-group" id=existingUser> <label>Username</label> < ...

javascriptjqueryhtmlajaxmodel-view-controller

Display the product image as radio buttons or checkboxes, with a tick mark appearing when selected

I am trying to add a background image to the <img> tag. My goal is to display the checkmark image in the center of the Twitter image. However, the checkmark image as a background image is not appearing here. img{ background-image:url(https://www ...

htmlcssimage

How to hide or remove an element in jQuery depending on an attribute change

I am currently working on my website and exploring ways to utilize jQuery to display or add the element div#content1 when the #nav-home-tab has aria-selected=true, and to hide or remove the element if aria-selected=false. This is what I have tried so far: ...

jqueryhtmlbootstrap-4

Using jQuery to reveal and conceal elements upon hover interaction

I have implemented a basic jquery function to display and hide a div when hovering over an anchor. However, the issue I am facing is that the div disappears when I move my cursor away from the anchor tag. I want to be able to interact with the div without ...

jquerycss

Having trouble implementing HTML font-family in C# code due to spaces

I am encountering a minor issue with setting the font-family in my C# code behind on an aspx page in Visual Studio Express 2015 for Web. I have written code using HtmlTextWriter to enable printing of a gridview when a button is clicked. The problem arises ...

c#htmlvisual-studio

Enable my textbox to interpret the html img tag

Is there a way to display emoji images instead of emoji symbols when inserting them into my textbox? For example, can I show the image representation of ':)' instead of just the symbol itself? ...

javascripthtml

Styling code for a layout with two columns aligned to the left using

I am looking to create a layout where two pieces of text are displayed side by side in columns using CSS. The left-hand column will have variable length text, while the right-hand column will have fixed length text. The desired layout should show the two ...

htmlcsslayoutcss-floatmultiple-columns

Is there a way to stop my <pre> code from being displayed on the page?

Currently, I am utilizing the google code prettifier found at http://code.google.com/p/google-code-prettify/ This tool functions similarly to stack overflow by enhancing and highlighting syntax when a block of code is input. However, I have encountered a ...

javascripthtmlpretty-printprettify

Unable to Toggle Bootstrap 5 Dropdown

Take a look at my code below. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor ...

javascripthtmlcssvue.js

Using CSS min-height: 100vh will ensure that the container has enough height to fill the entire viewport

Utilizing min-height: 100vh; in my inner call to action div placed on top of a background video has been mostly successful. However, I've encountered an issue where using 100vh with the absolutely positioned video seems to introduce an unwanted margin ...

htmlcssruby-on-railsbootstrap-4

Ways to adjust the size of div and its elements to fit the window dimensions

When resizing the window, the banner image shrinks while the header and header items remain the same size. However, there is an issue when the header takes up around 30% of the screen in phone view. Here is the CSS code I am using: .headerdiv{ width: ...

javascripthtmlcssflexbox

Is there a way to position these divs in a line using inline-block?

I need help aligning two divs with text differently - one to the top left and the other centered but not on the same line. Here's the layout I'm aiming for: ---------------------------------------------- |Backstage |Issue 4 | | ...

htmlcss