Как выровнять множество параметров в одной карточке

Question

My Require mnet Совместите 8 карт в одном ряду. Каждая карта включает 4 типа данных: Среднее, Диапазон, Мин. И Макс.

Что я пробовал Код, который я пробовал для этого:

<div class="row">
  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>


  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

</div>

Но это дает искаженное отображение, как показано на рисунке ниже. Я не могу удалить лишние отступы \ пробел между \ внутри каждой карты. Если я уберу отступы из некоторых элементов - значки, текст ... - go из карты.

Пожалуйста, помогите мне правильно расположить карты в одном ряду.

Мой ожидаемый вывод карты соответствует показанному на рисунке ниже

Обновленный код с использованием ответа от Нишарга Шаха

<div class="row">
  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" fas fa-clock"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Average</p>
              <h6 class=" card-title">43.11</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-6">
            <!-- <div class=" numbers"> -->
            <p style="font-size: 10px;" class=" card-category">Range</p>
            <h6 class=" card-title">26.87</h6>
            <!-- </div> -->
          </div>
          <div class=" col-6">
            <div class=" numbers">
              <p style="font-size: 10px;" class=" card-category">Min</p>
              <h6 class=" card-title">98.44</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" fa fa-car"> </i> Max
          <span class="numbers">87.22</span>
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" fas fa-clock"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Average</p>
              <h6 class=" card-title">43.11</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-6">
            <!-- <div class=" numbers"> -->
            <p style="font-size: 10px;" class=" card-category">Range</p>
            <h6 class=" card-title">26.87</h6>
            <!-- </div> -->
          </div>
          <div class=" col-6">
            <div class=" numbers">
              <p style="font-size: 10px;" class=" card-category">Min</p>
              <h6 class=" card-title">98.44</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" fa fa-car"> </i> Max
          <span class="numbers">87.22</span>
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" fas fa-clock"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Average</p>
              <h6 class=" card-title">43.11</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-6">
            <!-- <div class=" numbers"> -->
            <p style="font-size: 10px;" class=" card-category">Range</p>
            <h6 class=" card-title">26.87</h6>
            <!-- </div> -->
          </div>
          <div class=" col-6">
            <div class=" numbers">
              <p style="font-size: 10px;" class=" card-category">Min</p>
              <h6 class=" card-title">98.44</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" fa fa-car"> </i> Max
          <span class="numbers">87.22</span>
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" fas fa-clock"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Average</p>
              <h6 class=" card-title">43.11</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-6">
            <!-- <div class=" numbers"> -->
            <p style="font-size: 10px;" class=" card-category">Range</p>
            <h6 class=" card-title">26.87</h6>
            <!-- </div> -->
          </div>
          <div class=" col-6">
            <div class=" numbers">
              <p style="font-size: 10px;" class=" card-category">Min</p>
              <h6 class=" card-title">98.44</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" fa fa-car"> </i> Max
          <span class="numbers">87.22</span>
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" fas fa-clock"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Average</p>
              <h6 class=" card-title">43.11</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-6">
            <!-- <div class=" numbers"> -->
            <p style="font-size: 10px;" class=" card-category">Range</p>
            <h6 class=" card-title">26.87</h6>
            <!-- </div> -->
          </div>
          <div class=" col-6">
            <div class=" numbers">
              <p style="font-size: 10px;" class=" card-category">Min</p>
              <h6 class=" card-title">98.44</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" fa fa-car"> </i> Max
          <span class="numbers">87.22</span>
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" fas fa-clock"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Average</p>
              <h6 class=" card-title">43.11</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-6">
            <!-- <div class=" numbers"> -->
            <p style="font-size: 10px;" class=" card-category">Range</p>
            <h6 class=" card-title">26.87</h6>
            <!-- </div> -->
          </div>
          <div class=" col-6">
            <div class=" numbers">
              <p style="font-size: 10px;" class=" card-category">Min</p>
              <h6 class=" card-title">98.44</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" fa fa-car"> </i> Max
          <span class="numbers">87.22</span>
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" fas fa-clock"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Average</p>
              <h6 class=" card-title">43.11</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-6">
            <!-- <div class=" numbers"> -->
            <p style="font-size: 10px;" class=" card-category">Range</p>
            <h6 class=" card-title">26.87</h6>
            <!-- </div> -->
          </div>
          <div class=" col-6">
            <div class=" numbers">
              <p style="font-size: 10px;" class=" card-category">Min</p>
              <h6 class=" card-title">98.44</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" fa fa-car"> </i> Max
          <span class="numbers">87.22</span>
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" fas fa-clock"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Average</p>
              <h6 class=" card-title">43.11</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-6">
            <!-- <div class=" numbers"> -->
            <p style="font-size: 10px;" class=" card-category">Range</p>
            <h6 class=" card-title">26.87</h6>
            <!-- </div> -->
          </div>
          <div class=" col-6">
            <div class=" numbers">
              <p style="font-size: 10px;" class=" card-category">Min</p>
              <h6 class=" card-title">98.44</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" fa fa-car"> </i> Max
          <span class="numbers">87.22</span>
        </div>
      </div>
    </div>
  </div>

</div>

Это отображается, как показано на изображении ниже

Я хочу сделать верх уменьшите значок и удалите лишний пробел между нижним колонтитулом, отмеченным зелеными стрелками на изображении. Пожалуйста, помогите

Answer 1

Вы можете добавить px-1 класс во всех col классах, чтобы уменьшить разрыв между карточками.

px-1 = .5rem = 8px, если вы хотите уменьшить больше разрыва Вы можете добавить пользовательский CSS на все col классов.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="row">
  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>


  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>