Bootstrapのグリッドレイアウトとアイコンのボタンについて

Bootstarapにて以下ようなコードを作成してみました。
陰陽魚のアイコンをprimaryボタンの中に入れてみたのですが
一番右にボタンが配置されてしまいます。
col-md-4のクラスを入れてみたので3分割されデフォルトの余白が入る想定なのですが
うまくいかないようです。

Bootstarap5
1<div class="row">
2       <div class="col col-md-4">
3          <a href="#" class="btn btn-primary"><span class="bi bi-yin-yang">targetpoint</span></a>
4       </div>
5     </div>

例えば次のようなコードを記載した場合には
入力フォームが3つ表示され
デフォルトの余白が両端に置かれているように思えます。

Bootstrap5
1<div class="row">
2       <div class="col col-md-4">
3         <input class="from-control" type="text" placeholder="col-md-4">
4       </div>
5       <div class="col col-md-4">
6         <input class="from-control" type="text" placeholder="col-md-4">
7       </div>
8       <div class="col col-md-4">
9         <input class="from-control" type="text" placeholder="col-md-4">
10       </div>
11     </div>
12