Не меняя верстку, в 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.
