How can I make my bootstrap collapse toggles mutually exclusive?

If I've got two buttons toggling collapsible cards, I'd like to make button2 collapse target1 before expanding target2, and vice-versa:

<div class="container">
 <div class="btn-group mx-auto">
  <button class="btn" type="button" data-toggle="collapse" data-target="#target1" aria-expanded="false">
    button1
  </button>
  <button class="btn" type="button" data-toggle="collapse" data-target="#target2" aria-expanded="false">
    button2
  </button>
 </div>
</div>
<div class="collapse" id="target1">
 <div class="card card-body">
   ...
 </div>
</div>
<div class="collapse" id="target2">
 <div class="card card-body">
   ...
 </div>
</div>

Currently if button1 and button2 are clicked one after the other, both cards remain expanded.

Thank you!