Position the div at the bottom of the card-body in Bootstrap 4

I'm currently experimenting with Bootstrap cards and I have successfully implemented card headers and footers. In the card body, there is a card title that can span either one or two lines. Additionally, within the card body, there is some information contained in a div element. My goal is to align this informational div to the bottom of the card body. I have tried using the row/col classes to align elements neatly, but due to the varying line heights of the card titles, the additional information does not line up consistently across different cards on the page. Bottom-aligning the informational divs would address this inconsistency.

Essentially, I want the orangered divs to align at the bottom of their respective cards so that visually, they appear aligned across all cards.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<style>
  .box {
    position: relative;
    display: inline-block;
    width: 340px;
    height: 300px;
    background-color: #fff;
    border-radius: 5px;
  }
  
  .box:hover {
    /*-webkit-transform: scale(1.10, 1.10);
    transform: scale(1.10, 1.10);*/
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
  }
</style>

<div class="container" style="margin-top: 25px;">
  <div class="row">
    <div class="col">

      <div class="box" style="margin-right: 30px; margin-bottom: 30px;">
        <div class="card" style="width: 100%; height: 100%;">

          <!-- CARD HEADER -->
          <div class="card-header" style="margin: 0px;">
Header Content
          </div>

          <!-- CARD BODY -->
          <div class="card-body" style="cursor: pointer;">
            <div class="row">
              <div class="col">
                <h6 class="card-title">This title spans 1 line</h6>
              </div>
            </div>

            <div class="container" style="background-color: orangered">
              <div class="row">
                <div class="col-4">
                  Starts On:
                </div>
                <div class="col">
                  1/1/2019
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  Ends On:
                </div>
                <div class="col">
                  12/31/2019
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  #:
                </div>
                <div class="col">
                  52
                </div>
              </div>
            </div>
          </div>

          <!-- CARD FOOTER -->
          <div class="card-footer">
Footer Content
          </div>

        </div>
      </div>

      <div class="box" style="margin-right: 30px; margin-bottom: 30px;">
        <div class="card" style="width: 100%; height: 100%;">

          <!-- CARD HEADER -->
          <div class="card-header" style="margin: 0px;">
            Header Content
          </div>

          <!-- CARD BODY -->
          <div class="card-body" style="cursor: pointer;">
            <div class="row">
              <div class="col">
                <h6 class="card-title">This is a longer description that spans 2 lines and causes alignment issues</h6>
              </div>
            </div>

            <div class="container" style="background-color: orangered">
              <div class="row">
                <div class="col-4">
                  Starts On:
                </div>
                <div class="col">
                  1/1/2020
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  Ends On:
                </div>
                <div class="col">
                  12/31/2020
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  #:
                </div>
                <div class="col">
                  10
                </div>
              </div>
            </div>
          </div>

          <!-- CARD FOOTER -->
          <div class="card-footer">
Footer Content Here
          </div>

        </div>
      </div>

    </div>
  </div>
</div>

javascripthtmlcssbootstrap-4

Answer №1

Here are the steps I took to achieve the desired outcome:

  • Added the CSS property position:absolute with 24% clearance from the bottom;
  • The container class was set to a width of 100%, causing the box to extend beyond the boundary;
  • The card-body class was styled with a 20px padding;
  • To refine the styling, I removed the 20px width from the 100% width inherited from the container.

Below is the complete snippet:

.box {
  position: relative;
  display: inline-block;
  width: 340px;
  height: 300px;
  background-color: #fff;
  border-radius: 5px;
}

.box:hover {
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}

.orangeRedClass {
  position: absolute;
  bottom: 24%;
  width: calc(100% - 40px) !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container" style="margin-top: 25px;">
  <div class="row">
    <div class="col">
      <div class="box" style="margin-right: 30px; margin-bottom: 30px;">
        <div class="card" style="width: 100%; height: 100%;">
          <div class="card-header" style="margin: 0px;">
            Header Stuff
          </div>
          <div class="card-body" style="cursor: pointer;">
            <div class="container orangeRedClass" style="background-color: orangered">
              <div class="row">
                <div class="col-4">
                  Starts On:
                </div>
                <div class="col">
                  1/1/2019
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  Ends On:
                </div>
                <div class="col">
                  12/31/2019
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  #:
                </div>
                <div class="col">
                  52
                </div>
              </div>
            </div>
          </div>
          <div class="card-footer">
            Footer stuff
          </div>
        </div>
      </div>

      <div class="box" style="margin-right: 30px; margin-bottom: 30px;">
        <div class="card" style="width: 100%; height: 100%;">
         
          <!-- Additional card content here -->

        </div>
      </div>
    </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 it possible to use the `fill` method to assign a value of type 'number' to a variable of type 'never'?

interface Itype { type: number; name?: string; } function makeEqualArrays(arr1: Itype[], arr2: Itype[]): void { arr2 = arr2.concat([].fill({ type: 2 }, len1 - len2)); } What is the reason for not being able to fill an array with an ob ...

javascripttypescript

Interactively retrieve data from a nested field in mongoDB

Querying my mongoDb is my current task, but I'm facing a challenge with creating a dynamic query. Each user has a different set of preferences, making it tricky to create a standardized query. dynamicArray = [ 'sample1', 'sample ...

javascriptnode.jsmongodbmongoose

Find all paragraphs with the CSS property "background-color" using JQuery

My task involves modifying the CSS of a paragraph tag that has a background color of #aaddff. The code I have written seems to be missing something, as the border is not appearing as expected. Should I use element.style or is there a different approach I ...

jquerycss

How to access a variable value in an HTML attribute using .NET

This is my first time using .NET and I appreciate your patience with my lack of experience. I am attempting to dynamically change the value of the class attribute in an HTML element based on certain conditions using if/else statements: @if (item.HasAir) ...

html.netasp.net-mvc

Enable the choice for Bootstrap collapse animation to be customized

Is there a way to allow users or admins on my website to decide whether or not Bootstrap 4 collapse elements should be animated? The concern is that when many elements are moved by the animation, it becomes less smooth. Therefore, it would be ideal to give ...

javascriptjquerycssbootstrap-4

Create compelling visual representations by utilizing Google charts to draw customized charts based on variable

I have been attempting to create a chart using Google Charts by passing some parameters to the function. I am trying to use these parameters to populate the data, but it doesn't seem to be working as expected. Is it possible to include parameters in t ...

javascriptchartsgoogle-visualization

Despite implementing componentDidMount, the setState function is failing to update an initialized array state property

I have checked out similar questions such as : Why isn't this.setState updating the state property? Issue with this.setState not updating state Understanding that setState operates asynchronously is key. This snippet showcases my code: import Rea ...

javascriptreactjsasynchronousfetchreact-lifecycle

Add numerous submit buttons within a form. Upon clicking on a button, the form should be submitted to a specific URL using AJAX

I have a form with two submit buttons: one labeled as "SUBMIT" and the other as "SCHEDULE NEXT ROUND". When a user clicks on the "SUBMIT" button, the form values should be stored in the database and redirect to the view page. If they click on the "SCHEDULE ...

javascriptjqueryajaxcodeigniter

Sending data between two HTML templates in Django

Currently working on a web project with Django, still learning the ropes of Django. I'm facing an issue that has me stumped: I need to retrieve user input from one HTML search box and show it on another HTML page. This is the code for my initial ...

htmldjangodjango-viewsdjango-formsdjango-templates

Methods for altering the color of a div using addEventListener

Why doesn't the color change when I click on the div with the class "round"? Also, how can I implement a color change onclick? var round = document.querySelector(".round"); round.addEventListener("click", function() { round.style.backgroundCol ...

javascripthtmlcss

Leveraging jQuery event listeners within a Javascript class initialization

Recently delving into OOP in JavaScript, I've been revamping some of my old code to make it more reusable. Instead of leaving them as inline scripts, I decided to encapsulate them within JavaScript classes. Here is an example of one of my classes: ...

javascriptjqueryclassoopjquery-events

Display/Modify HTML form

Looking for advice on how to create an interactive HTML form that displays data and allows users to edit it by clicking 'Edit' before submitting changes. Any suggestions on how to implement this functionality? ...

javascriptjqueryhtmlwebforms

Tips for making a range slider in react-native

Check out my range slider I'm having trouble with changing values by clicking on them. Is there a way to enable sliding the range slider instead? Thanks for any help. ...

javascriptreactjsreact-native

Navigating poorly structured HTML tables using jQuery code loops

I am currently working on a project that involves an HTML table generated by my client, and it seems like we are both in agreement not to change how the code is generated at this time. <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0> <TR HEIG ...

javascriptjqueryjsonsorting

How can I retrieve the height of a dynamically generated div in Angular and pass it to a sibling component?

My setup consists of a single parent component and 2 child components structured as follows: Parent-component.html <child-component-1 [id]="id"></child-component-1> <child-component-2></child-component-2> The child-compo ...

javascriptangulartypescripttwitter-bootstrapng-bootstrap

Utilize fixed values in type declaration

Strange Behavior of Typescript: export type MyType = 0 | 1 | 2; The above code snippet functions correctly. However, the following code snippet encounters an issue: export const ONE = 1; export const TWO = 2; export const THREE = 3; export type MyType = O ...

javascripttypescripttypesconstants

Center the navigation links within the navigation block

I am using the startbootstrap-small-business template and customizing it to fit my requirements. I have inserted a new logo which caused me to adjust the height of the navbar to approximately 120px. Now, my goal is to vertically align the links on the righ ...

htmlcsstwitter-bootstrap

"Customized Bootstrap button featuring a tooltip and modal, experiencing incorrect padding within the button group design

I encountered an issue with a button-group containing 2 buttons, each with a tooltip and a modal. Bootstrap recommends wrapping the buttons with spans to manage two "data-bs-toggle" attributes, which is what I initially did. While the functionality works ...

htmlcssbuttonbootstrap-5

Does moment/moment-timezone have a feature that allows for the conversion of a timezone name into a more easily comprehendible format?

Consider this example project where a timezone name needs to be converted to a more readable format. For instance: input: America/Los_Angeles output: America Los Angeles While "America/Los_Angeles" may seem human-readable, the requirement is to convert ...

javascriptangulartypescriptmomentjsmoment-timezone

Clicking on the modal button causes the code to run multiple times in JQuery and JavaScript

Hello, I'm experiencing an issue where the code inside a modal is being executed multiple times when the modal button is clicked. For example, if I click the modal button once, the code runs once; if I click it twice, the code runs twice, and so on. ...

javascripthtmljqueryasp.net-mvc