Tips for aligning Bootstrap card row to the bottom

I'm having trouble aligning the bottom rows of my Bootstrap cards. I tried using position: absolute;, but the text overlaps on smaller screens. In this scenario, the icons in the first and third card rows should line up when displayed side by side, but instead they are positioned directly below the content of the cards.

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

<div class="container-flex m-2">
    <ul class="row list-group list-group-horizontal align-items-stretch flex-wrap">
    
        
        <li class="list-group-item border-0">
            <div class="card h-100 justify-content-between">
                <div class="card-body">
                    <div class="card-text h-100">
                        <p>To start, keep your face forward while tilting your head sideways to bring your ears and shoulders closer together.</p>
                        <p class="text-secondary"mazu, kao wa shoumen o muita mama, mimi to kata o chikadukeru youni atama wo yoko ni taoshimasu.</p>
                        <p>First, turn your head sideways, with your face facing straight ahead, bringing your ears and shoulders closer together.</p>
                        <div/>
                    <div class="row">
                    <div class="col"><i class='fab fa-youtube pr-3' style='font-size:24px'></i><i class='fas fa-volume-up' style='font-size:24px'></i></div>
                    <div class="col text-right"><i class='far fa-trash-alt' style='font-size:24px'></i></div>
                </div>
                </div>
            </div>
        </li>

        <li class="list-group-item border-0">
            <div class="card h-100">
                <div class="card-body">
                    <div class="card-text">
                        <p>To start, keep your face forward while tilting your head sideways to bring your ears and shoulders closer together. Repeat it again for emphasis.</p>
                        <p class="text-secondary"mazu, kao wa shoumen o muita mama, mimi to kata o chikadukeru youni atama wo yoko ni taoshimasu.</p>
                        <p>First, turn your head sideways, with your face facing straight ahead, bringing your ears and shoulders closer together. Repeat it again for emphasis.</p>
                        <div/>
                    <div class="row">
                    <div class="col"><i class='fab fa-youtube pr-3' style='font-size:24px'></i><i class='fas fa-volume-up' style='font-size:24px'></i></div>
                    <div class="col text-right"><i class='far fa-trash-alt' style='font-size:24px'></i></div>
                </div>
                </div>
            </div>
        </li>
            
        <li class="list-group-item border-0">
            <div class="card h-100">
                <div class="card-body">
                    <div class="card-text">
                        <p>To start, keep your face forward while tilting your head sideways to bring your ears and shoulders closer together.</p>
                        <p class="text-secondary"mazu, kao wa shoumen o muita mama, mimi to kata o chikadukeru youni atama wo yoko ni taoshimasu.</p>
                        <p>First, turn your head sideways, with your face facing straight ahead, bringing your ears and shoulders closer together.</p>
                        <div/>
                    <div class="row">
                    <div class="col"><i class='fab fa-youtube pr-3' style='font-size:24px'></i><i class='fas fa-volume-up' style='font-size:24px'></i></div>
                    <div class="col text-right"><i class='far fa-trash-alt' style='font-size:24px'></i></div>
                </div>
                </div>
            </div>
        </li>
        
    </ul>
 </div>
</div>

CSS

.list-group-item {
    width: 95%;
    margin: 1% !important;
    padding: 0; !important;
}

@media (min-width: 576px) {
    .list-group-item {
    }
}

@media (min-width: 768px) {
    .list-group-item {
        width: 47%;
        margin: 5px 1% !important;
    }
}

@media (min-width: 992px) {
    .list-group-item {
        
        width: 31.333%;
        margin: 5px 1% !important;
    }
}

Thank you!

htmlcssbootstrap-4

Answer №1

make sure to add the classes d-flex flex-column to card-body and h-100 to card-text

.list-group-item {
    width: 95%;
    margin: 1% !important;
    padding: 0; !important;
}

@media (min-width: 576px) {
    .list-group-item {
    }
}

@media (min-width: 768px) {
    .list-group-item {
        width: 47%;
        margin: 5px 1% !important;
    }
}

@media (min-width: 992px) {
    .list-group-item {

        width: 31.333%;
        margin: 5px 1% !important;
    }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<div class="container-flex m-2">
    <ul class="row list-group list-group-horizontal align-items-stretch flex-wrap">

        <li class="list-group-item border-0">
            <div class="card h-100 justify-content-between">
                <div class="card-body  d-flex flex-column">
                    <div class="card-text h-100">
                        <p>Start by turning your head sideways, with your face facing you and bringing your ears and shoulders close together.</p>
                     <p class="text-secondary">mazu, kao wa shoumen o muita mama, mimi to kata o chikadukeru youni atama wo yoko ni taoshimasu.</p>
                        <p>First, turn your head sideways, with your face facing you and your ears and shoulders close together.</p>
                      </div>
                    <div class="row">
                    <div class="col"><i class='fab fa-youtube pr-3' style='font-size:24px'></i><i class='fas fa-volume-up' style='font-size:24px'></i></div>
                    <div class="col text-right"><i class='far fa-trash-alt' style='font-size:24px'></i></div>
                </div>
                </div>
            </div>
        </li>

        <li class="list-group-item border-0">
            <div class="card h-100">
                <div class="card-body d-flex flex-column">
                    <div class="card-text h-100">
                        <p>Start by turning your head sideways, with your face facing you and bringing your ears and shoulders close together.</p>
                        <p class="text-secondary">mazu, kao wa shoumen o muita mama, mimi to kata o chikadukeru youni atama wo yoko ni taoshimasu.</p>
                        <p>First, turn your head sideways, with your face facing you and your ears and shoulders close together.</p>
                     </div>
                    <div class="row">
                    <div class="col"><i class='fab fa-youtube pr-3' style='font-size:24px'></i><i class='fas fa-volume-up' style='font-size:24px'></i></div>
                    <div class="col text-right"><i class='far fa-trash-alt' style='font-size:24px'></i></div>
                </div>
                </div>
            </div>
        </li>
            
        <li class="list-group-item border-0">
            <div class="card h-100">
                <div class="card-body d-flex flex-column">
                    <div class="card-text h-100">
                        <p>Start by turning your head sideways, with your face facing you and bringing your ears and shoulders close together.</p>
                        <p class="text-secondary">mazu, kao wa shoumen o muita mama, mimi to kata o chikadukeru youni atama wo yoko ni taoshimasu.</p>
                        <p>First, turn your head sideways, with your face facing you and your ears and shoulders close together.</p>
                        </div>
                    <div class="row">
                    <div class="col"><i class='fab fa-youtube pr-3' style='font-size:24px'></i><i class='fas fa-volume-up' style='font-size:24px'></i></div>
                    <div class="col text-right"><i class='far fa-trash-alt' style='font-size:24px'></i></div>
                </div>
                </div>
            </div>
        </li>
        
    </ul>
 </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

Tips for creating SCSS shorthand for an Array value color within a property

I've got a SCSS file containing an array of color values. export const COLORS = { transparent: 'rgba(0,0,0,0)', primary: '#09596e', primary01: '#317D92', primary02: '#6BADBF', primary03: '#97C6D2& ...

htmlcssreactjssassscss-mixins

Learn how to effectively share an image using the Math.random function

Is there a way to display a random number of images on a webpage using JavaScript? Let's say we want to show X number of images, where X is a randomly generated number. For the sake of this example, let's set X to be 10. <input class="randomb ...

javascripthtml

Error in Ruby on Rails: View cannot locate the path for Collection routes

I have included a collection route with POST method in my routes file. resources: curated_items do collection do post 'duplicate' end end However, I am unable to locate the path for the 'duplicate' prefix in my view.v ...

htmlruby-on-railsrubyruby-on-rails-3ruby-on-rails-4

Stopping background content from scrolling while using position: fixed

Is there a way to prevent content from scrolling behind a fixed position element? Check out the demo here .navbar-default { background-color: #4c68f9; margin-bottom: 0; border: none; } .navbar-default.affix { background-color: #4762ed; margin ...

htmlcsscss-positionz-index

Increasing a variable within a string using Javascript while loop

Essentially, I am using a loop called .each to go through some data. For each item in the data set, a span class is appended to the DOM. $('.selected_cont').append('<span class="' + classes + '"></span>'); The va ...

javascriptjqueryhtml

Arranging React Bootstrap columns in a way that the column on the right appears above the column on the left

Is there a way to use React Bootstrap to create a layout with two columns side by side, and have the column on the right stack on top of the column on the left when the screen size is reduced? Check out the code snippet below: import "./styles.css&qu ...

cssreactjstwitter-bootstrapreact-bootstrapbootstrap-5

Creating an HTML table from a JSON file: Step-by-step guide

I am trying to create a code snippet that populates a table with data from specified .json files in the 'tracks' folder. The JSON file format looks like this: { "EndTime": "11:00", "Person": [ { ...

javascripthtmlnode.jsjsonwebpack

When a hyperlink is clicked, an image appears in the div

Can someone help me with a javascript method that can display an image in a div based on which href link is clicked? I've started writing some code, but I think it needs further development. <script type=" "> function changeImg(){ var ima ...

javascripthtmlcssimage

Troubleshooting: JQuery - Applying CSS to dynamically generated elements

I used JQuery to dynamically generate a table, but I'm having trouble applying CSS to the columns. You can see an example at this Codepen link here. Specifically, I need to set the width of the first column to 100px. Could someone please assist me wi ...

javascriptjqueryhtmlcss

Position the right div to float to the right with a dynamic width ahead of the left div in HTML to achieve

This particular challenge has proven to be quite difficult for me, and I have a feeling that I am overlooking something simple. My goal is to create a layout with a fixed-width left sidebar and a responsive variable-width content section on the right. Th ...

htmlcssresponsive-designcss-float

Converting PHP arrays into visually appealing HTML tables

Having trouble writing a code to generate a table using the provided PHP array named $associative_array1 array( 'Objective' => array(0 => 'Conversions', 1 => 'Lead Generation', ), 'Gender' => array(0 =&g ...

phphtmlarraysassociative-array

Collapse the accordion when opening another accordion that belongs to a different parent

I am currently working with an accordion setup that you can view here: https://jsfiddle.net/n4tmjaqd/1/ I am looking for guidance on how to modify the function so that when either tab 2 or tab 3 opens, tab 1 closes (and vice versa). Tab 1 has a different ...

javascripthtmlcssfunctionaccordion

Having trouble with your JavaScript slideshow?

I've encountered an issue while working on a simple JavaScript picture slideshow. Strangely, when I copy the code directly from the website where I learned it, it works perfectly fine. However, if I try to recreate the exact same code by hand, it does ...

javascripthtmlimagewebslideshow

Align two DIVs in the correct layout: One as a sidebar that remains fixed, and the other as an expanding element

I am currently working on a code snippet to build a basic website featuring two main sections: a sidebar and the main content: html, body { height: 100%; margin: 0; } .container { display: flex; flex-direction: row; height: 100%; } .sidebar { ...

javascripthtmlcss

Can we find a method to incorporate multicolored borders?

I currently have a td element with the following CSS styling: td { border-bottom: 3px solid aqua; } I want to be able to click on these cells and change their color, similar to the images linked below: https://i.sstatic.net/5DscU.png Is there a way ...

javascripthtmlcsshtml-table

Evaluation of HTML5 file upload functionality with unit testing

How can I perform JavaScript unit testing for file uploads using the HTML 5 File API? Let's consider the following code: <form method="POST" enctype="multipart/form-data"> <input type="file" id="fileselec ...

javascripthtml

Sticky sidebar that adjusts to viewport size in a responsive layout

When designing a CSS fluid layout, most divs utilize percentages to adjust based on the viewport size. However, I have a specific scenario where I need my sidebar to maintain a fixed position. For instance: <aside style="width:25%; float:left; positio ...

csscss-positionfluid-layout

What is the best way to transition a div from the top to the bottom in mobile view?

Currently, I am utilizing Bootstrap 4 framework; however, if it operates effectively on version 3, then it should work seamlessly on v4. Within a single column, I have incorporated 2 div elements as follows: <div class="row"> <div class="col ...

htmlcsstwitter-bootstrapbootstrap-4

Achieve a stunning visual effect by placing images behind the background using HTML and

I'm currently working on developing a webpage with a slideshow feature. I've decided that I want the transition between images in the slideshow to be a smooth fade effect, going from color to image to color. To achieve this, I have set up a backg ...

csshtmlimage

Substituting text within a file by iterating through a list of dictionary values

I have a challenge with replacing strings in my file. While everything works fine, I face an issue when the values in a dictionary are lists. Basically: I have 22 values in list3 and 22 declared value3 strings in HTML that I need to replace with each valu ...

pythonhtml