方法1: グリッドシステムを使用する Bootstrapのグリッドシステムを使用して、カードを横並びに配置することができます。以下のコード例を参考にしてください。
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<!-- カードの内容 -->
</div>
</div>
<div class="col-md-6">
<div class="card">
<!-- カードの内容 -->
</div>
</div>
</div>
</div>上記の例では、col-md-6クラスを使用してカードを2つの等しい幅の列に配置しています。必要に応じて、col-md-6の数字を変更することで、異なる列の幅を指定することもできます。
方法2: フレックスボックスを使用する もう1つの方法は、CSSのフレックスボックスを使用してカードを横並びに配置することです。以下のコード例を参考にしてください。
<div class="d-flex">
<div class="card">
<!-- カードの内容 -->
</div>
<div class="card">
<!-- カードの内容 -->
</div>
</div>上記の例では、d-flexクラスを使用してカードを横並びに配置しています。
方法3: カスタムCSSを使用する さらに、カスタムCSSを使用してカードを横並びに配置することもできます。以下のコード例を参考にしてください。
<div class="card-container">
<div class="card">
<!-- カードの内容 -->
</div>
<div class="card">
<!-- カードの内容 -->
</div>
</div>上記の例では、.card-containerクラスを使用してカードを横並びに配置するためのカスタムCSSを定義しています。必要に応じて、さらなるスタイルの調整や位置の微調整が可能です。
以上が、Bootstrapのカードを横並びに配置するいくつかの方法です。必要に応じて、適切な方法を選択し、デザインに合わせてカードを配置してください。