Card

.card > .card-body

灯台の役割
The role of lighthouse

沿岸を航行する船が現在の位置を把握したり、暗礁に乗り上げたりしないようにする目的で建造された建物が灯台です。

続きを読む 灯台の写真
.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}
        
        .card-body {
          -ms-flex: 1 1 auto;
          flex: 1 1 auto;
          padding: 1.25rem;
        }

        .card-title {
          margin-bottom: 0.75rem;
        }
        .card-link + .card-link {
          margin-left: 1.25rem;
        }
        

Card

.rounded-0

灯台の役割
The role of lighthouse

沿岸を航行する船が現在の位置を把握したり、暗礁に乗り上げたりしないようにする目的で建造された建物が灯台です。

続きを読む 灯台の写真
灯台の役割
The role of lighthouse

沿岸を航行する船が現在の位置を把握したり、暗礁に乗り上げたりしないようにする目的で建造された建物が灯台です。

続きを読む 灯台の写真
灯台の役割
The role of lighthouse

沿岸を航行する船が現在の位置を把握したり、暗礁に乗り上げたりしないようにする目的で建造された建物が灯台です。

続きを読む 灯台の写真

Card

.card > img.card-img-top

灯台の役割
The role of lighthouse

沿岸を航行する船が現在の位置を把握したり、暗礁に乗り上げたりしないようにする目的で建造された建物が灯台です。

続きを読む 灯台の写真

.card-body > img.card-img

灯台の役割

沿岸を航行する船が現在の位置を把握したり、暗礁に乗り上げたりしないようにする目的で建造された建物が灯台です。

続きを読む 灯台の写真

-> card-body の中に画像を配置する場合

この使い方が一番多い気がする

.card-img-overlay

灯台の役割

沿岸を航行する船が現在の位置を把握したり、 暗礁に乗り上げたりしないようにする目的で建造された建物が灯台です。

続きを読む 灯台の写真

-> 文字部分に .card-img-overlay をつけて、position: absolute させる


.card-img-top {
  width: 100%;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card-img {
  width: 100%;
  border-radius: calc(0.25rem - 1px);
}
      
        .card-img-overlay {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          padding: 1.25rem;
        }