Bootstrap 4 - Image overflows from column when the window is resized

Question

Bootstrap newbie here.

I'm trying to bootstrapify an old page but I can't seem to figure out how to stop my image from overflowing to the next column. I have a row with two columns- with the left side containing a picture. As soon as I reduce the window width, my image will start overflowing to the right column and will eventually collapse on top of the right column. I would like for the left column width to remain static or collapse to the top of the right column until the image can no longer fit in the left column.

I've tried adding the image-responsive class to the image but that will only change my image dimensions and I would prefer the image to keep its dimensions. Any help would be greatly appreciated!

Here is my code: https://www.codeply.com/go/fb14u8fsSc

score 0 · Answer 1 · answered Dec 07 '17 at 00:31

Is it something like the one below you are looking for?

A couple of notes though:

It might be because of your simplified codeply example, but you use <div class="row"><div class="col-md-12">…X…</div></div>, which is the equivalent of …X…. That simplifies things.
We are talking about Bootstrap 4 here (you also use that in your codeply), but the .img-responsive class is from Bootstrap 3. That class is called .img-fluid in Bootstrap 4.
Regarding inline-style margins, I would suggest to use the spacing utility classes instead.

<div class="container-fluid" style="position: fixed">
    <div class="row">
        <div class="col">
            <div class="card my-3">
                <div class="card-header"></div>
                
                <div class="card-body">
                    Insert name here<br/>
                    <img src="https://dummyimage.com/188x225/000/fff" class="XXXimg-fluid" alt=""/>
                </div>

                <div class="card-footer"></div>
            </div>
        </div>

        <div class="col-md-9">
            <div class="card text-xs-center mt-3">
                <div class="card-header"></div>
                <div class="card-body"></div>
            </div>
        </div>
    </div>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

Bootstrap 4 - Image overflows from column when the window is resized

1 Answers1