I'm trying to figure out how to display a set of images in a row using Bootstrap grids. On large devices, I want 4 images displayed, on small and medium devices I only want 2 images shown. However, when I resize the screen to a smaller size, the images take up the full width instead of just 50%, resulting in 1 image per row.
How can I adjust my Bootstrap code to make the images take up only 50% of the width so that 2 images are displayed in a row?
img{
height: 200px;
}
<div class="row pr-3 pt-1 pl-3 pb-3">
<div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3">
<img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">grid1 </h5>
</div>
</div>
<div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3">
<img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">grid2</h5>
</div>
</div>
<div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3">
<img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">grid3</h5>
</div>
</div>
<div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3">
<img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">grid4</h5>
</div>
</div>
</div>