card-p3

pattern3.html

<!-- 3.画像が左パターン
****************************************************************************************************
Bootstrapのグリッドシステムって、container無しでも使えるんですね。
style="max-width: 540px"でカードの最大幅を指定しています。指定無しの場合は画面いっぱいに広がります。
my-autoで画像を縦方向に中央寄せしています。
****************************************************************************************************
-->

<div class="card mb-3" style="max-width: 540px">
    <div class="row no-gutters">
        <div class="col-md-4 my-auto">
            <img class="card-img" src="images/img1.jpg">
        </div>
        <div class="col-md-8">
            <div class="card-body">
                <h5 class="card-title">Card Title</h5>
                <p>ここに写真の説明などを記載します。これは例えば作品集の一部を写真で示しておいて、下のリンクから作品集ページに飛んでもらうような仕掛けを作ることができます。</p>
                <a class="btn btn-primary" href="#">Details</a>
            </div>
        </div>
    </div>
</div>