What is the best way to position elements on a bootstrap card?

Welcome to my first post!

I'm currently experimenting with Bootstrap 5 to create some stylish cards.

One of the challenges I'm facing is achieving uniform width and height for all the cards.

Specifically, I want all my cards aligned based on a h6 division within the card body.

I've tried different flexbox classes from the Bootstrap documentation, but so far, no luck.

Here's an example of what I'm aiming for

Below is a snippet of my code:

<div class="row row-cols-1 row-cols-lg-2 g-4">
            <div class="col mb-4">

                <div class="card h-100">
                    <img src="......" alt="..." class="card-img-top">
                    <div class="card-body">
                        <div class="card-text h-auto">
                            <p><span class="fs-5">Alisa </span>lorem ipsum dolor sit amet, consectetur adipisicing el
                            lorem du<br>
                            Lorem ipsum dolor sit amet, consectetuer adipis.<br>
                            ... (content continues)
                           Lorem ipsdum dsdhrd grshbsdx ezgsygrs... <span><a href="...">[more]</a></span>
                            </p>
                        </div>

                        <div class="border-0">
                            <h6 class="p-2 rounded mt-2">Books</h6>

                            // More content here

                        </div>
                    </div>
                    <div class="card-footer">
                        <p class="mb-0"><span>Lorem ipsum</span> : Lorem ipsum dolor sit amet, consectetur adip. 
                            Lorem
                            ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit.
                        </p>
                    </div>
                </div>

            </div>

            <div class="col mb-4">

                <div class="card h-100">
                    <img src="......" alt="..." class="card-img-top">
                    <div class="card-body">
                        <div class="card-text h-auto">
                            <p><span class="fs-5">Alisa </span>lorem ipsum dolor sit amet, consectetur adipisicing el
                            lorem du<br>
                            ... (content continues)
                            Lorem ipsdum dsdhrd grshbsdx ezgsygrs... <span><a href="...">[more]</a></span>
                            </p>
                        </div>

                        <div class="border-0">
                            <h6 class="p-2 rounded mt-2">Books</h6>

                            // More content here

                        </div>
                    </div>
                    <div class="card-footer">
                        <p class="mb-0"><span>Lorem ipsum</span> : Lorem ipsum dolor sit amet, consectetur adip. 
                        Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit.
                        </p>
                    </div>
                </div>
        
            </div>
        </div>
cssbootstrap-5

Answer №1

Here is the solution...

1. Modify HTML:

  • Include d-flex flex-column in the 
    <div class="card-body">
    .
  • Add mt-auto to the <div id="books">.

By doing this, all book lists will be positioned at the bottom within the card body.

2. Integrate JavaScript:

If you want all book lists to have the same height (equal to the tallest one), you should identify the tallest list and adjust the heights accordingly. Refer to the JavaScript snippet below for guidance.

See the code segment provided below.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>

<body>
  <div class="row row-cols-1 row-cols-lg-2 g-4">
    <div class="col mb-4">
      <div class="card h-100">
        <img src="......" alt="..." class="card-img-top" />
        <div class="card-body d-flex flex-column">
          <div class="card-text" id="text">
            <p>
              <span class="fs-5">Alisa </span>random placeholder text.<br /> More random text... <span><a href="...">[more]</a></span>
            </p>
          </div>

          <div class="border-0 mt-auto height-1" id="books">
            <h6 class="p-2 rounded mt-2">Books</h6>

            <div class="d-flex p-2 bd-highlight">
              <div class="col-10">We, the Living</div>
              <div class="col-2"><a href="..." download>pdf</a></div>
            </div>
            <!-- Additional book list items may go here -->
          </div>
        </div>
        <div class="card-footer">
          <p class="mb-0">
            <span>Lorem ipsum</span> : Some more Lorem ipsum text.
          </p>
        </div>
      </div>
    </div>

    <!-- Second card content goes here with similar structure as above -->

  </div>

  <script>
    let myArray = [];

    /* Obtain height of each "books" div */
    let box1 = document.querySelector(".height-1");
    let height1 = box1.offsetHeight;

    /* Identify the highest list */
    /* Example included for additional lists - Update your code accordingly! */

    /* Append heights to array */
    myArray.push(height1);

    /* Find the maximum height value */
    let highestValue = Math.max(...myArray);

    /* Set equal heights for all "books" div elements */
    document.querySelector(".height-1").style.height = highestValue + "px";
    
    /* Add similar logic for other list elements if needed */

  </script>
</body>

</html>

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

Utilizing display: flex for creating table padding

Hey there! I'm currently working on a webpage layout that includes a logo and a table. To achieve this, I've used display flex for the wrapper element. However, I've noticed that when viewing the page on mobile devices, the padding of the ta ...

htmlcssflexboxpadding

What is the best way to incorporate an animation into my text bubble? Specifically for a Twitch Alert, such as a bits alert

I'm attempting to customize my Twitch Alert in Streamlabs using code. Is there a way to incorporate animation into the text balloon? I've looked for tutorials or guides but haven't had any luck, so I could use some guidance. CSS #alert-use ...

htmlcsscss-animations

How can I disable the background color in Chrome autocomplete? Is there a way to make the background

There's a form on my website where the autocomplete feature shows a blue background color. The form itself has a semi-transparent white background. I managed to change the autofill color to white using this CSS property: -webkit-box-shadow: 0 ...

htmlcssgoogle-chromeautofill

Steps to creating a popup within an HTML page from another HTML page

I recently started learning JavaScript. I have a link on my homepage that directs to another HTML page, but I would like it to show as a popup on the homepage with responsiveness and some stylish design elements such as a folded corner. Is there a way to a ...

javascriptjqueryhtmlcss

Using AngularJS to Retrieve a Specific DOM Element Using its Unique Identifier

Example Please take a look at this Plunkr example. Requirement I am looking for a way to retrieve an element by its id. The provided code should be capable of applying a CSS class to any existing DOM element within the current view. This functionality ...

javascriptcssangularjsdom

Fixing a dropdown menu with multiple levels

I am attempting to create a dropdown menu with multiple levels. However, when I hover over the first level, the second level appears slightly above and to the left of the first level. I want the second level to appear directly below the first level in the ...

htmlcssstylus

Implementing functionality: Removing a row and applying a CSS class upon button click

Check out the fiddle below: https://jsfiddle.net/shaswatatripathy/enq0kfqL/2/ I need help with creating a remove function and adding a CSS class to a clicked row. 1. When I click on "remove", the clicked row should be deleted. When I click on a row, ...

javascriptjqueryhtmlcss

Profile picture placeholder with conditional logic

After extensively searching online, I was unable to find a solution on how to add a default profile picture. Here is the code snippet I used for uploading an image chosen by the user: <td><img class="image" src="image/<?php echo $contact[&apos ...

phphtmlcsssql

Unable to assign a height of 100% to the tr element or a width of 100% to the

While inspecting the elements, I noticed the presence of <tbody>, within which <tr> is nested. The issue arises when the tbody element has 100% height and width as intended, but <tr> always falls short by 4 pixels in height even when styl ...

htmlcss

Creating an indentation on one side of a div using CSS for a visually appealing effect

https://i.stack.imgur.com/io6m0.jpg I'm in the process of trying to create two shapes using CSS. I've been able to almost achieve the first shape on the left, but it extends out too far. As for the second shape, I'm having difficulties cre ...

csscss-animationscss-shapes

The text is not rendering properly, with some characters being replaced by different ones

RESOLUTION: To fix the issue, eliminate font-family, font-size, and color properties from the parent div. UPDATE: The problem only occurs when I press CTRL + F5. UPDATE 2: After investigating, I found that the culprit is .site-footer with a position:abso ...

htmlcsswordpresstextvisual-glitch

Tips on creating a keypress function for a div element with the contenteditable attribute

Hey there, I have managed to create a textarea within a div by using -webkit-appearance. However, I am currently struggling to add an event to this div on key press. I have been trying my best to figure it out but seem to be missing something. If you coul ...

javascriptphpjqueryhtmlcss

Revise website design to adjust dynamically according to screen dimensions

Currently, I am working on a school project with a website created by former students. Unfortunately, I have limited knowledge of HTML and CSS which has made it challenging for me to ensure the site is mobile-friendly. There are issues such as text overflo ...

htmlcssiframeresponsive-design

Make changes to external CSS using HTML and JavaScript

Is it possible to dynamically change the value of a background in an external CSS file using JavaScript? Currently, all my pages are connected to a CSS file that controls the background for each page. I am attempting to modify the background by clicking a ...

javascripthtmlcssexternal

Ways to reduce the size of a Select box when the option text is too lengthy

How can I reduce the size of the select box by splitting the lines of the options I attempted to modify the CSS with: select { width:100px; } However, only the select element was affected. The options remained the same size. My goal is to have ...

htmlcss

There seems to be a problem with how the navbar is being displayed in ResponsiveSlides.js

I am currently using WordPress, but I have come here seeking help with a jQuery/CSS issue. I am utilizing responsiveSlides.js to create a simple slideshow, however, when viewing it here at gallery link, it appears that something is not quite right. STEPS: ...

javascriptjqueryhtmlcsswordpress

Would you like to justify to the right?

I am attempting to align the final element in a list to the right side: <ul> <li>one</li> <li>two</li> <li>three</li> <li id="right">right?</li> </ul> li { display: inline-bl ...

htmlcsstext-align

Merge adjacent CSS blocks seamlessly without the need for JavaScript

I am facing an issue with styling div elements that have editable content through a WYSIWYG inline editor on my website. Users often do not understand the importance of enclosing similar blocks of code in containing DIVs for proper formatting, resulting in ...

htmlcsscss-selectors

How can I create a webpage that is fully responsive to both width and height, with text that automatically scales to fit the

I am currently using Bootstrap and Angular to develop a single-screen webpage tailored for small screens such as the Adafruit 2.2" or 2.8" screen for the Raspberry Pi, or mobile phone displays. I aim to make all content (specifically about 3-4 rows of a ta ...

jqueryhtmlcss

jQuery offset(coords) behaves inconsistently when called multiple times

I am attempting to position a div using the jQuery offset() function. The goal is to have it placed at a fixed offset from another element within the DOM. This is taking place in a complex environment with nested divs. What's puzzling is that when I ...

javascriptjquerycss