Position an image alongside text and button within a Bootstrap card

I am attempting to accomplish this: https://i.sstatic.net/VhryE.png this is the code I am using and the output

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body p-0 d-flex flex-column">
                <div class="row h-100">
                    <div class="col-sm-6">
                        <h5 class="card-title">another product name</h5>
                        <div class="mt-auto"><a href="#" class="btn rounded mt-auto btn-primary">Learn More</a></div>
                    </div>
                    <div class="col-sm-6 text-right"><img src="https://placehold.it/200x120" class="card-img img-fluid" alt="" /></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body p-0 d-flex flex-column">
                <div class="row h-100">
                    <div class="col-sm-6">
                        <h5 class="card-title">product name</h5>
                        <div class="mt-auto"><a href="#" class="btn rounded mt-auto btn-primary">Learn More</a></div>
                    </div>
                    <div class="col-sm-6 text-right"><img src="https://placehold.it/200x120" class="card-img img-fluid" alt="" /></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body p-0 d-flex flex-column">
                <div class="row h-100">
                    <div class="col-sm-6">
                        <h5 class="card-title">long product name that has two lines</h5>
                        <div class="mt-auto"><a href="#" class="btn rounded mt-auto btn-primary">Learn More</a></div>
                    </div>
                    <div class="col-sm-6 text-right"><img src="https://placehold.it/200x120" class="card-img img-fluid" alt="" /></div>
                </div>
            </div>
        </div>
    </div>
</div>

https://i.sstatic.net/uXMli.png Not sure what's causing the issue. Thanks

htmlcssbootstrap-4

Answer №1

If you want to make margin-top:auto work, make sure to include the d-flex flex-column classes in the parent container.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body p-0 d-flex flex-column">
                <div class="row h-100">
                    <div class="col-sm-6 d-flex flex-column">
                        <h5 class="card-title">another product name</h5>
                        <div class="mt-auto"><a href="#" class="btn rounded mt-auto btn-primary">Learn More</a></div>
                    </div>
                    <div class="col-sm-6 text-right"><img src="https://placehold.it/200x120" class="card-img img-fluid" alt="" /></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body p-0 d-flex flex-column">
                <div class="row h-100">
                    <div class="col-sm-6 d-flex flex-column">
                        <h5 class="card-title">product name</h5>
                        <div class="mt-auto"><a href="#" class="btn rounded mt-auto btn-primary">Learn More</a></div>
                    </div>
                    <div class="col-sm-6 text-right"><img src="https://placehold.it/200x120" class="card-img img-fluid" alt="" /></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body p-0 d-flex flex-column">
                <div class="row h-100">
                    <div class="col-sm-6 d-flex flex-column">
                        <h5 class="card-title">long product name that has two lines</h5>
                        <div class="mt-auto"><a href="#" class="btn rounded mt-auto btn-primary">Learn More</a></div>
                    </div>
                    <div class="col-sm-6 text-right"><img src="https://placehold.it/200x120" class="card-img img-fluid" alt="" /></div>
                </div>
            </div>
        </div>
    </div>
</div>

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

How to locate a specific element using Simple HTML DOM Parser

<div class="date">June<b>20</b><strong>friday</strong></div> Seeking to extract just the month from within this div, however the challenge lies in the fact that the month is not enclosed by any specific element. Is ther ...

phphtmlsimple-html-dom

Requesting a rendezvous with PHP

When it comes to asking for a date in an HTML form, I used to utilize various methods: Utilizing 3 separate fields for day, month, and year Using a text field with additional labeling like "Start date (example: 31-12-2013)" Employing a reverse date ...

phphtml

Tips on stopping slideToggle from opening and closing when clicked for the first time

When using the slideToggle function, I'm encountering an issue where the content div briefly shows on the first click but then immediately slides closed. Subsequent clicks work as expected and slide open correctly. This is the Jquery script I have be ...

javascriptjquerycssslidetoggle

What could be causing my floated list items to stack on top of each other

Typically, I am able to troubleshoot my way out of any CSS dilemma, but this particular issue on Friday afternoon has me stumped! Click here to see the problem. Hover over the menu items (birthday, wedding, etc.) and notice the dropdown effect. Initially ...

htmlcss

Unusual issue in IE causing rendering problems in reporting services

Currently, I am creating a report using Reporting Services 2008, MVC 2, and Ajax as my development technologies. When I generate the report, everything displays perfectly if there is data present. However, if there is no data, the report body gets cut off ...

javascripthtmlinternet-explorerreportingservice

Increasing the vertical spacing between two grid items is important for maintaining a visually appealing layout

When using a grid layout with 2 columns on devices wider than 768px, there seems to be an increase in spacing between the element and the one following it at that breakpoint. I'm looking for a solution to adjust the height so that it is dictated by t ...

cssreactjsnext.jscss-gridtailwind-css

Storing user input from HTML forms in a MySQL database table with PDO

Currently, I am in the process of developing a webpage that will contain multiple forms for users to fill out and submit. Once submitted, PHP will be responsible for executing a query to insert all the data into the table within their respective fields. I ...

phphtmlmysqlformspdo

Reposition the button to the right within a div

I am having trouble moving a button from the left side to the right side in Bootstrap 4. I have attempted using both mr-auto and float-right, but neither seems to be working. Here is my code: <!-- Page Content --> <div class="container"> ...

htmlcsswordpressbootstrap-4

CSS menu displayed in inline-block is not functioning as expected

Struggling with a CSS menu that I'm developing. Despite applying the display:inline-block to all elements, the menu items continue to display vertically rather than inline. Any tips on how to resolve this issue? View the code here: http://jsfiddle.net ...

navbarcss

Exploring simpleML's capability to delve deeper into the depths of the page source

I've been able to successfully extract the username babesmcphee from reading this site using simpleML in processing. However, I'm facing an issue with retrieving the second username (JohnCMayer) and subsequent ones. I suspect the problem lies in ...

javahtmlprocessing

Creating a responsive design for mobile apps in Ionic using CSS

I need help with making my Ionic app responsive across all mobile devices. The design on the page was created using CSS, but it is not displaying properly on every device. How can I ensure that it adapts to different screen sizes? <template> <Io ...

javascripthtmlcssionic-framework

Add a CSS class to the main document via an iframe

Is there a simple method to apply a CSS class that is specifically defined in the head of an iframe to an element located in the main document? Can this be done without having to resort to using JavaScript to copy the class from the iframe's head to ...

javascriptjquerycssiframe

How to Conceal Axis Label in an HTML5 Canvas Line Chart

Is there a way to hide the x-axis label from a line chart without hiding the y-axis label as well? I tried using scaleFontSize: 0,, but that ended up hiding both axis labels. I only want to hide the x-axis label. var lineOptions = { ///Boo ...

javascripthtmlchartshtml5-canvaslinechart

A convenient npm tool for combining HTML files into a single document

I have a specific need to combine several HTML files into a single file. This involves eliminating the HTML tags and HEAD tag from each file, then merging them into one file with only one set of HTML and HEAD tags. I am wondering if there are any existing ...

htmlnode.jsnpm

I am having difficulty retrieving all the cssRules for certain pages

Attempting to retrieve all CSS rules using JavaScript has yielded varying results. For instance, on StackOverflow, the code used is: console.log( document.styleSheets[1].href,'rules', document.styleSheets[1].cssRules,'Should be css rules, ...

javascriptcss

What are some effective methods for preventing CodeMirror from appearing as a blank white box upon initialization?

In my project with Codemirror version 5.62.3 and the 'monokai' theme set to a dark background, I am facing an issue where upon reloading the page, the CodeMirror initializes as a small white box before the proper styling is applied. I have attemp ...

cssloadingstylingcodemirror

The preselected value in an AngularJS select box is set to static HTML by

In my HTML, I have a select tag that I am populating using ng-repeat. <td> <select ng-model="item.data.region" style="margin-bottom: 2px;"> <option ng-repeat="region in vm.regions track by $index" value="{{region}}">{{region} ...

javascriptjqueryhtmlangularjs

The CSS properties intended for ion-button elements are not taking effect

I'm attempting to set a background color when a ion-button is clicked or maintain the ion-ripple effect after it has filled the button in Ionic 4. I experimented with applying custom CSS states in global.scss, but encountered issues where the active ...

cssangularionic-frameworkionic4

Strange fuzzy ring on Safari IOS HTML5 videos

There is a strange circular shape that keeps appearing on certain websites (image below) when viewed on an iPhone using Safari. Upon inspecting the Safari console, it seems to be related to the autoplay feature of a video, but unfortunately, I have been un ...

cssiphonevideosafari

Is it feasible to embed an entire linked CSS file within Jade?

I keep getting recommendations from Google's PageSpeed Insights to avoid using links for CSS files and instead include the styles directly under a style tag. I'm wondering if there is a way in Jade to specify a CSS file and have its contents pull ...

htmlpug