Twitter bootstrap 引导4个2x2形式的显示按钮

我正在使用bootstrap 4，我需要设置4个图标按钮，如2x2表单：

因此：

按钮1按钮2

按钮3按钮4

但我所拥有的是：

按钮1

按钮2

按钮3

按钮4

我的Html代码是：

<div class="row">
<div class="col-md-3">
</div>
<div class="col-sm-6" align="center">
<div class="card">
  <img class="card-img-top" src="../images/2013.png" alt="Card image cap">
  <div class="card-block">
    <div class="row">
    <div class="col-sm-6">
    <div class="card">
      <div class="card-block">

        <p class="card-text"></p>
        <a href="patient.php" style="width: 200px;" class="btn btn-primary"><i class="fa fa-group fa-fw" aria-hidden="true"></i> New Client</a>
      </div>
    </div>
    </div>
  </div>
  <div class="row">
   <div class="col-sm-6">
    <div class="card">
      <div class="card-block">

        <p class="card-text"></p>
        <a href="#" style="width: 200px;" class="btn btn-primary"><i class="fa fa-book fa-fw" aria-hidden="true"></i> New Sale</a>
      </div>
    </div>
    </div>
   </div>
   <div class="row">
   <div class="col-sm-6">
    <div class="card">
      <div class="card-block">

        <p class="card-text"></p>
        <a href="#" style="width: 200px;" class="btn btn-primary"><i class="fa fa-plus fa-fw" aria-hidden="true"></i> Store</a>
      </div>
    </div>
    </div>
   </div>
   <div class="row">
   <div class="col-sm-6">
    <div class="card">
      <div class="card-block">

        <p class="card-text"></p>
        <a href="#" style="width: 200px;" class="btn btn-primary"><i class="fa fa-database fa-fw" aria-hidden="true"></i> Report</a>
      </div>
    </div>
    </div>
   </div>
  </div>
</div>

我应该在代码中更改什么，使其采用2x2格式。

试试这个

<style>    
.col-sm-12 {
  display: flex;
  align-items: center;
  justify-content: center;  
}
</style>

<div class="row ">
<div class="col-sm-12" style="margin-bottom: 10px;">
    <div class="pull-left">
        <a href="#" style="width: 200px; margin-right: 10px;" class="btn btn-primary"><i class="fa fa-book fa-fw" aria-hidden="true"></i> New Sale1 </a>
    </div>
    <div class="">
        <a href="#" style="width: 200px;" class="btn btn-primary"><i class="fa fa-book fa-fw" aria-hidden="true"></i> New Sale2 </a>
    </div>
</div>
<div class="col-sm-12">
    <div class="pull-left">
        <a href="#" style="width: 200px; margin-right: 10px;" class="btn btn-primary"><i class="fa fa-book fa-fw" aria-hidden="true"></i> New Sale3 </a>
    </div>
    <div class="">
        <a href="#" style="width: 200px;" class="btn btn-primary"><i class="fa fa-book fa-fw" aria-hidden="true"></i> New Sale4 </a>
    </div>
</div>

col-sm-12{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

---

如何在中间对齐？@droidnation:刚刚更新了代码。请看一看，让我知道关于拉-*我相信在版本4中它被替换为浮点数-*