Positioning Div at the Bottom of a Interactive Flip Card Using Bootstrap 4

My current project features a creative flip image card created using bootstrap and js. On the back of the card, there is a title, a main text body, and a few small additional pieces of information. My goal is to have these three small bits of information aligned at the bottom of the card. I attempted to wrap them in a div and apply the class "align-self-end", but unfortunately, this did not produce the desired result.

Below is the html code for the card:


        <div class="card mb-4" style="max-width: 300px; min-width: 300px" data-clickable="true">
          <div class="card-inner">
            <img src="https://via.placeholder.com/1420x1933" class="card-img" alt="...">
            <div class="card-img-overlay">
              <h5 class="card-title">Card Title</h5>
              <p class="card-text info">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <div class="align-self-end">
                    <p class="card-text smallinfo"><b>1: </b>John</p>
                    <p class="card-text smallinfo"><b>2: </b>Smith</p>
                    <p class="card-text smallinfo"><b>3: </b>2008</p>
                </div>
            </div>
          </div>
        </div>

Check out the codepen link below to see the interactive flip card in action (Simply click the card to flip it): https://codepen.io/Darlton29/pen/wvKqyBN

I'm seeking assistance in positioning the three <p> tags inside the <div> element at the bottom of the card. Your help is greatly appreciated. Thank you.

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

I have made some modifications to your HTML structure and included additional CSS styling to achieve the desired outcome

<div class="container">
    <h2 style="margin-bottom: 3rem; margin-top: 1rem;">Align right in Bootstrap 4</h2>
    <div class="card mb-4" style="max-width: 300px; min-width: 300px" data-clickable="true">
        <div class="card-inner">
            <img src="https://via.placeholder.com/1420x1933" class="card-img" alt="...">
            <div class="card-img-overlay">
                <div class="cardContent">
                    <h5 class="card-title">Card Title</h5>
                    <p class="card-text info">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                </div>
                <div class="alignToEnd">
                    <p class="smallinfo"><b>1: </b>John</p>
                    <p class="smallinfo"><b>2: </b>Smith</p>
                    <p class="smallinfo"><b>3: </b>2008</p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .card{
        width: 300px;
        min-height: 408px;
        -webkit-perspective: 1000px;
        perspective: 1000px;
        border: 0px;
        background-color: #fff;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.0), 0 15px 40px rgba(0, 0, 0, 0.0);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.0), 0 15px 40px rgba(0, 0, 0, 0.0);
    }
    .card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: left;
        -webkit-transition: -webkit-transform 0.6s;
        transition: -webkit-transform 0.6s;
        -o-transition: transform 0.6s;
        transition: transform 0.6s;
        transition: transform 0.6s, -webkit-transform 0.6s;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .card-title {
        text-align: center;
        font-size: 1.7rem;
    }
    .info{
        font-size: 0.9rem;
    }
    .isbn {
        text-align: left;
    }
    .card.active .card-inner {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    .card img, .card-img-overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        top:0;left:0;right:0;
    }
    .card-img-overlay {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        background:#444c43;
        color:white;
        position:relative;
    }
    .cardContent {
        padding-bottom:60px;
    }
    .alignToEnd {
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center;
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center;
    }
    .alignToEnd > * {
        width: 100%;
        dispaly:flex;
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center;
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center;
        text-align:center;
    }
</style>

Answer №2

Great job on enclosing it with the .

Just include this snippet of css code.

.align-self-end {position:absolute;bottom:0}

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

Retrieving the current value of the selected option using JQuery

I am working on a feature where I have different quantities in selects after each button click. <button type="button" class="btn btn-sm btn-primary" id="addtocart2" >Button1</button> <select id="quantity1" class="ml- ...

javascriptjqueryhtml

What is causing my column's content to be lacking padding on the left side and having excessive padding on the right side?

Edit: Here's the link to the codepen https://codepen.io/maptik/pen/bGKMgpJ In my React project, I'm utilizing Bootstrap to display cards for each "Product". Here is a snippet of how I am rendering it: <div className="container bg-color- ...

htmlcssreactjsfrontend

Alter the backdrop of this email template

I'm struggling to replace the blue and grey background of my email template with an image. Any suggestions on how I can achieve this? Here is the Html Code link for reference I attempted to modify the body tag, but it didn't result in any chang ...

htmlcsshtml-email

What is the best way to wrap Bootstrap 5 columns according to the text inside them?

When using Bootstrap 5, is there a way for Bootstrap to arrange two rows with one column each if the text in one cell is wrapped and contains "My text" or "My other text"? <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi ...

csstwitter-bootstrapbootstrap-5

Expanding jQuery menu that reveals a submenu if the current page is located within that specific submenu item

Currently, I am trying to enhance the functionality of this menu: http://jsfiddle.net/tz37m/1/ so that it works seamlessly across the entire website. My goal is to ensure that when a visitor is on a page within a submenu, that specific submenu remains open ...

jqueryhtml

Is it possible to alter the HTML structure using JavaScript?

Looking to shift the positions of 2 divs using JavaScript DOM manipulation, all without altering the HTML. <div class="div1"> this should move downwards</div> <div class="div2"> while this should move upwards</div&g ...

javascripthtmldom

Guide on generating a child element in a React application using server response

I have developed a react application with multiple nested routes. One of the nested routes utilizes a backend API that returns complete HTML content. My goal is to display this HTML content with the same styling in my UI without directly manipulating the ...

htmlreactjsreact-dom

Error in HTML: The AgGrid component is missing the required 'col' attribute

Initially, I worked with the 2.3.5 version of Ag-Grid which had a "col" attribute showing the relative index of the column for each cell element. The "row" attribute still remains unchanged. However, after upgrading to version 4.0.5, the "col" attribute ...

htmlangularjsag-grid

Stylish Material Design Icons

Our website utilizes CSS classes to display icons across various pages. .alert { /* used for "alert" type messages */ background: url(images/alerts.png) no-repeat left top; padding: 5px 0 15px 35px; margin: 0; } Use: <p id="ctl00_ctl00_ContentMessagePa ...

cssmaterial-ui

Set the div element to be horizontally aligned

Is there a way to make this display horizontally instead of vertically, from left to right rather than top to bottom? I attempted using display:flex but only the extra-text class is affected and not the outer div. https://i.stack.imgur.com/2DNoC.png .m ...

htmlcss

Navigate through the items in my subnavbar by scrolling the content

HTML Code <div id="subnavigation"> <?php $verbindung = mysql_connect("host", "user" , "pw") or die("Verbindung zur Datenbank konnte nicht hergestellt werden"); mysql_select_db("db") or die ("Datenbank konnte nicht ausgewählt w ...

phpjqueryhtmlcss

Validating the userid with jQuery before form submission

Currently, I am working on a form where I need to validate if the userID is already in use before allowing the user to submit it. After some research, I came across a solution on another website. However, when I tried to implement the code, I encountered ...

javascriptjqueryajax

The relationship between the size attribute in HTML and CSS styling based on element size

On one of my pages, there is an input field that looks like this: <input type="text" size="20" name="whatever" /> I would like to keep the size attribute for the input field instead of using CSS. Now, I want to add a select box to the same form wit ...

htmlcss

Using JavaScript to create a search bar: Can "no results found" only show after the user has completed typing their search query?

How can I ensure that the "no match" message only appears after the user has finished typing in their search query, rather than seeing it while they are still typing "De" and the list displays "Demi"? usernameInput.addEventListener("keyup",function(){ ...

javascripthtmlcssdom-eventsdisplay

What are the steps to integrate mailjet into my Vue application?

I am looking to utilize mailjet for my contact form. I have installed it using "$ yarn add node-mailjet" and followed the steps provided. However, I am a bit confused about whether I am integrating mailjet correctly. Below is the code I am currently using: ...

javascriptvue.jsmailjet

The issue of Bootstrap dynamic tabs retaining their active state even after switching tabs, leading to elements being stacked

For my university project, I am developing a website that resembles a text editor using Bootstrap as the framework. To create the website menus, dynamic tabs have been utilized. The following is the code snippet I have implemented: <!--Bootstrap ...

javascripthtmlcssbootstrap-5

Struggling to pass express.js router requests and responses to a class method

I am struggling with setting up an Express JS router. I am facing difficulty passing req and res to my class method. Not Working app.get('/', controller.index) Working app.get('/', (res,req) => controller.index(req,res) The routi ...

javascriptexpressbabeljses6-class

Encountering a problem when trying to utilize material-ui icons in a React application

After installing the Material-UI core and icons packages using npm install @material-ui/core and npm install @material-ui/icons in my React app, I tried to use the FileUploadIcon. Here's how I imported it: import { FileUploadIcon } from '@materia ...

javascriptreactjsmaterial-ui

The functionality of the `next-auth` signOut button click does not seem to accept a variable as input, although

The Nav.jsx component code provided is working as intended. In this implementation, clicking the 'Sign Out' button will redirect the application to http://localhost:3000. 'use client' import { signOut } from 'next-auth/react&apos ...

javascriptreactjsnext.jsnext-auth

Display <video> component using Angular 2

When attempting to display videos sourced from an API link, I encountered a problem where only the player was visible without the actual video content. The navigation controls of the player were also unresponsive. Interestingly, when manually inputting the ...

htmlangulartypescriptvideoproperties