Combining an image and a card in Bootstrap 5: a step-by-step guide

Is there a way I can align an image and a card in the same line like in this example?

I want the image and card to be combined in one line, but when the page is viewed on mobile devices such as Android or iOS, I want the image to appear at the top with the card below it.

I have attempted to merge the image and card, but have been unsuccessful:

 <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfddd0d0cbcccbcddecfff8a918f918d">[email protected]</a>/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">
    
    
 <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <img class="img-thumbnail" src="https://cdn.britannica.com/04/123704-050-023DC490/Pair-leather-shoes.jpg" alt="">
            </div>
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <p class="fw-bold">{{ product.currency }}: {{ product.price|intcomma }}
                            <p>{{ product.category }}</p>
                        </p>
                        <hr>
                        <h5>Descriptions:</h5>
                        <p>{{ product.description }}</p>
                        <p class=""><span class="material-symbols-outlined">
                            call
                        </span>
                        {{ product.phone_number }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

cssbootstrap-5

Answer №1

To eliminate Bootstrap's default padding in columns, you can utilize the Bootstrap classes pe-md-0 and ps-md-0. These classes will remove padding on desktop screens while retaining it on mobile devices.

Additionally, ensure to set the height to 100% and include object-fit: contain; for the image to maintain its proportions without distortion.

Refer to the code snippet below for implementation:

.img-thumbnail {
  height: 100% !important;
  object-fit: contain;
}

.card {
  height: 100% !important;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90f2ffffe4e3e4e2f1e0d0a5bea0bea2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-6 pe-md-0">
      <img class="img-thumbnail" src="https://cdn.britannica.com/04/123704-050-023DC490/Pair-leather-shoes.jpg" alt="">
    </div>
    <div class="col ps-md-0">
      <div class="card">
        <div class="card-body">
          <p class="fw-bold">{{ product.currency }}: {{ product.price|intcomma }}
            <p>{{ product.category }}</p>
          </p>
          <hr>
          <h5>Descriptions:</h5>
          <p>{{ product.description }}</p>
          <p class="">
            <span class="material-symbols-outlined">call</span> {{ product.phone_number }}
          </p>
        </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 can I retrieve the height of a hidden image in Internet Explorer?

I am encountering an issue with images that have been set to display:none. I am using javascript (document.getElementById('elem').height) to retrieve the height/width of these images. While this method works in most browsers, IE is reporting th ...

javascriptcssinternet-explorer-7

The image does not automatically adjust size when the window is resized

I'm having an issue with my HTML and CSS code that is supposed to display two images side by side and resize when the browser window shrinks, but it's not working as expected. Even after removing all classes on the parent divs, the images still ...

htmlcss

Transition from Material UI styles to SCSS equivalent

Can you assist me in converting the following Material UI themes to its equivalent SCSS? I am defining up("sm") as meaning above600px. I'm in the process of creating a @mixin contentShiftContainer so that I can use it wherever needed. Howev ...

cssreactjssassmaterial-uitransition

What is the best way to create a never-ending horizontal animation that moves a logo image from right

I have a dilemma with displaying my logo images. I have more than 10 logos, but I want to showcase only 6 of them on page load. The rest of the logos should slide horizontally from right to left in an infinite loop. Can anyone assist me with creating keyf ...

jqueryhtmlcss

Displaying left and right div elements alongside each other in HTML/CSS works in Chrome, but not in Safari or Firefox

I've encountered an issue with aligning divs side by side in Firefox and Safari, although it seems to be working perfectly in Chrome. It's a bit tricky to provide all the CSS code as I have different stylesheets for mobile, normal, and print vers ...

htmlcssgoogle-chromesafarialignment

Utilize text wrapping to ensure a fixed maximum height for content display

I am in need of a div that contains text spanning multiple lines, with both a fixed width and a maximum height. Currently, I have applied the CSS property overflow: hidden;. However, my issue arises when the last line of text exceeds the maximum height of ...

javascripthtmlcssword-wrap

Design that adapts to various screen sizes and devices

I'm facing an issue where the two elements are misaligned on mobile, even though they display perfectly on desktop. In some cases, the bottom element is partially hidden on the left side as shown here: Any suggestions on how to center these elements ...

cssmobileresponsive-design

Progress Bars Installation

For more detailed information, visit: https://github.com/rstacruz/nprogress After linking the provided .js and .css files to my main html file, I am instructed to "Simply call start() and done() to control the progress bar." NProgress.start(); NProgress. ...

javascriptcssprogress-bar

Show a div depending on user input

For those with more programming experience than myself, I have a simple question. In Rails, using coffescript, I want to show additional content based on a user's selection. Essentially, if they click on a checkbox, it should reveal an extra field for ...

jquerycssruby-on-rails-4coffeescript

What is the best way to style a tiled design using CSS?

What is the best way to code the page without using javascript? Both of the HTML elements (div1, div2) need to have a fixed size. ...

htmlcss

Alteration of Content Height Input

I have designed a layout that I am excited to experiment with more in the future. Here is the current structure of my HTML: <!DOCTYPE html> <html> <head> <title>Title</title> <link rel="stylesheet" type="text/css" hre ...

htmlcss

"Mastering the art of text animation: A beginner's guide

If you want to see a cool moving text animation, simply head over to this link: . The text will automatically type out and then clear just like the example below: https://i.sstatic.net/dAZW6.png Ever wondered how to create this kind of text animation? A ...

htmlcssreactjsangularweb

I have expanded the CSSStyleDeclaration prototype, how do I access the 'parent' property?

I have developed some custom methods for CSSStyleDeclaration and implement them like this: A_OBJECT.style.method() ; The code structure is quite simple: CSSStyleDeclaration.prototype.method = function () { x = this.left; ..... etc } Here's my que ...

javascriptcss

What is the best way to ensure that all of my images are the same size?

I've been working on making my pictures of varying resolutions the same size here, but no matter what I try, it just doesn't seem to work. Here is what I'm getting: . When I change the state to 1, 2, 3, or 4, I want it to look like this: her ...

javascripthtmlcssreactjs

What's going on with the background color? It doesn't seem

I have incorporated Bootstrap into my html code and I am attempting to modify the background color of a div when the screen resolution changes from large to medium or small. Even though I have added a class, the change does not reflect when adjusting the ...

javascriptjqueryhtmltwitter-bootstrapcss

Break down the text of a paragraph into separate words, placing each word within its own span element, and then add animations

I am facing an issue with my paragraph element that has the display property set to hidden. I have split each word of the paragraph and placed them inside individual span elements. My goal is to create an effect where each word comes from different locatio ...

javascripthtmlcss

Connect the front end files, including HTML, CSS, and JavaScript, to the Node.js backend

I'm a beginner in web development and recently completed an online course on node.js and express. However, the course didn't cover how to add HTML, CSS, and JS files when using Node. I attempted the following: var express = require('expres ...

javascripthtmlcssnode.jsexpress

Challenges with using popperjs/core in Ruby on Rails 7

Recently, I upgraded to Rails 7 and Bootstrap 5. While my app seems to start fine, the log is filled with a plethora of errors: Started GET "/home/index" for 127.0.0.1 at 2024-02-02 16:01:31 -0500 ActiveRecord::SchemaMigration Load (0.1ms) SEL ...

ruby-on-railsbootstrap-5popper.js

Learn how to assign an image to a div element when it is collapsed, and then reveal the content when clicked on to expand

I am working on a three div with expand collapse functionality. When I expand one div, I want to set some image to the other divs. And when I go back to normal mode, I need the original content that was inside each div. $("a.expansion-btn").click(functi ...

javascriptjqueryhtmlcssangularjs

HTML/CSS - Enhances user experience by zooming in on select tag when tapped on mobile devices

I am experiencing an issue with a select menu on mobile devices. Whenever I tap on the menu, it seems to zoom in slightly. Is there a particular -webkit property causing this behavior? How can I prevent the screen from zooming when I tap on the select me ...

javascripthtmlcsswebkit