How to make a responsive image using Bootstrap?

Question

Bootstrap

I have two blocks col-lg-6:

<div class="container">
            <div class="row">
                <div class="col-lg-6 mt-5">
                    <p>Text</p>
                </div>
                <div class="col-lg-6 mt-5 illustration_bg">
                    <img src="img/krolik_paczki.svg" alt="logo">
                </div>
            </div>
        </div>

One block must contain an image that must be larger than it. And the image should adapt according to the screen size. Now when the screen is reduced, a horizontal scroll appears and the image goes off the screen.



In what way can this be done?

Answer 1

.img {
  max-width: 100%;
  height: auto;
}

Bootstrap has a class.img-fluid