Card image floating to the right using Bootstrap

I have a set of three horizontal cards, not in a card deck as it's not responsive, and I want to align images in the bottom right corner of each. Bootstrap 4 comes with a class for card-img-left which works perfectly. I've attempted using float-right and removing the flex class to position the image on the bottom right, but so far, nothing has worked.

Below is my code snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-md-6  align-items-stretch">
  <div class="card mb-4 box-shadow border-0">
    <img class="card-img-left mt-4 ml-4" src="image link here" alt="Card image cap" style="max- 
 width: 40px;">
    <div class="card-body">
      <h4 class="mt-3 font-weight-normal card-title">A really long and life altering quote will go here. This is just dummy text.
      </h4>
      <p class="card-text"> Person's name</p>
    </div>
    <img class="float-right" src="image link here" alt="Card image cap" style="max-width: 40px;">
  </div>
</div>
csstwitter-bootstrapbootstrap-4

Answer №1

To align the thumbnail to the right, I followed these steps. First, I imported the last <img> element into a container with the class col-md-6. Then, I defined a CSS style called float-right with the property float: right !important;.

.float-right{
  float: right !important;
  max-width: 40px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="col-md-6 align-items-stretch">
        <div class="card mb-4 box-shadow border-0" style="margin-bottom: 0px !important;">
            <img class="card-img-left mt-4 ml-4" src="https://via.placeholder.com/50" alt="Card image cap">
            <div class="card-body">
                <h4 class="mt-3 font-weight-normal card-title">A really long and life altering quote will go here. This is just dummy text. </h4>
                <p class="card-text"> Person's name</p>
            </div>
        </div>

        <img class="float-right" src="https://via.placeholder.com/50" alt="Card image cap">
    </div>
</div>

If you want the float-right class style to be applied to the first <img> element like the second one, you can use the following snippet:

.float-right{
    float: right !important;
    max-width: 40px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="col-md-6 align-items-stretch">
        <img class="float-right card-img-left mt-4 ml-4" src="https://via.placeholder.com/50" alt="Card image cap">
        <div class="card mb-4 box-shadow border-0" style="margin-bottom: 0px !important;">
            <div class="card-body">
                <h4 class="mt-3 font-weight-normal card-title">A really long and life altering quote will go here. This is just dummy text. </h4>
                <p class="card-text"> Person's name</p>
            </div>
        </div>

        <img class="float-right" src="https://via.placeholder.com/50" alt="Card image cap">
    </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

Looking for a way to prevent a div element from scrolling in JQuery Mobile?

Here is my implementation: http://jsfiddle.net/coderslay/Lhb5Y/ I have content structured like this: <div data-role="content"> <div><!--Contains a button --></div> <div><ul>..<!--Contains a list -->...</ ...

jqueryhtmlcssjquery-mobile

How to implement jQuery CSS hover effect using jQuery?

I've configured the hover opacity in my CSS, .button-simple:hover { opacity:.70; filter:alpha(opacity=70); filter: "alpha(opacity=70)"; } However, the hover opacity is not displaying after adding this line to my code, $('input[type ...

jquerycssjquery-hoverjquery-1.9

The HTML <select> element is currently styled with a locked CSS, but I am looking to have it displayed with the default

Unfortunately, I am unable to make changes to the CSS file at this time. The current styles in the CSS file are as follows: font-size: 13px; padding: 6px 4px; background-color: rgb(238, 238, 238); border: 1px solid rgb(204, 204, 204); clear: both; margin- ...

htmlcssselectoverridingdefault

Issue with displaying Bootstrap 3 modal on Mozilla browser

Hello everyone, I've encountered an issue with my Bootstrap modal on Mozilla browser. Everything works perfectly on Chrome and Safari, but when I click the modal button in Mozilla, nothing happens. Here's a snippet of my code: <button type="b ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

How can I remove the excess space above and below tables that have differing numbers of rows?

Forgive me if my question seems basic or if there are any errors in it. I am new to HTML/CSS and collaboration tools like this platform. While I understand that these are not your typical HTML tables, they are what I've found to be the most effective ...

htmlcss

Using the div tag will result in a new line being created

Whenever I try to create an element with a div, I notice there is always some space between the content and the border (blue line). On the other hand, using span causes the content to break, appearing outside the borders. Here is my CSS code: #m ...

htmlcss

Step-by-step guide on replacing a visible div with a new div when a button is clicked

I have organized my website with links on the left sidebar and matching content in the right sidebar, structured within appropriate div elements. My goal is to display only one div at a time when a user clicks on one of the links located on the left side. ...

jqueryhtmlcss

Hovering over one element in Jquery triggers actions on multiple elements simultaneously

I'm working on a project where I have multiple cards, and I've implemented a hover effect using jQuery to make the images inside the cards bigger. However, I'm facing an issue where hovering over one card triggers the effect on all the other ...

htmljquerycsscss-transitions

Modify radio button colors upon selection with a variety of colors

Looking to create Yes/No buttons that start with a default state of null and change color when pressed - green for yes, red for no. Check out this example code: <label class="formheading">Apparatus group is correct</label> <fieldset data-r ...

javascriptjqueryhtmlcssjquery-mobile

Modify the background color of a pseudo-element's property value dynamically

How do I change the background color of my burger menu by clicking on an icon? This is the CSS code I have: :root{ --pseudo-backgroundcolor: yellow; } .menu__icon span, .menu__icon::before, .menu__icon::after{ background: va ...

javascripthtmlcsspseudo-element

Is it advisable to incorporate different React UI libraries within one project?

Is it acceptable to mix different UI libraries when coding? I currently use react-bootstrap in my project, but I am thinking about incorporating React Suite for future components. What are the guidelines for using multiple UI libraries in a project? ...

reactjsbootstrap-4

Is there a way to add a dynamic animation of steam rising from a coffee cup to my SVG icon design?

I'm a budding graphic designer eager to master the art of SVG animated icons and coding. Recently, I created an SVG file of a beautiful cup of coffee using Illustrator and now I want to make the steam rise realistically through animation. However, des ...

htmlcssanimationsvg

The overflow hidden function does not seem to be fully functional on the iPad

Struggling to prevent body scrolling when a modal pop-up appears? I've tried setting the body overflow to hidden when opening the modal and resetting it when closing, which worked fine on desktop browsers. However, mobile devices like iPod/iPhone pose ...

javascriptjqueryhtmlcssipad

Tips for showcasing content by hovering over buttons with the help of Bootstrap3 and Jquery

My code and fiddle are currently set up to display buttons when hovered over, but I want to modify it so that only the relevant button is displayed when a specific text is hovered over. For example, if "Water" is hovered over, only the button for Water sho ...

javascripthtmljquerycss

Dual Image Flip Card Effect for Eye-Catching Rotations

In the process of enhancing a website, I am interested in incorporating a feature that involves multiple cards with both front and back sides (each containing separate images). Initially, the plan is to display only the front side of the card. Upon clickin ...

javascripthtmlcssfrontend

Overflow on flex layout causes line breaks

I am facing an issue with two divs in a flex container where I want them to be displayed on separate lines when they overflow .container { background: wheat; padding: 10px; width: 300px; display: flex; justify-content: space-betwee ...

css

Why is my CSS selector automatically converted to uppercase in Internet Explorer?

I am facing an issue with my CSS file. Here is how it looks: /*mycss.css*/ body { margin: 0px; padding: 0px; } a:link { color: rgb(255, 255, 255); font-weight: normal; text-decoration: underline; } a:visited { color: rgb(255, 255, 255); font-weight: norm ...

cssinternet-explorercss-selectors

Triangles without their pointed tips

The left arrows next to the carousel blocks are missing their tips. I'm not sure what else needs to be added in the CSS to complete the triangle shape. Here is the live URL: (located next to the large image, specifically in the information carousel) ...

htmlcss

Adjust the alignment and size of the flexible image to be centered horizontally

I have an image with dimensions of 3051 x 1716 pixels. https://i.sstatic.net/Y3Wi7m.jpg While viewing it on mobile, I would like to adjust it to look like this without cropping the image or uploading it again: https://i.sstatic.net/lJ1NSm.jpg In other ...

htmlcss

I am having trouble with the Bootstrap 5 column not functioning properly within my design

Currently working on a project with Bootstrap, where I am trying to create a footer that looks like the one in the image below: https://i.stack.imgur.com/XIbDk.png Below is the HTML code snippet for my footer: <footer class="footer"> <div class ...

htmlcsstwitter-bootstrap