responsive design - displaying 2 cards per row on small screens

Question

I'm working on a web page where I have a row of cards, each containing an image and a title. Currently, I'm using the Bootstrap grid system to display 4 cards per row on larger screens (col-md-2), and I want to adjust this to show 2 cards per row on small screens.

<div class="row">
                <div class="col-md-2 col-sm-4 item mt-3">
                    <div class="card item-card card-block">
                        <img src="~/img/deprt-8.png" style="max-width: 100%; ">

                        <h5 class="item-card-title my-2">Internal/Family Medicine </h5>
                    </div>
                </div>
            <div class="col-md-2 col-sm-4 item mt-3">
                    <div class="card item-card card-block">
                    <img src="~/img/deprt-10.png" style="max-width: 100%; ">
                        <h5 class="item-card-title my-2">Pulmonology </h5>
                    </div>
                </div>
                <div class="col-md-2 col-sm-4 item mt-3">
                    <div class="card item-card card-block">
                    <img src="~/img/deprt-11.png" style="max-width: 100%; ">
                        <h5 class="item-card-title my-2">Gastroenterology</h5>
                    </div>
                </div>
                <div class="col-md-2 col-sm-4 item mt-3">
                    <div class="card item-card card-block">
                    <img src="~/img/deprt-1.png" style="max-width: 100%; ">
                        <h5 class="item-card-title my-2">Dentistry</h5>
                    </div>
                </div>
            
            </div>

Answer 1

Replace col-sm-4 with col-sm-6 to show 2 cards on small screens and 1 card on even smaller ones. Or replace col-sm-4 with col-6 to show 2 cards on both small and smallest screens.

Change col-md-2 to col-md-3 to display 4 cards per row instead of 6 on larger screens.

Optional:

Remove unnecessary style="max-width: 100%; " from <img> and make sure to put a .row into container class (such as .container-fluid) to avoid parent element overflow (unless there are additional styles affecting an image and row container layout).

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 col-sm-6 item mt-3">
      <div class="card item-card card-block">
        <img src="https://placehold.co/600x400">
        <h5 class="item-card-title my-2">Internal/Family Medicine </h5>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 item mt-3">
      <div class="card item-card card-block">
        <img src="https://placehold.co/600x400">
        <h5 class="item-card-title my-2">Pulmonology </h5>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 item mt-3">
      <div class="card item-card card-block">
        <img src="https://placehold.co/600x400">
        <h5 class="item-card-title my-2">Gastroenterology</h5>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 item mt-3">
      <div class="card item-card card-block">
        <img src="https://placehold.co/600x400">
        <h5 class="item-card-title my-2">Dentistry</h5>
      </div>
    </div>
  </div>
</div>