Alignment of card images

Is there a way to keep the images in my cards fixed at the top of the card body? I've tried using bottom: 0 but it's not working as expected. The card body has a fixed height and is fixed to the bottom, which is functioning correctly. However, since the images have different sizes and will scale differently, I want them to be fixed at the top instead. Can someone please assist me?

<div class="card" style="width: 18rem;">

            <img class="card-img-top fluid-img" src="briefcase.png" alt="Card image cap">
        <div class="card-body">
                <h5 class="card-title">Suit</h5>
                 <p class="card-text">Professional, business executive look.</p>
                 <p class="text-center">€299</p>
                <a href="#" class="btn btn-success btn-block">Add to cart</a>


.card-img-top {
  width: 100%;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  height: 650px;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
  bottom: 0;
  position: absolute;
}
<div class="card" style="width: 18rem;">

  <img class="card-img-top fluid-img" src="briefcase.png" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Suit</h5>
    <p class="card-text">Professional, business executive look.</p>
    <p class="text-center">€299</p>
    <a href="#" class="btn btn-success btn-block">Add to cart</a>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

try implementing position:absolute on the card-body element

.card-body{
    position:absolute;
    bottom:0;
 }


.card-img-top {
  width: 100%;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  height: 650px;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.card-body{
position:absolute;
bottom:0;
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="card" style="width: 18rem;">

  <img class="card-img-top fluid-img" src="briefcase.png" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Suit</h5>
    <p class="card-text">Professional, business executive look.</p>
    <p class="text-center">€299</p>
    <a href="#" class="btn btn-success btn-block">Add to cart</a>
  </div>
</div>

Answer №2

Utilize flexbox for optimal layout

<div class="card">
    <div class="wrapper-image">
        <img class="card-img-top fluid-img" src="briefcase.png" alt="Card image cap">
    </div>
    <div class="card-body">
    <h5 class="card-title">Suit</h5>
    <p class="card-text">Professional, business executive look.</p>
    <p class="text-center">€299</p>
    <a href="#" class="btn btn-success btn-block">Add to cart</a>
  </div>
</div>

.wrapper-image {
    height: 18rem;
    display: flex;
    align-items: flex-start;
}

In this scenario, the wrapper image will be set to a height of 18rem, larger than the actual image itself. By using the align-items property with a value of flex-start, the image is positioned at the top of the container. It's also possible to use center or flex-end as alternatives.

The display: flex property enables the use of align-items and justify-content properties, allowing for horizontal positioning of elements. Additionally, using flex-direction: column can help in arranging items vertically within the container.

To explore more about flexbox, refer to resources like W3Schools. If you require further assistance, consider sharing your code, possibly through platforms like CodePen for better analysis and support.

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

AJAX is designed to only modify one specific Django model instance at a time

My Django project displays a list of "issue" objects, each with a boolean field called "fixed". I am looking to implement a feature where users can press a button that will modify the "fixed" status using Ajax. However, currently, the button only changes o ...

javascriptpythonhtmldjangoajax

Guide to make a loading animation button through the use of HTML, CSS, and JavaScript

"Hello, I am currently in the process of working on a project and am interested in implementing a button with a loading animation that can be displayed during actions like form submission or content loading. I'm seeking some advice or code sample ...

htmlformsbuttoninputlabel

Styling the large drop-down menu for Internet Explorer 7

Check out the code snippet at http://jsfiddle.net/jN5G4/1/ Is there a way to align the drop-down menu for "5 Columns" to match the alignment of the other drop-downs? After removing the <a href...> </a> tags from the 5 Columns list item, the d ...

htmlcssinternet-explorerinternet-explorer-7cross-browser

Adjust the form-row size to make room for a button on the right

I am in the process of developing a web application using Bootstrap v4.4.1. Currently, I am facing an issue where I am attempting to include a form-row with two inputs and one button side by side. However, I also want to add an additional button to the ri ...

bootstrap-4

Optimizing HTML and Script loading sequences for efficient execution

I have a query regarding the loading order of scripts in web browsers. I am interested in knowing the most efficient way to redirect users to a mobile website on the client side. For example, if I place a mobile detection script within the <head> se ...

javascripthtmlperformancemobile

"Utilizing the power of Twitter Bootstrap and Snap.js for

I am currently working on integrating Snap.js by jakiestfu with Twitter Bootstrap. I have managed to make it work to some extent (I can slide the content and open a drawer through a click event). However, I am facing a challenge where the drawer content re ...

javascriptcsstwitter-bootstrapsnap.js

Access an attribute using slashes in Jquery

I've been struggling to use jQuery to select an object based on a unique filename attribute. However, I'm facing issues with escaping slashes when the selector is created using a variable. Despite spending hours trying different combinations, I s ...

javascriptjqueryhtmljquery-selectorsescaping

Show the user's username on their profile page by retrieving the name from the database

Upon successful login/signup with various services, I want to display the username on the profile page. However, my database stores user data in different fields depending on the service used - user.twitter.name for Twitter logins, user.google.name for Goo ...

javascriptnode.jshtmlexpress

Guide on linking an id with a trigger function in HTML and JavaScript

In the snippet below, I aim to create a responsive feature based on user input of 'mute' and 'muteon'. Whenever one of these is entered into the textbox, it will change the color of linked elements with the IDs "text" and "text1" to red ...

javascripthtmlcsstelnet

"Switching a div's visibility when a link is clicked

http://jsfiddle.net/FsCHJ/2/ Currently, when I add another link, it automatically uses the same functionality as the toggle button. What I want is for "Toggle Edit Mode" to toggle a hidden div on and off. I attempted to modify the code from $("a").click(f ...

javascriptjqueryhtmlcss

css readonly input textbox not changing background color when set

I've come across an old Classic ASP form that requires additional functionality, and I'm currently using IE11. To address this, I decided to include a doctype like so (even though I'm unsure of its necessity): <!DOCTYPE html> In my C ...

htmlcssreadonly-attribute

Execute a JavaScript function when an HTML list element is clicked

As a beginner in web development, I have a question that might seem obvious to some. I want to create a menu where each item, when clicked, triggers a JavaScript function with the item's ID as an argument. I plan to display the menu items in an unorde ...

javascripthtmlmenu

Diagonal-left ending div in cascading style sheets

Looking to achieve a div with a diagonal side similar to the image in the link below: https://i.sstatic.net/u9grW.png I'm trying to figure out the best way to do this. One idea is to position 2 divs closely together and rotate one of them. Alternativ ...

htmlcss

Troubleshooting a Bootstrap 4 Dropdown issue within a Laravel-Vue single page application

Spa.blade.php file <!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <title>SPA</title> <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,4 ...

laravelvue.jsbootstrap-4popper.js

Error encountered while trying to import a bootstrap file into a component

I am facing an issue in my Angular project where I have locally downloaded Bootstrap and trying to reference the _variables.scss file inside a component. However, whenever I import it into the component, I encounter a compile error. Is there a mistake in m ...

angulartwitter-bootstrapsassbootstrap-4

Using the CSS selector :contains() does not function properly when there are line breaks present

<div>A very lengthy text that goes on and on</div> When rendered, A very lengthy text that goes on and on will appear as HTML removes the line breaks. However, locating the div using the :contains() CSS selector is challenging due to the lin ...

jqueryhtmlcssjquery-selectors

SoundCloud and Vimeo have the capability to link their players across separate tabs, and even between tabs and embedded players

I find it intriguing how SoundCloud and Vimeo are synchronized with their tabs, so that when you play something in one tab, the others pause. It's worth noting that this feature only works on SoundCloud when two instances of the website are open, wher ...

javascripthtmlaudiovideosoundcloud

Use a personalized CSS class with the Kendo Dropdown Widget

Is there a way to assign a custom CSS class to the dropdown HTML container that is created when using the .kendoDropDownList() method on a <select> or <input> element? In this fiddle ( http://jsfiddle.net/lav911/n9V4N/ ) you can see the releva ...

javascriptjquerycsskendo-uikendo-dropdown

showcasing the picture in the email is consistently

I have created an email system that sends a message to users when they are active in the database, but I am experiencing an issue with the image not displaying. It is important for the image to appear automatically, just like Facebook's logo always sh ...

phphtmlcss

Should the <head> tag in an HTML document contain a substantial amount of content?

Is there a difference in performance if we have a large amount of content in our HTML document? I believe it shouldn't make much of a difference, right? My plan is to load all text content on a single page and then use JavaScript to display the relev ...

html