Arranging elements within distinct div containers

Utilizing Bootstrap 4, I crafted a card-deck containing two cards. Despite the equal height of both cards, the alignment of elements is affected by varying text lengths.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-deck">
  <div class="card" style="margin-top: 0px">
    <div class="card-body">
      <a>
        <img class="card-img" src="{{banner.FeatureImage0.Url}}" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
      </a>
      <h5 class="card-title">Get to Know...FirstName LastName</h5>
      <p class="card-text" style="margin-bottom: 20px;">In this interview we feature FirstName LastName, Community Relations and Social Responsibility Officer, Executive Vice President.</p>
      <a class="btn btn-primary" style="color:white !important;">Read More</a>
    </div>
  </div>

  <div class="card" style="margin-top: 0px">
    <div class="card-body">
      <a>
        <img class="card-img" src="{{banner.FeatureImage0.Url}}" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
      </a>
      <h5 class="card-title">Questions are more important than answers - August ethics message</h5>
      <p class="card-text" style="margin-bottom: 20px;">The August ethics message comes from FirstName LastName, Wisconsin Region CEO.</p>
      <a class="btn btn-primary" style="color:white !important;">Read More</a>
    </div>
  </div>

</div>

What steps can be taken to ensure that the "Read More" buttons are aligned with each other?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To ensure that the buttons are positioned at the bottom of each card, you can utilize d-flex flex-column to set the flex-direction of the card-body as column, and then add mt-auto (equivalent to margin-top:auto)...

<div class="container">
    <div class="card-deck">
        <div class="card" style="margin-top: 0px">
            <div class="card-body d-flex flex-column align-items-start">
                <a>
                    <img class="card-img" src="{{banner.FeatureImage0.Url}}" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
                </a>
                <h5 class="card-title">Get to Know...FirstName LastName</h5>
                <p class="card-text" style="margin-bottom: 20px;">In this interview we feature FirstName LastName, Community Relations and Social Responsibility Officer, Executive Vice President.</p>
                <a class="btn btn-primary mt-auto" style="color:white !important;">Read More</a>
            </div>
        </div>
        <div class="card" style="margin-top: 0px">
            <div class="card-body d-flex flex-column align-items-start">
                <a>
                    <img class="card-img" src="{{banner.FeatureImage0.Url}}" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
                </a>
                <h5 class="card-title">Questions are more important than answers - August ethics message</h5>
                <p class="card-text" style="margin-bottom: 20px;">The August ethics message comes from FirstName LastName, Wisconsin Region CEO.</p>
                <a class="btn btn-primary mt-auto" style="color:white !important;">Read More</a>
            </div>
        </div>
    </div>
</div>

This method does not require modifying the card structure, keeping all content within the card-body.

Answer №2

The card content is not displaying at the same height, causing one header to take up more space than the others in a small window. To fix this issue, you can assign specific widths to the title and body sections of the card and then use an ellipsis for overflow text. By controlling the height of each element before the button, you can ensure that all content aligns properly.

Here's an example using ellipsis:

.card-title {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
  margin: 0;
}

Answer №3

To improve the layout of the card, you can add a "text container" to provide padding at the bottom (equal to the button height plus extra margin, for example 2.5rem). Additionally, you can position the button absolutely at the bottom of the card-body with the same distance/size as the card-body margin (1.5rem).

.card-body {
  position: relative;
}

.card-body .emp-container {
  padding-bottom: 2.5rem;
}

.card-body .btn {
  position: absolute;
  bottom: 1.25rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-deck">
  <div class="card" style="margin-top: 0px">
    <div class="card-body">
      <div class="emp-container">
        <a>
          <img class="card-img" src="https://picsum.photos/200/300" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
        </a>
        <h5 class="card-title">Get to Know...FirstName LastName</h5>
        <p class="card-text" style="margin-bottom: 20px;">In this interview we feature FirstName LastName, Community Relations and Social Responsibility Officer, Executive Vice President., Community Relations and Social Responsibility Officer, Executive Vice President., Community Relations and Social
          Responsibility Officer, Executive Vice President.</p>
      </div> <a class="btn btn-primary" style="color:white !important;">Read More</a>
    </div>
  </div>
  <div class="card" style="margin-top: 0px">
    <div class="card-body">
      <div class="emp-container">
        <a>
          <img class="card-img" src="https://picsum.photos/200/300" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
        </a>
        <h5 class="card-title">Questions are more important than answers - August ethics message</h5>
        <p class="card-text" style="margin-bottom: 20px;">The August ethics message comes from FirstName LastName, Wisconsin Region CEO.</p>
      </div>
      <a class="btn btn-primary" style="color:white !important;">Read More</a>
    </div>
  </div>
</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

Is the `visibility: hidden` property not functioning as expected?

I am trying to conceal the script for the photoset until it is fully loaded, but unfortunately the code below does not seem to be effective: JavaScript $('.photoset-grid').photosetGrid({ rel: $('.photoset-grid').attr("data-id"), gutte ...

javascriptjqueryhtmlcss

A guide to activating automatic filling of usernames and passwords in web browsers

On my login page, I aim to make the user experience seamless by automatically filling in the username and password fields once a user has logged in for the first time. This way, when they return to the login page, all they have to do is click the login but ...

jqueryhtmlautofill

Troubleshooting a problem with CSS Matrix animations

Lately, I've been working on creating some matrix animations. However, I noticed an unusual issue. The code below seems to function differently across Firefox, Safari, and Chrome: @-moz-keyframes matrix { from { -moz-transform: matri ...

cssmatrix

Adaptable placement of background across screen widths

I am facing an issue with three buttons that have the same height and width, text, and background icons on the right. On small screens or when there is only a single word in the button, I want to move the icons to the bottom center of the button. Is there ...

htmlcss

Need inspiration for testing web content with Protractor?

Exploring new possibilities for testing web content with Protractor. Any fresh ideas on what else can be tested? So far, I've checked links to ensure they redirect correctly. I've also verified text color and decoration changes when hovering ove ...

htmlcsstestingprotractorend-to-end

I am attempting to create a footer with a set size, but encountering an issue

I'm in the process of developing a responsive website using Vue.js. One aspect I am working on is the footer container, which looks fine on the full screen but shrinks when the screen resolution is reduced below 1100 pixels. As shown in the images li ...

htmlcssvue.jswebfrontend

Spinning a CSS object around an axis

Trying to add a unique touch to my image rotation with CSS. While familiar with rotating around x, y, and z axis, I want to achieve a diagonal rotation this time. Wondering if there's a way to tweak the y axis for a more slanted effect on my image? ...

javascripthtmlcss

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

Enabling Javascript's power-saving mode on web browsers

I created a JavaScript code to play music on various streaming platforms like Tidal, Spotify, Napster, etc., which changes tracks every x seconds. If the last song is playing, it loops back to the first song in the playlist since some websites lack this fe ...

javascripthtmlmemory-consumption

Navigating the art of employing different fonts for a website

I am looking to incorporate the trainway font into my website, but I'm concerned that the user may not have it installed on their device. Is there a way to showcase text in a specific font without requiring the user to download and install it? Thank ...

javascripthtmlcss

Tips for displaying backend error messages on the frontend

I am facing an issue with returning error messages from the backend to the frontend in my Angular project. The specific requirement is to display an error message when the value of msisdn is not eligible for renewal. Currently, the hardcoded error message ...

javascripthtmlangulartypescriptvalidation

The styled component is not reflecting the specified theme

I have a suspicion that the CSS transition from my Theme is not being applied to a styled component wrapped in another function, but I can't pinpoint the exact reason. I obtained the Basic MUI Dashboard theme from this source and here. Initially, inte ...

cssreactjstypescriptmaterial-ui

Entering in full screen mode

Is there a way to create a first screen appearance that spans the entire screen? I want the whole page to be fullscreen and when someone scrolls down, it transitions to a new screen. I am struggling to find a solution for this. body { margin: 0 0 0 0; ...

htmlcss

Ensure that grid rows occupy the least amount of space possible

I'm relatively new to grid layout and I've encountered a challenge that has me stuck. Here's what I have so far: codepen And this is the relevant part of the grid: grid-template: 'img date' 'img head' 'img s ...

htmlcsscss-grid

php$json_data = json_decode($response);

I am brand new to PHP coming from a background in Python. I was fairly comfortable with retrieving JSON results from websites in Python, but for some reason, I can't seem to get it working in PHP. Here is the code snippet I'm using: <?php $ ...

phphtmljson

Prevent ui-select from being highlighted when clicked

here's a dilemma : (all in angular 1) I'm using a ui-select like this : https://i.stack.imgur.com/RzH2u.png Here's the code snippet : <div class="formZone-group"> <div class="mandatory-fl"> <div class="man ...

javascripthtmlcssangularjs

Error: The function 'check' is not defined and cannot be called when the 'on

My aim is to display the "expandrepeat" div when a specific select option is chosen. Unfortunately, the code below doesn't seem to be working as intended: <script> window.check=function(elem) { if (elem.selectedIndex == 1) { documen ...

javascripthtmlvue.js

Tips for choosing a particular list item using jQuery: retrieve the attribute value of 'value' and showcase it on the webpage

I have a task that requires the following: Implement an event listener so that when you click on any list item, the value of its "value" attribute will be shown next to this line. In my HTML, I have an ordered list with 8 list items. The values range fro ...

javascriptjqueryhtmljquery-selectorsjquery-events

What might be the reason for the border not reaching the bottom of the popup in my chrome extension?

I am currently working on a Chrome extension and using Bootstrap 5 with Sass to style its popup. However, I have encountered an issue where the border of the popup does not extend to the bottom as expected. What could be causing this problem? popup.html & ...

htmlcssgoogle-chrome-extensionsass

The requested resource at http://js:port/socket.io/1/ could not be located (Error 404

Having trouble connecting with Socket.io. This is the server-side code: function chatserver(){ var express = require('express'), app = express(), server = require('http').createServer(app).listen(app.get('port'),function ...

javascripthtmlnode.jssocket.io