Menyisipkan Teks Kedalam Gambar Menggunakan Bootstrap4 -

Pada pembahasan artikel ini saya akan membagikan tutorial seputar Bootstrap. Yang akan dibahas yaitu cara menyisipkan teks kedalam gambar menggunakan Bootstrap4. Mungkin sahabat pernah membuat dengan cara membuat style CSS dengan property position. Dimana gambar harus diberikan position:relative dan teks diberikan style position:absolute.

Jadi pada dokumentasi Bootstrap tersedia Image Overlays yang bisa kita gunakan untuk menyisipkan teks kedalam gambar, bagaimana caranya yuk simak seperti berikut ini:

Langkah Pertama

Sahabat silahkan siapkan beberapa gambar yang akan digunakan, oke lanjut membuat file baru untuk struktur HTML seperti ini:

<div class="container mt-5">
      <div class="row">
        <div class="card-group">
  <div class="card">
    <img src="pos1.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Aladdin</h5>
      <p class="card-text"> <!-- isi dengan deskripsi --> </p>
    </div>
    <div class="card-img-overlay text-uppercase text-white font-weight-bolder mt-5">
      <h4 class="card-title">Walt Disney Signature</h4>
      <p class="card-text">Film Live Action</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="pos2.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Guardians</h5>
      <p class="card-text"> <!-- isi dengan deskripsi --> </p>
    </div>
    <div class="card-img-overlay text-uppercase text-white font-weight-bolder mt-5">
      <h4 class="card-title">Guardians</h4>
      <p class="card-text">Film Live Action</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="pos3.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Black & White: The Dawn of Justice</h5>
      <p class="card-text"> <!-- isi dengan deskripsi --> </p>
    </div>
    <div class="card-img-overlay text-uppercase text-white font-weight-bolder mt-5">
      <h4 class="card-title">Black & White: The Dawn of Justice</h4>
      <p class="card-text">Film Live Action</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>
      </div>

Jadi pada Bootstrap ini kita menggunakan class=”card-img-overlay” yang berfungsi agar teks berada di dalam class=”card-img-overlay” bisa berada didalam gambar .

Langkah berikutnya simpan code diatas, kemudian buka pada browser dan lihat hasilnya seperti tampilan berikut ini:

Saya kita cukup dalam pembahasan tetnang cara Menyisipkan Teks Kedalam Gambar Menggunakan Bootstrap4. Semoga bermanfaat dan sampai jumpa.

terima kasih

Menyisipkan Teks Kedalam Gambar Menggunakan Bootstrap4

Kategori