最終更新日:2018年8月29日 11時15分閲覧回数:1537

Bootstrap 3 でカードを作る

Bootstrap 4b のカードを真似てみるテスト <style>img:hover{opacity:0.5;}</style>

panel-primary

<div class="panel panel-primary" style="width:350px;">
  <div class="panel-heading" style="padding:0;min-height:400px">
    <img class="img-responsive" src="images/hcqf.png" style="border-top-left-radius:3px;border-top-right-radius:3px;" alt="">
    <p style="margin:1.25em">panel-primary</p>
  </div>
</div>

alert-danger

<div class="alert alert-danger" style="padding:0;width:350px;min-height:400px;display: flex;flex-direction: column;">
  <p style="margin:1.25em;flex:1 1 auto;">alert-danger</p>
  <img class="img-responsive" src="images/hcqf.png" style="border-bottom-right-radius:4px;border-bottom-left-radius:4px;" alt="">
</div>

well

<div class="well" style="padding:0;width:350px;min-height:400px;display:flex;flex-direction:column;">
  <p style="margin:1.25em;flex:1 1 auto;">well</p>
  <img class="img-responsive" src="images/hcqf.png" style="border-bottom-left-radius:4px;border-bottom-right-radius:4px;" alt="">
</div>

jumbotron

<div class="jumbotron nowrap" style="padding:0;width:350px;min-height:400px">
  <img class="img-responsive" src="images/hcqf.png" style="border-top-left-radius:6px;border-top-right-radius:6px;" alt="">
  <p style="margin:1.25em;width:350px;">jumbotron</p>
</div>

コメント

当フォームより収集される個人情報は、返信を要する際に使用されるものであり、法令に基づく行政機関等への提供を除き、ご本人の同意を得ずに第三者に提供することはありません。また、コメントが掲載される場合であってもメールアドレスが本サイト内に記載されることはありません。