BootstrapのCard機能について。

Bootstrapのcard機能を使ってカードを４つ並べて漢字の田のような並べ方をするにはどのようにソースコードを書けば良いのでしょうか？
Bootstrap公式ページにはそのような記述はありませんでした。

行動規範の内容に同意します

回答2件

カスタムcssを加えて以下のようなやり方にすると隙間なく田の字のようなレイアウトになります。

css
1.rounded-top-0 .card {
2  border-top-left-radius: 0;
3  border-top-right-radius: 0;
4}
5
6.rounded-bottom-0 .card {
7  border-bottom-left-radius: 0;
8  border-bottom-right-radius: 0;
9}
10
11@media screen and (max-width: 575px) {
12  .four-cards .card {
13    margin-bottom: 0;
14  }
15	
16  .four-cards .card:first-child {
17    border-top-right-radius: 0;
18    border-bottom-right-radius: 0;
19  }
20	
21  .four-cards .card:last-child {
22    border-top-left-radius: 0;
23    border-bottom-left-radius: 0;
24  }
25}

html
1<div class="card-group rounded-bottom-0 flex-row four-cards">
2  <div class="card flex-fill">
3    <div class="card-body">
4      <div class="p-5">Sample</div>
5    </div>
6  </div>
7  <div class="card flex-fill border-left-0">
8    <div class="card-body">
9      <div class="p-5">Sample</div>
10    </div>
11  </div>
12</div>
13<div class="card-group rounded-top-0 flex-row four-cards">
14  <div class="card flex-fill border-top-0">
15    <div class="card-body">
16      <div class="p-5">Sample</div>
17    </div>
18  </div>
19  <div class="card flex-fill border-top-0 border-left-0">
20    <div class="card-body">
21      <div class="p-5">Sample</div>
22    </div>
23  </div>
24</div>