The card-footer in Bootstrap 4 is not correctly aligned at the bottom of the page

I am currently encountering an issue with the alignment of the 'card-footer' class in Bootstrap 4 cards, as it is not aligning properly at the bottom of the page.

If you would like to see the problem for yourself, here is the link to the JS Fiddle.

<div class="container">
   <div class="card text-center">
     <div class="card-header">Featured</div>
     <div class="card-body">
       <h5 class="card-title">Special title treatment</h5>
       <p class="card-text">The text within this card should maintain equal distance from the header and footer.</p>
       <p class="card-text">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam 
       sapien sem, ornare ac, nonummy non, lobortis a enim. Nam sed 
       tellus id magna elementum tincidunt. Pellentesque habitant morbi 
       tristique senectus et netus et malesuada fames ac turpis egestas. 
       Aliquam ornare wisi eu metus. In enim a arcu imperdiet malesuada. 
       Nam quis nulla. Vivamus luctus egestas leo. 
       </p>
   </div>
   <div class="card-footer text-muted">
    The aim is for this footer to be positioned at the very bottom
  </div>
 </div>
</div>
htmlcssbootstrap-4

Answer №1

To make the card full height, you can use the h-100 class in Bootstrap 4 which sets the height to 100%...

<div class="container h-100">
<div class="card h-100 text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    ...
  </div>
  <div class="card-footer text-muted">
    This footer should be at the bottom
  </div>
</div>
</div>

https://jsfiddle.net/eqfxk9wo/

Answer №2

The simplest method, in my opinion, is to assign the card-footer a class called mt-auto

  <div class="card-footer mt-auto" >
    Content here
  </div>

Answer №3

In my opinion, creating a custom footer would be the best approach. However, if you want to align this existing footer to the bottom, you can achieve it by including the following CSS:

.card {
    height: 100vh;
}

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

Having trouble with imagecopyresampled function, unsure of the reason behind its malfunction

I am currently trying to use imagecopyresampled to crop a specific section of an image, in order to prevent users from uploading photos larger than the intended size on my website. However, I am facing an issue where imagecopyresampled seems to be resizing ...

phpcssimagejpegphp-gd

Angular JS allows for the display of text from a textarea upon clicking the submit button

Q] How can I display a single text message from a textarea upon clicking the submit button in angular-js? Here is the current code that I have: <html ng-app="myApp"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1 ...

javascriptjqueryhtmlangularjs

Enhancing the efficiency of a JavaScript smooth scrolling feature for numerous listed items

I have been experimenting with recreating the recent Apple Mac retrospective using only CSS and JavaScript to create a small timeline of projects. While I have successfully implemented the layout for the full-screen hero and the expand-on-hover effect, I a ...

javascripthtmlcssperformancescroll

Receive the innerHTML of an Element after appending additional Elements - Selenium

When working with my table in HTML, I have noticed that the <td> tag can be accessed in two different ways: 1. <td><font size="4" face="Arial"><i>Google</i></font></td> 2. <td>Google</td> I am curr ...

htmlseleniumdomhtml-table

Adding a background image to a box in MUI is a simple task that can enhance

I've been attempting to include a background image in the Box component of mui, but I can't seem to get it to work. Here is the code I've been using: const Main = () => { return ( <Box sx={{backgroundImage:'images/cove ...

javascriptcssreactjsmaterial-ui

modify style when not valid and is touched

When I try to modify the style of an i tag based on the touched and invalid state of another field, only the input tag's style changes and not the i tag. Here's the CSS code I'm using: input.ng-touched.ng-invalid { border-color: red; } ...

htmlcssangularangular7

Styling rounded buttons with GTK and CSS

In my C++ application, I am attempting to create a rounded button by utilizing an external CSS file. Although I have successfully achieved a round button, there is still a pesky rectangular border that remains and I am struggling to figure out how to remo ...

c++cssgtk

Ways to modify the height of a button without impacting other buttons?

My goal is to create a calculator that looks like the image attached below: However, I'm having trouble aligning the equal button properly. How can I adjust it to match the equal button in the image? Here's the code snippet I'm currently w ...

htmlcsstwitter-bootstrap

Passing HTML element values to Python in Odoo 10: A complete guide

I am working on an Odoo module that includes an Html <select> tag. I need to pass the value of the <option> (within the select tag) to a Python model so that I can perform certain actions based on this value. Can anyone provide guidance on how ...

pythonhtmlodoo

What is the best way to verify the font-family using JavaScript?

To verify if the user has installed the font family, we can run a JavaScript function with AngularJS. I am using a Typekit font and have only loaded this service for users who do not have this specific font. ...

javascriptcssangularjsfonts

Using an inline-block within a positioned absolute element

I am curious about the behavior of inline-block elements inside absolutely positioned elements. To better explain, I have provided an example below. We can see in the code snippet why the .icon within the .tag is not displayed like the previous .icon (whic ...

htmlcsscss-position

Can you explain the significance of CSS properties in aligning a form element at the center?

After looking into how to center a form element using CSS, I discovered that setting the margin to auto and specifying a width property are necessary steps. But, what exactly does the width represent in this context? For instance, when I set the width to ...

htmlcsswidthmargincenter

Combining photos seamlessly and bringing them to life through animation upon window loading

My main goal is to seamlessly fit the images together, but I'm struggling to achieve this. I tried using masonry, but unfortunately it didn't work for me. All I want is to tightly pack the divs together. For instance, in my fiddle example, I woul ...

javascriptjqueryhtmlcss

Error encountered: Required closing JSX tag for <CCol> was missing

Encountered a strange bug in vscode...while developing an app with react.js. Initially, the tags are displaying correctly in the code file. However, upon saving, the code format changes causing errors during runtime. For instance, here is an example of the ...

javascripthtmlreactjsvisual-studio-code

Retrieve all HTML elements, including their closing tags, from a file with Java, without relying on external libraries such as Jsoup

Recently, I've been working on a piece of code that reads an HTML file, extracts all the opening HTML tags, and displays them. However, I have been thinking about how to also include the closing tags in the output. At the moment, the code prints: < ...

javahtmlregexfile-io

Ensuring Unique CSS for Diverse Devices: A User-Agent Driven Approach

I am facing multiple challenges and working towards finding solutions. I have developed a webpage and now I want to redirect the link to the CSS file based on the user agent. `<script type="text/css" src="style.css"> </script>` However, inst ...

javascriptphpandroidcssipad

Adjusting the position of an iframe with a YouTube video when the window is resized

I'm struggling with resizing and moving a YouTube video embedded using the Youtube API. I'm not a web designer, so I'm facing some difficulties. When trying to resize the window, I can't seem to move or resize the video within an iframe ...

javascriptjqueryhtmliframe

Struggling to align a button in the middle of an HTML form using flexbox - see code snippet below

Hey everyone, I’m having trouble with centering my button within the flexbox container with the class "hero". Any thoughts on why this might be happening? The button appears below the email form but is aligned to the left of it (starting at the same pos ...

htmlcssbuttonflexboxcenter

Creating a carousel with three thumbnails arranged in two rows

Currently, I am using a slider for my thumbnails. If you want to check out the code for this thumbnail slider, click on this link: thumbnails slider code My goal is to display 6 thumbnails in total, with 3 thumbnails shown in each row (2 rows total). Add ...

javascriptjqueryhtmlcss

How can nunjucks templates be accessed from NPM (node modules)?

Is there a solution to make nunjucks imports/includes resolve from the NPM node_modules directory? Let's say we have installed a package as follows: npm i -S @example/cards Now, we need to import from it in a template like this: {% import "@exampl ...

javascripthtmlnode.jsnpmnunjucks