Column with a bottom aligned div

My current layout in Bootstrap 4 consists of four columns, but I am facing an issue where one of the columns with longer text is causing misalignment of the "buttons" at the end.

https://i.sstatic.net/lWFgQ.png

Below is the HTML code:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container">
    <div class="row mt-4">
        <div class="col-lg-12 title-1 text-center">
            My Headline
        </div>
    </div>
    <div class="row py-5">
        <div class="col-lg-3">
            <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
            <div class="text-center title-4 volume">lorem</div>
            <hr>
            <div class="text-center title-2">
                Just a test
            </div>
            <div class="button-1 text-center title-3">
                    MORE INFOS
            </div>
        </div>
        <div class="col-lg-3 mt-lg-0 mt-5">
            <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
            <div class="text-center title-4 volume">lorem</div>
            <hr>
            <div class="text-center title-2">
                This is longer text which causes the issue
            </div>
            <div class="button-1 text-center title-3">
                    MORE INFOS
            </div>
        </div>
        <div class="col-lg-3 mt-lg-0 mt-5">
            <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
            <div class="text-center title-4 volume">lorem</div>
            <hr>
            <div class="text-center title-2">
                    Just a test
            </div>
            <div class="button-1 text-center title-3">
                    MORE INFOS
            </div>
        </div>
        <div class="col-lg-3 mt-lg-0 mt-5">
            <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
            <div class="text-center title-4 volume">lorem</div>
            <hr>
            <div class="text-center title-2">
                    Just a test
            </div>
            <div class="button-1 text-center title-3 align-self-end">
                MORE INFOS
            </div>
        </div>
    </div>
</div>

To resolve this alignment issue with the "buttons", what can be done?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Transform the columns into flexbox items (d-flex flex-column) and utilize mt-auto to align the buttons at the bottom...

<div class="container">
    <div class="row mt-4">
        <div class="col-lg-12 title-1 text-center">
            My Headline
        </div>
    </div>
    <div class="row py-5 border">
        <div class="col-lg-3 d-flex flex-column">
            <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
            <div class="text-center title-4 volume">lorem</div>
            <hr>
            <div class="text-center title-2">
                Just a test
            </div>
            <div class="button-1 text-center title-3 mt-auto">
                    MORE INFOS
            </div>
        </div>
        <div class="col-lg-3 mt-lg-0 mt-5  d-flex flex-column">
            <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
            <div class="text-center title-4 volume">lorem</div>
            <hr>
            <div class="text-center title-2">
                This is longer text which causes the issue
            </div>
            <div class="button-1 text-center title-3 mt-auto">
                    MORE INFOS
            </div>
        </div>
        <div class="col-lg-3 mt-lg-0 mt-5  d-flex flex-column">
            <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
            <div class="text-center title-4 volume">lorem</div>
            <hr>
            <div class="text-center title-2">
                    Just a test
            </div>
            <div class="button-1 text-center title-3 mt-auto">
                    MORE INFOS
            </div>
        </div>
        <div class="col-lg-3 mt-lg-0 mt-5  d-flex flex-column ">
            <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
            <div class="text-center title-4 volume">lorem</div>
            <hr>
            <div class="text-center title-2">
                    Just a test
            </div>
            <div class="button-1 text-center title-3  mt-auto">
                MORE INFOS
            </div>
        </div>
    </div>
</div>

Answer №2

Method 1: Implementing Flexbox for Column Layout and Using Margin: Auto to Align the Button

This solution was originally posted by @Zim (he's incredibly quick!)

Method 2: Employing Text-Overflow Property

Another way to tackle this issue without relying on flexbox is to apply the text-overflow property directly to the text. By adding text-overflow within your title-2 class, you can ensure that the title remains confined to a single line.

CSS

.title-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Outcome

https://i.sstatic.net/gXf8z.png

http://jsfiddle.net/aq9Laaew/261632/

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

What is the best way to implement padding for two DIVS on a screen utilizing VH and VW units to ensure they fill up the

I am currently working on a layout with two columns spanning across the page. I need to add some padding around the text in each column so that it sits nicely in the middle. I have been trying to adjust the div width and use wrappers, but something seems t ...

htmlcssmarginsadjustmentborder-spacing

Is there a way to modify the commandlink image when the mouse hovers over it in PrimeFaces?

After implementing this code snippet, my commandlink seemed to vanish into thin air. Upon inspecting it with firebug, I discovered that it was present but had a size of 0 x 0 px. .myNewButton { width: 50px !important; height: 50px !important; background ...

cssprimefaceshovercommandlink

Loading images in advance with AJAX for enhanced AJAX performance

My website is structured in a sequential manner, where page1.html leads to page2.html and so on. I am looking to preload some images from the third page onto the second page. After searching, I came across this amazing code snippet: $.ajax({ url ...

javascriptjqueryhtmlcssajax

Troubleshooting code: JavaScript not functioning properly with CSS

I am attempting to create a vertical header using JavaScript, CSS, and HTML. However, I am facing an issue with the header height not dynamically adjusting. I believe there might be an error in how I am calling JSS. Code : <style> table, tr, td, t ...

javascripthtmlcss

Ways to modify the CSS of an active class within a child component when clicking on another shared component in angular

In my HTML template, I am encountering an issue with two common components. When I click on the app-header link, its active class is applied. However, when I proceed to click on the side navbar's link, its active class also gets applied. I want to en ...

cssangulartypescriptsasscss-selectors

Horizontal line displayed in the jumbotron's footer

https://i.sstatic.net/9cjiD.jpg I'm having trouble aligning two horizontal lines (hr) in my jumbotron. The first line aligns correctly at the beginning of the page, but the second line, located at the bottom of the logo, should be at the end of the p ...

htmlcssbootstrap-4

"What could be causing the sticky sidebar to not float as intended

Take a peek at this example where I implement the affix for the right sidebar (unfortunately, Bootstrap 4 doesn't have true affixes) - Violy Theme Right Sidebar Example. The sticky behavior is achieved through this style: .sidebar { border-radius: ...

htmlcssbootstrap-4

Restricting Horizontal Scrolling in Dash DataTable with multi-tiered header (without any additional empty gaps)

I'm currently developing a Dash application using Plotly that showcases two tables, specifically dash_table.DataTable, each with multiple columns. The initial table features a multi-level header. For both tables, the first few columns are fixed while ...

pythoncssplotly-dash

Achieving a full width vertical navigation on the left side using Bootstrap's grid system: a step-by

I am looking to design an admin panel using bootstrap. To start off, I want to create a navigation menu on the left side. However, I encountered an issue where my navigation menu with a red background does not stretch the full width of the left column. Her ...

htmlcsstwitter-bootstrapbootstrap-4

Unexpected blank space detected at the bottom of the page in Angular 13

Using the NGX-ADMIN template built on Angular 12 has been smooth sailing until an upgrade to Angular 13. With this simple version change, I am now faced with a perplexing issue that I can't seem to pinpoint or resolve. I can confidently say that shif ...

cssangular

identifying the element targeted on dynamically created links with the help of jquery

I have created dynamic links where clicking on a country link displays the cities of that particular country. I am trying to retrieve the event.target.id of the dynamically generated city link when it is clicked. $(".countryName").children().on('cl ...

javascripthtmljquery

I'm experiencing challenges with the layout of an HTML document

I am looking to create individual boxes for each of these images, rather than coloring the entire row. One approach I've tried is using a div tag with a class called "caja-img" that specifies a specific width. HTML <div class="col-md"> &l ...

htmlcssbootstrap-4

Responses were buried beneath the inquiries on the frequently asked questions page

My FAQs page is in pure HTML format. The questions are styled with the css class .pageSubtitle, and the answers have two classes: .p1 and .p2. Here's an example: <p class="pageSubtitle">Which Award should I apply for?</p> <p class="p1" ...

javascriptjqueryhtmlcss

What is the best way to modify and execute js and css (less) files dynamically using ajax and jQuery?

Whenever I click a button, an ajax call is triggered to load various html code into a div with the id 'main'. While displaying the html content is not an issue, integrating and applying css and js code to my current page has proven to be challeng ...

javascriptjqueryhtmlcssajax

Incorporating a spectrum of hues into an HTML document

As a beginner in HTML, I recently stumbled upon a website (YT video) showcasing a stunning array of colors on buttons. You can check it out here: https://www.youtube.com/watch?v=OPaLnMw2i_0 I'm curious if these colorful designs can be applied to text ...

htmlreactjscolorsnext.js

Tips for optimizing Angular source code to render HTML for better SEO performance

Our web platform utilizes Angular JS for the front-end and node js for the backend, creating dynamic pages. When inspecting the code by viewing the source, it appears like this: For our business to succeed, our website needs to be SEO-friendly in order to ...

javascripthtmlangularseo

The webpage does not dynamically adjust to fill the screen size when viewed on an iPhone 6 Plus

I am encountering an issue with a specific page which can be found at the following link: The webpage is not responsive, and the client's requirement is for the entire page to be visible on a mobile screen without the need for zooming in or out. Inst ...

htmlios8safariviewportiphone-6-plus

How to position an empty Div next to images

I am currently working on a project to familiarize myself with Japanese Hiagana. I plan to incorporate more images and eventually sound into the post. To reduce the number of images used, I attempted to replace empty .pngs with a div element. However, I am ...

css

Sticky element on the left side vanishes while scrolling towards the right

My goal is to design a webpage with five distinct regions, out of which three are meant to be sticky. However, while implementing this feature, I encountered an issue - when the user scrolls to the right beyond the viewport width, the left sticky elements ...

htmlcsssticky

What is the best way to showcase my subscription form on a web browser?

I am encountering an issue with my code. My goal is to generate a subscribe form modal. Although I have incorporated the subscribe form in my HTML document, upon running the code in the browser, the subscribe section is not visible. Can anyone offer assist ...

javascripthtmlcssbootstrap-5