CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
metalcoder
metalcoder

Reputation: 37

Bootstrap card image on right

I've got a group of three horizontal cards (not in a card deck since it's not responsive) and I'd like to align images in the bottom right corner of them. Bootstrap 4 has a built in class for card-img-left which works perfectly. I've tried float-right and I've removed the flex class to get an image on the bottom right but nothing has worked thusfar.

Here is my code.

<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>

Upvotes: 0

Views: 1880

Answers (1)

Sercan
Sercan

Reputation: 5081

I understand you want the thumbnail to be right aligned. First I imported the last <img> element into the container with the class style col-md-6 applied. Then I wrote css style to apply the float-right class style; inside this class float: right !important; I used the style.

.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">
        <!-- "margin-bottom: 0px !important;" to remove the space between <h4> and <img> style is applied.-->
        <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>

The image inside the Bootstrap Card component is intended to expand across the entire card. If you want the float-right class style to be applied to the first <img> element like the second, try 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">
        <!-- "margin-bottom: 0px !important;" to remove the space between <h4> and <img> style is applied.-->
        <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>

Upvotes: 1

Related Questions