Make Slider Images responsive Bootstrap

Question

Hi i have got a layout that looks the way i want on the webpage but the images aren't responsive. One column has a paragraph of text then in the other a slideshow. If i use class="img-circle" it makes the image smaller than i would like. When i make the window smaller it cuts some of the image off. How can i make them responsive? I tried to use the carousel bootstrap has but i can't get them to align side by side.

 $(".slideshow > div:gt(0)").hide(); setInterval(function () { $('.slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('.slideshow'); }, 4000);

 .slideshow { margin: 45px auto; position: relative; width: 490px; height: 320px; padding: 10px; /*box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);*/ } .slideshow > div { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="d-inline h3">orem ipsum dolor </div> <div class="d-inline h3 float-lg-right"><a href="/home/heritageprojects">orem ipsum dolor </a></div> <div class="row mb-5"> <div class=" col-sm-5 col-md-4 col-lg-8 px-0 px-xl-4 mx-auto"> <p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus feugiat leo. Donec tristique consequat odio vel imperdiet. Mauris efficitur a sapien et interdum. Morbi lacinia, justo quis pulvinar condimentum, nibh turpis vestibulum nulla, nec facilisis nisl ex et ipsum. Pellentesque maximus, ligula in dictum blandit, lectus est sodales nisi, ac tempor ante tellus eu turpis. Nam vulputate augue ut accumsan egestas. Donec efficitur, lectus ut aliquam viverra, nisl sem. </p> </div> <div class="col-lg-4 col-sm-12 col-xs-12 slideshow"> <div> <img src="https://placeimg.com/420/320/arch"> </div> <div> <img src="https://placeimg.com/420/320/nature"> </div> <div> <img src="https://placeimg.com/420/320/tech">. </div> </div> </div> </div>

Answer 1

Use the bootstrap class img-fluid in your img tag.

https://getbootstrap.com/docs/4.0/content/images/