Center the content within bootstrap-cards

Looking at the image, it's clear that the last line of text is not on the same alignment as the other bootstrap-cards. This seems to be influenced by the length of the upper text.

How can I make sure that all three main parts are always aligned, regardless of the text length? And what if the title spans multiple lines in an extreme case?

Below is the code for just one card:

<div class='col-lg-4' style='cursor: pointer; padding-bottom: 15px;'>
    <div style='height: 377.59px;' class='card mb-3' style='border: 1px solid #33cdc6;'>
        <img style='height:185.59px; width: 100%;' class='card-img-top' src='#' alt='Card image cap'>
        <div class='card-body'>
            <h5 class='card-title' style='color: #293a44;'>TITOLO</h5>
            <p class='card-text'>Breve descrizione</p>
            <p class='card-text'>
                <span class='h5 text-muted'>Montepremi</span>";
                <small style='padding-left: 125px;' class='text-muted'>data</small>
            </p>
        </div>
    </div>
</div>

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

htmlcssbootstrap-4

Answer №1

If you want your elements to align in a card, you have a couple of options. You can adjust the CSS Flexbox on the card itself, or utilize Bootstrap's card-footer class to position content at the bottom. From there, you have the flexibility to customize the appearance by modifying the CSS properties on the card footer.

<div class='col-lg-4' style='cursor: pointer; padding-bottom: 15px;'>
<div style='height: 377.59px;' class='card mb-3' style='border: 1px solid #33cdc6;'>
    <img style='height:185.59px; width: 100%;' class='card-img-top' src='#' alt='Card image cap'>
    <div class='card-body'>
        <h5 class='card-title' style='color: #293a44;'>TITLE</h5>
        <p class='card-text'>Short description</p>
        <p class='card-text'>
            <span class='h5 text-muted'>Prize</span>";
            <small style='padding-left: 125px;' class='text-muted'>date</small>
        </p>
    </div>
    <div class="card-footer">
        Footer Text here
    </div>
</div>

In my opinion, this method is the simplest approach.

Alternatively, the flexbox technique involves setting the card-body as display: flex in CSS. Ensure that the flex-direction is set to column and justify-content to space-between for proper alignment.

Note: The Bootstrap 4 card component is inherently displayed as flex, so the card-body functions as a flex item. Adjustments may be necessary to avoid conflicts. Feel free to experiment with different configurations.

For more insights on flexbox techniques, click here.

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

What is the best way to transfer my saved bookmarks and import them into a database?

Over the years, I've amassed a large collection of bookmarks that I now want to organize in a searchable table with additional details like categories, types, and descriptions. My initial approach involved manually inputting them into a JSON file and ...

htmljsoncsvdatatablesbookmarks

Calculate the total price using Jquery once selections have been made

I am looking to create a dynamic pricing feature where clicking on a checkbox will update the total price. The prices are calculated per day, so if days are added, the total should reflect that accordingly. Check out our demo here: http://jsfiddle.net/XqU ...

jqueryhtml

"The JavaScript code included in the index.html file is not functioning as expected when called in the main.js file within a

Here is the index.html code for a simple VueJS app that includes a widget from netvibes.com. The widget code is added in the html file and functioning properly. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC " ...

javascripthtmlvue.jsjspwidget

Steps for displaying a loading image during the rendering of a drop-down list (but not during data loading):

Using jQuery's autocomplete combobox with a large dataset of around 1,000 items. The data loads smoothly from the server, but there is a delay when expanding the drop-down list to render on screen. Is there a way to capture the initial click event on ...

javascriptjqueryhtmldrop-down-menuautocomplete

How to create a CSS animation that gradually darkens a background image during a

Currently in the process of constructing a page with an intriguing background image: body { background:url(images/bg.png) center center no-repeat fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; ...

javascriptjquerycsscss-animations

Tips for allowing a position:absolute <div> to expand as though it were containing a lengthy <p>innerText

This div automatically adjusts its width to fit the content inside, even if it extends beyond the page boundaries. Is there a way to make this div expand to fill the entire width of the page without needing a paragraph? <div style="position:absolute;le ...

htmlcsswidthcss-position

When the CSS style sheet is not embedded within the HTML document, it fails

I'm facing an issue while trying to apply currency formatting to an HTML table in order to have it display correctly when opened in Excel. Initially, I tried doing this inline and it worked fine, like so: <td style="mso-number-format:$\##&bso ...

cssexcel

Could it be an issue with the recording of Flutter HTML responses? Perhaps it has something to do with variable types

So, here's a head-scratcher... I've got the server response in hand, but it seems like different parts of my code just aren't cooperating when it comes to sharing that information. void setNumber(String password) async { info = await getH ...

htmllistflutter

Show the layout of the table in a visual format

I am struggling to showcase a table created using <ul> tags. I want the content to be displayed one after the other. Here is my code: CSS .activity-list-header > li { display: inline-block; text-align: left; width: 15.666%; list- ...

jqueryhtmlangularjscss

When scrolling, apply a CSS class to a div element once it becomes visible on the

I'm in the process of developing a timeline feature for my website, and I am facing an issue where the addClass function is being applied to all sections, even those that are not currently visible on the screen during scrolling. If you would like to ...

javascriptjqueryhtmlcss

Styling tables within HTML emails for Gmail and then utilizing PHPMailer to send the emails

I've been racking my brain over this for hours with no luck! Objective: Implementing inline styles for table, td, th, p elements in an HTML email intended for Gmail using PHPMailer. Challenge: Inline styles not being rendered HTML Snippet: <sec ...

javascriptphphtmlcssemail

Submitting the form without clicking the submit button

I am working on creating a pagination feature where users can input a page number in a text field within a form. The form should be submitted either when the user presses enter or moves the cursor out of the text field. <form method="GET" action="/site ...

htmlformssend

Using JavaScript to change text contained within an HTML element into a separate HTML element

Can JavaScript or JQuery make this transformation possible, or is there another method to achieve it? If we have an HTML file structured like this <div> <p>Hello World</p> </div> And the goal is to convert "World" into a stan ...

javascripthtml

Injecting a component in Angular 2 using an HTML selector

When I tried to access a component created using a selector within some HTML, I misunderstood the hierarchical provider creation process. I thought providers would look for an existing instance and provide that when injected into another component. In my ...

javascripthtmlangulartypescript

Tips for concealing the loader once all pages have been loaded

Within the context of my website development project at , I am utilizing a script for infinite scrolling to consolidate multiple pages into one seamless scrolling experience. I am seeking a solution to hide the loader (the spinning icon) when no additiona ...

javascriptjqueryhtmlcssinfinite-scroll

Switching between states using JavaScript

Here is a code snippet I'm working with: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="C:\Users\rapandey\Documen ...

javascripthtmljqueryjquery-events

How can we create a flexible item that can be resized along with another item set to a fixed length?

Is there a way to create an element with a fixed height and width of 40px, while having another element next to it that takes up the remaining space of the parent element's width? I want the second element to shrink when resizing, while the first one ...

htmlcssresponsive-designflexbox

The adhesive navigation bar isn't adhering

I'm having issues with making my navbar inside a header sticky over the whole page. Despite trying various solutions like removing overflow, adjusting the flexbox, and setting a specific height on the parent element, I still can't get it to work. ...

htmlcssnavbarsticky

Slow CSS :hover animations in the most recent release of Chrome

I recently upgraded my browser from chromium version 67 to the latest Chrome version 79. However, I noticed that after the upgrade, the CSS transitions on my website have become very laggy and unresponsive. Surprisingly, everything works perfectly fine on ...

javascriptjqueryhtmlcssgoogle-chrome

Perform a Selenium action to click on each individual HTML 'a' tag on

I am attempting to automate clicking on all the "a" tags within a website using Selenium in Python. However, I found that all the "a" tags I want to click have the same structure as shown in the code snippet below. I tried clicking them by their class si ...

javascriptpythonhtmlseleniumweb-scraping