Bootstrap 4: What's causing this lack of alignment to the bottom?

I am working on a card layout that includes an image, a header, and some text along with a link at the bottom of the card. To achieve this, I set a minimum height using CSS. However, when I implemented the code, the content just ended up flowing from top to bottom with empty space at the bottom instead of the desired placement.

            <div class="col-lg-4">
                <div class="card shadow">
                    <img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
                        <div class="text-center d-block align-items-end">
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
            </div>

This is how it currently looks and I want the Lorem Ipsum text and button to be positioned right at the bottom, with the headline at the top for better readability.

https://i.sstatic.net/9ERF4.png

csstwitter-bootstrapbootstrap-4

Answer №1

Consider an alternative approach that utilizes Bootstrap's built-in framework without the need for extra CSS. The .card-footer class within the Card component can seamlessly integrate to achieve your desired outcome.

To ensure uniform heights, you can utilize either .card-deck or simply add the .h100 class to the wrapping .card element. For demonstration purposes, the following example showcases the use of .h100:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
  
    <div class="col-sm-6 col-lg-4">
      <div class="card h-100 shadow">
        <img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
        </div>

        <div class="card-footer bg-white border-top-0 text-center">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-lg-4">
      <div class="card h-100 shadow">
        <img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
        </div>

        <div class="card-footer bg-white border-top-0 text-center">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
       
    <div class="col-sm-6 col-lg-4">
      <div class="card h-100 shadow">
        <img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
        </div>

        <div class="card-footer bg-white border-top-0 text-center">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>

  </div>
</div>

The default styles of .card-footer include a top border and slightly darker background. These can be altered by applying .bg-white to change the background color and .border-top-0 to eliminate the top border. Centering the text is achieved through .text-center without declaring it as a block element.

No need for min-height CSS manipulation.

For further details on utilizing the Card component in layouts, refer to Bootstrap's 4.x documentation on Card layout.

Answer №2

To achieve bottom alignment, convert the card-body into a flex-column and apply a Bootstrap utility class.

Explore Bootstrap Flex Utilities

To implement this, add classes like .d-flex, .flex-column to the .card-body div, and include .mt-auto in the container holding your paragraph and button elements.

.card {
  height: 600px;
  /* setting an artificial height */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-4">
      <div class="card shadow">
        <img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
          <div class="text-center d-block mt-auto">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №3

Incorporate card groups to ensure the footer section is aligned at the bottom of the page.

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

Unable to apply height and width properties to CSS div

I've been facing an issue with applying height and width to div elements in my project. The tech stack I'm using includes TailwindCSS and Nextjs. My objective is to create vertically snap-scrolling slides, but the height and width properties see ...

htmlcssnext.jstailwind-css

How to make a Bootstrap column fill the remaining height

Although my content is short, I want the page to continue on with more information down the screen. <div style="background: #e0e0e0;"> <main role="main" class="container"> <div class="row" style="background: #f9f9f9;"> <d ...

htmlcsstwitter-bootstrapbootstrap-4

I must modify the initial statement to appear in bold from the paragraph with the use of JavaScript and CSS

Mr. XYZ and Mrs. ABC are known for their integrity. They own a stylish car. In the next paragraph, I would like to emphasize the first sentence by making it bold, We admire our exceptional leader J.K.L. He shows great potential. In this section, I wan ...

javascripthtmlcssnode.js

Which specific transitionend (or animationend) event should I use for this application?

I'm feeling a bit lost when it comes to using transitionend (or if I should be using animationend in this scenario). I'm not sure whether to utilize var, node, or box. Essentially, I am a complete beginner in this case. My goal is to have my div ...

javascriptjqueryhtmlcssanimation

Tips on how to perfectly position an element in the middle of an HTML

I am struggling to get the textarea element centered using margin: 0 auto. I even attempted to place the element inside a div with margin: 0 auto style. <div style="margin: 0 auto;"> <textarea rows="4" cols"100"></textare> </div& ...

htmlcss

Generating small image previews in JavaScript without distorting proportions

I am currently working on a client-side Drag and Drop file upload script as a bookmarklet. To prepare for the upload process, I am utilizing the File API to convert the images into base64 format and showcase them as thumbnails. These are examples of how m ...

javascriptcsshtmlbase64bookmarklet

Obtaining the field name from a SQL Server database by utilizing the field ID

When viewing my selections, I have several drop-down lists that display the ID and I would like the name to be shown to the user for clarity. However, when I list everything that has been added, it displays the chosen ID instead of the name. I attempted t ...

c#htmlcsssql-serverasp.net-mvc

Error message: The object does not have the necessary support for the property or method 'modal'

When attempting to display a modal pop-up to showcase details of a selected record in a grid, I encounter an issue. Despite setting the values for each control in the modal pop-up, it fails to open. I have ensured that all necessary references are included ...

jqueryasp.nettwitter-bootstrapbootstrap-modal

Tips for incorporating background-size and background-position within the background-image url()

My div currently has a background image set with background-image url(), but I am trying to achieve the following look: background-image url('example') cover center Here is my current code: div { background-image: url(example); background- ...

htmlcssstylesbackground-image

Conceal or reveal eye icon using React Bootstrap

I am trying to enhance the password field by adding an eye icon at the end to allow users to show/hide the password easily. <Form.Control size="lg" type="password" placeho ...

reactjsbootstrap-4react-bootstrap

Connect the dots within the navbar links

Having some trouble adding three dots between the elements of a bootstrap 4 navbar. Attempted to use the li:before statement but the dots are only showing up in the upper right corner instead of between the list items. Can't seem to figure out what I& ...

htmlcsstwitter-bootstrapbootstrap-4

Is it possible to activate the onChange event when the input value is being modified by the state with information obtained from a fetch

Currently, I am successfully fetching data from an API and storing it. However, I now want to incorporate a functionality where a user can paste a website URL into an input box, click a button, and then display the results in a return div UI. I am struggli ...

javascriptreactjsapibootstrap-4

Tips to prevent elements from overlapping in Angular applications

I am facing an issue with my Angular-based app where I dynamically populate the page with table rows. There is an app-console element below the page that has a fixed position. Whenever I click the button to add a new row, it overlaps with the app-console. ...

javascripthtmlcssangular

Side widget placement

I am having trouble with positioning my sidebar to the right side of my content while keeping it within the same 'box'. Here's what I'm facing: In the image, you can see that the sidebar is on the right side, but it's not containe ...

htmlcsssidebar

Animation not being triggered in Chrome when using the JQuery UI removeClass() method

Hey there stackoverflow community, Edit: I've created a fiddle showcasing the issue area, as requested. Unfortunately, JSfiddle doesn't support JQuery UI animations, so the problem isn't visible there. Check out the JSFiddle here Edit 2: ...

javascriptjquerycssjquery-uigoogle-chrome

What is the best method to determine when 20% of a "<section>" element is within the user's view?

Looking at the layout, I have two sections that take up the entire page. My goal is to detect when the second section is 20% visible while scrolling, and then smoothly scroll to lock that section in place so it occupies the full space. This action should a ...

javascripthtmlcss

Animate.css plugin allows for owl-carousel to smoothly transition sliding from the left side to the right side

I have a question regarding the usage of two plugins on my website. The first plugin is Owl Carousel 2, and the second one is Animate.css. While using `animateIn: 'slideInLeft'` with Owl Carousel 2 is working fine, I am facing an issue with `ani ...

javascriptjqueryhtmlcssowl-carousel

Trigger the animation with a button click by utilizing ng-class in Angular.js

How can I make an animation run more than once when a button is clicked? I've tried using ng-class but it's not working as expected. Any help would be appreciated. Thank you! <div ng-controller="MyCtrl"> <div class='contendor_port ...

javascriptcssangularjs

How can you minimize the size of your HTML files?

My code generates an HTML file, but when there is a large amount of text, the file can exceed 50mb, sometimes reaching 70-80mb. I prefer to avoid having an HTML file of this size. Below is the source code defining an HTML template: namespace Structure { ...

htmlc++css

Tips for achieving a seamless appearance with box-shadow on the left and right sides of various elements

.row { height: 300px; width: 300px; margin: 0 auto; box-shadow: 0 -20px 0px 0px white, 0 20px 0px 0px white, 12px 0 30px -4px rgba(0, 0, 0, 0.3), -12px 0 30px -4px rgba(0, 0, 0, 0.3); } <div class="row"></div> <div class="row">< ...

htmlcss