Positioning a content item at the bottom of a flexible card, while also ensuring it is vertically centered

I am having trouble aligning a Font Awesome icon to the end of a card that resizes responsively. This is the HTML code for my card:

<div class="card mt-4 mycard">
    <a href="#" style="text-decoration: none; color: inherit">
        <div class="card-body">
            <h4 class="card-title">Card Title</h4>
            <p class="card-text">Description of card, chevron should be at the end of the card, vertically centred even when card width increases</p>
            <i class="fas fa-chevron-right fa-3x align-self-center"></i>
        </div>
    </a>
</div>

The alignment of the chevron is not behaving as desired. Any suggestions on how to fix this issue would be greatly appreciated. Thank you.

Here is an illustration of the desired outcome: https://i.sstatic.net/wO62z.jpg

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

One effective method to achieve this is by making a slight alteration to the HTML structure, moving the icon outside of the car-body div.

<div class="container">
    <h2 style="margin-bottom: 3rem; margin-top: 1rem;">Align right in Bootstrap 4</h2>
    <div class="card mt-4 mycard">
        <a href="#" style="text-decoration: none; color: inherit">
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Description of card, chevron should be at the end of the card, vertically centred even when card width Description of card, chevron should be at the end of the card, vertically centred even when card width increases</p>
            </div>
            
        </a>
            <i class="fas fa-chevron-right fa-3x align-self-center"></i>
    </div>
</div>

CSS

<style>
    i {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translate(0,-50%);
    }
    .card-body {
        padding-right: 50px;
    }
</style>

Answer №2

UPDATE!

Add absolute positioning, set top to 50% and adjust Y position to -50% to accommodate the height of the icon

.mycard {
  flex-direction: row!important;
}


/*the solution attempted here does not seem to be effective*/

.chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
<div class="container">
  <h2 style="margin-bottom: 3rem; margin-top: 1rem;">Aligning Right in Bootstrap 4</h2>
  <div class="card mt-4 mycard">
    <a href="#" style="text-decoration: none; color: inherit">
      <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">Description of the card, chevron should be at the end of the card, vertically centered even when the width of the card increases</p>
        <i class="fas chevron fa-chevron-right fa-3x align-self-center"></i>
      </div>
    </a>
  </div>
</div>

Answer №3

To position it at the end, you can utilize margin-left: 100%:

.mycard {
  flex-direction: row!important;
}

.fa-chevron-right {
  margin-left: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="container">
  <h2 style="margin-bottom: 3rem; margin-top: 1rem;">Align right in Bootstrap 4</h2>
  <div class="card mt-4 mycard">
    <a href="#" style="text-decoration: none; color: inherit">
      <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">Description of card, chevron should be at the end of the card, vertically centred even when card width increases</p>
        <i class="fas fa-chevron-right fa-3x align-self-center"></i>
      </div>
    </a>
  </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

How come my justify-content property isn't functioning properly with Flexbox?

I've been racking my brain trying to solve this. The goal is to have all the boxes neatly grouped together, but for some reason there's a massive gap between the main content and footer. Could someone lend a hand? CSS Below is the CSS code rele ...

htmlcssflexbox

Attempting to set up Prettier in my VSCode environment

I've been delving into JavaScript with the guidance of "Morten Rand-Hendriksen" on LinkedIn Learning. The instructor emphasized the importance of installing "Prettier" in our VSCode environment. Following his instructions, I headed to the "Extensions" ...

javascriptnode.jsnpm

Exploring the different types of form elements in HTML5 with Zend

Is there a straightforward method to incorporate HTML5 Form elements into a Zend Form? Using createElement('tel','phone'); doesn't seem to be effective since Zend doesn't currently support HTML5 form elements. It's also n ...

htmlzend-form

"Encountering a blank page in React Router when transitioning between separate projects

I've come across some discussions about a similar issue like this one, but I haven't been able to resolve my problem. In my initial project, I can smoothly navigate between its pages. However, when I created a second project hosted in a subdirec ...

javascriptreactjstypescriptreact-router-dom

Determine whether the user has scrolled past a specific threshold

Is there a way to display the button with the id backtotop only when the user has scrolled more than 250 pixels? This is my code: <template> <div> <button v-if="checkScroll" class="goTop" @click="backToT ...

javascriptvue.js

Pull data from another domain's DIV using jQuery's load/ajax function

I need to load content from a different domain into a DIV on my JSP page. For example: $("#myDiv").load("https://www.google.com") The issue I'm facing is that the request is being blocked by the browser's same origin policy. I've explore ...

javascriptjqueryajaxjspcross-domain

A comprehensive method in JavaScript to determine if a variable is defined

There was a moment when I recall stumbling upon a code snippet that utilized a javascript library, possibly lodash, to perform a comprehensive check for the existence of a certain element. For instance: someLib.isDefined(anObject.aNestedObject.anotherNes ...

javascripttypescript

Utilizing a JavaScript variable within a jQuery function as an attribute

var image = "path.png"; Is it possible to include the 'image' variable in the jQuery function like this? $('#mapfoto').prepend('<img id="theImg" src="http://path.gr/" + image />'); ...

javascriptjqueryhtml

How to display (fade in a portion of an image) using .SVG

I have the following code in my DOM: <div class="icon-animated"><img src="icon_non_active.svg" id="icon_non_active"></div> There are two icons (.svg) available: icon_non_active & icon_active Can I animate the transformation from i ...

javascripthtmlcsssvg

What is causing my jQuery to only impact the initial item in my iron-list?

How can I create a toggle effect for the left border of an iron-list entry in Polymer when clicking on it? I found some jQuery code that adds the border to the first entry clicked, but I need help extending this functionality to apply to all list entries ...

jqueryhtmlcsspolymer

Creating subtle shadows for glb models in Three JS while maintaining soft lighting

Seeking advice on implementing proper lighting in my three.js project. I am new to working with 3D models and currently struggling to achieve the desired lighting effects. The image linked below illustrates what I aim to accomplish: https://i.sstatic.net/ ...

javascriptthree.jslightinggltf

Linking various nodes together using the capabilities of the Web Audio API

I am experimenting with audio and trying to achieve a few specific goals: Adjust the overall volume of the audio. Modify the volume and delay of a particular channel (left). This is the code I have been working on: var audioContext = window.AudioContex ...

javascripthtmlweb-audio-api

Instructions for deleting a class from the body with jQuery while incorporating AngularJS

When using jQuery $(document).ready(function() { $("#pid1").removeClass("login_page"); }); HTML <body class="login_page" id="pid1" ng-app="myApp" ng-controller="myCtrl"> On the main page, a class is removed, but on the login page I want to ...

javascriptjqueryangularjs

Incorporating font options for a PDF generator package within the Symfony framework

I'm currently working on a Symfony project where I need to export PDF code that includes images and text stored in the database. Since I can't install anything on the web servers, I've opted for using the Spread PDF Generator Bundle instead ...

phpcsssymfonypdffonts

The precise placement of DIVs with a background image

Is there a way to properly position DIVs on top of a background image without them shifting when the screen size changes? Media Query hasn't been successful for me. Any suggestions? Here is my code: <div class="div-bg" style="background-image:url ...

htmlcss

Flow of logic for AngularJS ns-show

Being a newcomer to angularjs, I am exploring ways to display an html element based on a property of the $scope object without utilizing any form element. Here is the code snippet: <div id="ListApp"> <div ng-controller="ListCtrl"> ...

javascriptangularjsangularjs-scopeng-show

How can I implement a loop using .then in JavaScript?

Looking to understand the .then concept in JavaScript, I am curious if it is feasible to generate a series of .then's using a for loop. request.send(myRequest) .then(r => console.log(r, 0)) .then(r => console.log(r, 1)) .then(r => ...

javascriptasynchronous

Struggling with developing a straightforward application with Angular-Material

My goal is to develop an application that utilizes the Angular Material navigation bar, as showcased in this example. Being relatively new to AngularJS, I'm facing an issue where my app loads but only displays a blank page. Below is the code snippet ...

javascripthtmlangularjstwitter-bootstrapangular-material

AngularJS: Issue with Select Click Trigger Not Fired

I am puzzled as to why this code isn't working on Chrome but works perfectly fine on FireFox SelectModel selectModel: [ { value: "asc", htmlText : "A-Z", selected: "" }, ...

javascriptangularjsgoogle-chrome

What is the best way to eliminate the final border in a row that has been applied using the <

I have a table where the tr is styled with a border. I am looking to eliminate the border from the last td in the tr. Here is an example: <table> <thead> <tr> <th>a</th> <th>b</th> <th&g ...

htmlcss