Bootstrap CSS class for when card image moves due to resizing

Question

I'm sorry, but I have no idea how to google this question. I'm sure it's simple. I have a horizontal card with an image on the right. When the page get small enough, the image drops down below the text. I didn't design it this way, but I don't mind it.

When horizontal, I want the image to be a certain size no matter the image resolution along with rounded corners on the right.

When vertical, I want the image to fill the entire width of the card and have rounded corners on the bottom.

Question: What is the CSS element that identifies the transition from image on right to image down below?

EXTRA RAMBLING BY ME

Obviously one solution is to have separate CSS directives: one for when the image is on the right with a set height/width and rounded corners on the right, and another for when the image is on the bottom with height/width set to auto/100%.

Another solution is to keep the image on the right and have it shrink in width but allow the image height to grow depending on the amount of text.

So in my style.css, I would have something like:

.image-round-right {
  width:350px;
  max-height:auto;
  border-radius:0px 5px 5px 0px;
}

.image-round-bottom {
  width:auto;
  height:auto;
  border-radius:5px 5px 0px 0px;
}

Not sure if auto or 100% is better in this case.

I would try using media query points like in this question, but I was unable to get anything to take effect.

(original html, posted after amruth gave his answer)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
  <div class="container-fluid">
    <div class="card flex-md-row mb-4 box-shadow h-md-250 m-3">
      <div class="card-body d-flex flex-column align-items-start flex-grow-1 pr-md-3">
        <h3>Card Title</h3>
        <p class="card-text mb-auto">
          Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
          Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
          Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
        </p>
      </div>
      <div class="img-round-right">
        <a href="https://www.yahoo.com" title="" target="_blank">
            <img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg
                 class="img-fluid" style="width:auto;height:250px;border-radius:0px 5px 5px 0;">
        </a>
      </div>
    </div>
  </div>
</body>

Please share your current html, or produce a working fiddle. Is it the `width: 350px` mandatory? — Yuri, Jul 20 '18 at 06:04
No, 350px was what my testing led to as about the right size. Should be using the columns though. Thanks! — user58446, Jul 20 '18 at 07:49

Amruth Pillai · Accepted Answer · 2018-07-20T07:30:37.217

1

You could use Bootstrap 4 Columns to achieve this.

<div class="container mt-5">
  <div class="card">
    <div class="row">
      <div class="col-md-8">
        <div class="card-body">
          <h2>Title</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis maiores voluptate eius laboriosam neque accusamus, hic officia quod dicta. Saepe eum vero, quis dolore animi molestiae id commodi necessitatibus amet.</p>
        </div>
      </div>
      <div class="col-md-4">
          <img src="https://picsum.photos/800" class="img-fluid">
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/djOjbw?editors=1000

edited Jul 20 '18 at 07:30

answered Jul 20 '18 at 06:08

Amruth Pillai

1,539
2
13
28

That is not responsive at all. https://getbootstrap.com/docs/4.0/layout/grid/#grid-options – Yuri Jul 20 '18 at 06:12
Are you sure? It seems to do what the OP has asked for. In Horizontal, the image should be on the right. In Vertical, the image should be full-width on the bottom. And it should be rounded, so adding a rounded class will do the trick. Please tell me if I'm missing anything. – Amruth Pillai Jul 20 '18 at 06:23
Yup, sorry, you are right!! I would also set `.col-sm-*` classes though – Yuri Jul 20 '18 at 06:26
That's alright! :) Why would `.col-sm-*` be necessary for this particular scenario? Maybe to get rid of the image altogether if on mobile? `d-sm-none` would do the trick then. – Amruth Pillai Jul 20 '18 at 06:55
Just because the OP asked the code to be responsive on "small" screens, even though, reading at the post he is not mentioning "how small", so actually any size less than `.col-lg-*` is good – Yuri Jul 20 '18 at 07:15
Yes, indeed col-sm-* and col-xs-* were necessary in order to make sure the image did not transition to the bottom with only a small decrease in width. – user58446 Jul 20 '18 at 07:32
I've changed the original code to make it responsive horizontally until -md-. You can easily swap that out with -sm- too. Glad I could help :) – Amruth Pillai Jul 20 '18 at 07:35
Can I transition the border-radius settings in style.css? If I add col-sm-* where * is the actual value I use, will it add (not overwrite) this to the existing bootstrap css? Or do I need to create a new class col-sm-\*-right and col-sm-\*-bottom and inherit from the original col-sm-*? – user58446 Jul 20 '18 at 07:41
Your solution cheated a little and used four rounded corners! :) – user58446 Jul 20 '18 at 07:42
@user58446 Unfortunately, at this time, Boostrap doesn't have rounded-sm/md/lg classes, but you could write your own custom class in your stylesheet. You'll have to use css media queries to achieve this. Haha, yes, I am aware of the trick I used :D It was just for demonstration purposes. – Amruth Pillai Jul 20 '18 at 07:43

score 0 · Answer 2 · answered Jul 20 '18 at 06:42

0

You can use boostrap classes for responsive like .col .col-sm-*. And as far as I got your question you need full image width at small screen or fixed width at bigger screen.

Horizontal Case

You need to apply certain width and border-radius: 0px 5px 5px 0;

Vertical Case

For this case you need to apply width: 100% as image needs to get resized according to screen. Indeed it will stretch the image for that use some good quality image and apply media query as per your requirement. and for bottom corners use border-radius: 0px 0px 5px 5px;

answered Jul 20 '18 at 06:42

Aman

642
1
5
12

Thanks for your post, I gave the answer amruth since he got there first and his answer was nearly spot on. However, your answer has made me think on something and would like to upvote it. Can I add .col-sm-* (the * being replaced by the value I actually use) in CSS and it will add this border radius to those columns without overwriting the rest of the col-sm-* CSS elements? Or do I need to create a new class col-sm-\*-custom and inherit col-sm-* and add border-radius: 0px 0px 5px 5px? – user58446 Jul 20 '18 at 07:37
It would be better to inherit the base class to your new class because it is advised not to change anything in core library. – Aman Jul 20 '18 at 07:42

Bootstrap CSS class for when card image moves due to resizing

2 Answers2