Владислав Великоиваненко

Не меняя верстку, в CSS достаточно таких манипуляций:

.button-card-wrapper{
  display: flex;
}

.button-card-wrapper .subtract{
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.button-card-wrapper .add{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.button-card-wrapper .subtract,
.button-card-wrapper .add{
  border: none;
  padding: 15px;
  font-size: 1.8em;
  transition: .2s linear;
}

.js-number{
  width: 3%;
  text-align: center;
  background-color: #EFEFEF;
  border: none;
  font-size: 1.5em;
}

.button-card-wrapper .subtract:hover,
.button-card-wrapper .add:hover{
  cursor: pointer;
  transition: .2s linear;
  background-color: #d3d3d3;
}

Это даст необходимый результат.
Если вопросы более конкретные будут, задавайте:)
Но всё же, раз возник такой вопрос, то полагаю, что отсутствует базовое понимание HTML+CSS. К тому же, по-хорошему, как сказали в комментарии выше, bootstrap вообще тут не сдался, это можно сделать гораздо легче и проще, так зачем жизнь усложнять?) Изучите основы HTML и CSS.